<template>
    <div class="col-3" v-if="model">
        <UiCheckbox :checked="model.includes(Grant.CLIENT_CREDENTIALS)" @click="toggle(Grant.CLIENT_CREDENTIALS)">Client Credentials</UiCheckbox>
        <UiCheckbox :checked="model.includes(Grant.AUTHORIZATION)" @click="toggle(Grant.AUTHORIZATION)">Authorization Code</UiCheckbox>
        <UiCheckbox :checked="model.includes(Grant.PASSWORD)" @click="toggle(Grant.PASSWORD)">Password</UiCheckbox>
    </div>
</template>

<script setup lang="ts">
import {Grant} from "~/client/Grant";

const model = defineModel<Grant[]>();

function toggle(grant: Grant)
{
    if (model.value != null)
    {
        const index = model.value.findIndex(item => item === grant);
        if (index !== -1)
        {
            model.value.splice(index, 1);
        }
        else
        {
            model.value.push(grant);
        }
    }
}
</script>

<style scoped>

</style>