<template>
    <div class="content-l" v-if="realm.data">
        <div class="col-2">
            <div class="content-m">
                <h3>Name</h3>
                <p class="tile-m">{{realm.data.name}}</p>
            </div>
            <div class="content-m">
                <h3>Access Token Lifetime</h3>
                <p class="tile-m">{{(realm.data.lifetime / 60)}} Minutes</p>
            </div>
        </div>
        <ErrorAlert>
            <div class="spaced-center">
                <p>Delete Realm</p>
                <UiButton class="delete-button" @click="deleteRealm(realm.data)">Delete</UiButton>
            </div>
        </ErrorAlert>
    </div>
</template>

<script setup lang="ts">
import ErrorAlert from "~/components/ui/alert/ErrorAlert.vue";
import {Popup, PopupSize, usePopup} from "~/components/ui/popup/Popup";
import RealmDelete from "~/realm/RealmDelete.vue";
import type {Realm} from "~/realm/Realm";
import {useGet} from "~/utils/HttpUtils";
import UiButton from "~/components/ui/UiButton.vue";

const realm = useGet<Realm>("/api/realms/" + useRoute().params.realm_key);

function deleteRealm(realm: Realm)
{
    usePopup().open(Popup.component<Realm>(RealmDelete).setConfig({ heading: 'Delete Realm', size: PopupSize.MEDIUM }).setPayload(realm))
}
</script>

<style scoped>
.delete-button {
    background-color: red;
}
</style>