<template>
    <div>
        <Table columns="auto auto auto 1fr" v-if="keys.data">
            <HeaderRow>
                <HeaderCell>ID</HeaderCell>
                <HeaderCell>Key Type</HeaderCell>
                <HeaderCell>Algorithm</HeaderCell>
                <HeaderCell>Use</HeaderCell>
            </HeaderRow>
            <ContentRow>
                <ContentCell v-for="key in keys.data.keys">{{ key.kid }}</ContentCell>
                <ContentCell v-for="key in keys.data.keys">{{ key.kty }}</ContentCell>
                <ContentCell v-for="key in keys.data.keys">{{ key.alg }}</ContentCell>
                <ContentCell v-for="key in keys.data.keys">{{ key.use }}</ContentCell>
            </ContentRow>
        </Table>
    </div>
</template>

<script setup lang="ts">
import HeaderRow from "~/components/ui/table/HeaderRow.vue";
import Table from "~/components/ui/table/Table.vue";
import HeaderCell from "~/components/ui/table/HeaderCell.vue";
import ContentCell from "~/components/ui/table/ContentCell.vue";
import ContentRow from "~/components/ui/table/ContentRow.vue";

const realmKey = useRoute().params.realm_key;

const keys = useGet<any>('/api/realms/' + realmKey + '/protocol/openid-connect/certs');
</script>

<style scoped>

</style>