<template>
    <form class="content-l" @submit.prevent="addRealm">
        <div class="col-2">
            <UiInput label="Name" required>
                <input type="text" v-model="realm.name" required>
            </UiInput>
            <UiInput label="Key" required>
                <input type="text" v-model="realm.key" required>
            </UiInput>
        </div>
        <div class="center">
            <UiButton type="submit">Create</UiButton>
        </div>
    </form>
</template>

<script setup lang="ts">
import {usePopup} from "~/components/ui/popup/Popup";
import {Realm, RealmCreation} from "~/realm/Realm";
import {useRealmStore} from "~/realm/RealmStore";

const realm = ref(new RealmCreation());

function addRealm()
{
    useRealmStore().add(realm.value);
}
</script>

<style scoped>

</style>