Permission settings with checkboxes

<script setup lang="ts">
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldContent, FieldDescription, FieldGroup, FieldLegend, FieldSet, FieldTitle } from "@/components/ui/field"
</script>

<template>
  <div class="mx-auto w-full max-w-xs">
    <FieldGroup>
      <FieldSet>
        <FieldLegend variant="label">Access Permissions</FieldLegend>
        <FieldDescription>
          Configure what this role can access.
        </FieldDescription>
        <FieldGroup class="gap-4">
          <Field orientation="horizontal">
            <Checkbox id="perm-read" :default-value="true" />
            <FieldContent>
              <FieldTitle>Read</FieldTitle>
              <FieldDescription>
                View resources and data. Cannot make changes.
              </FieldDescription>
            </FieldContent>
          </Field>
          <Field orientation="horizontal">
            <Checkbox id="perm-write" :default-value="true" />
            <FieldContent>
              <FieldTitle>Write</FieldTitle>
              <FieldDescription>
                Create and edit resources. Requires read access.
              </FieldDescription>
            </FieldContent>
          </Field>
          <Field orientation="horizontal">
            <Checkbox id="perm-delete" />
            <FieldContent>
              <FieldTitle>Delete</FieldTitle>
              <FieldDescription>
                Permanently remove resources. This action is irreversible.
              </FieldDescription>
            </FieldContent>
          </Field>
          <Field orientation="horizontal">
            <Checkbox id="perm-admin" disabled />
            <FieldContent>
              <FieldTitle>Admin</FieldTitle>
              <FieldDescription>
                Full access to all settings. Only available to owners.
              </FieldDescription>
            </FieldContent>
          </Field>
        </FieldGroup>
      </FieldSet>
    </FieldGroup>
  </div>
</template>