Modal Dialogs

<!-- Modal Trigger Button -->
<x-aura::button variant="primary" x-on:click="$dispatch('open-modal', 'create-key-modal')">
    Create
</x-aura::button>

<!-- Modal Overlay Component -->
<x-aura::modal name="create-key-modal" title="Generate API Access Key" description="Create a secret access key for authentication.">
    <x-aura::flex direction="col" gap="4">
        <x-aura::field label="Token Name">
            <x-aura::input placeholder="e.g. Production Worker" />
        </x-aura::field>
    </x-aura::flex>

    <x-slot:footer>
        <x-aura::button variant="secondary" size="sm" x-on:click="open = false">
            Cancel
        </x-aura::button>

        <x-aura::button variant="primary" size="sm">
            Create
        </x-aura::button>
    </x-slot:footer>
</x-aura::modal>

<x-aura::card size="lg" gap="4">
    <x-aura::flex align="center" gap="3">
        <x-aura::icon name="key" size="md" :container="true" />

        <x-aura::flex direction="col" gap="none">
            <x-aura::heading level="3" size="sm">
                Create Access Token
            </x-aura::heading>

            <x-aura::text variant="subtle" size="sm">
                Configure API permissions.
            </x-aura::text>
        </x-aura::flex>
    </x-aura::flex>

    <x-aura::field label="Token Name">
        <x-aura::input placeholder="e.g. Analytics Pipeline" />
    </x-aura::field>

    <x-slot:footer>
        <x-aura::button variant="secondary" size="sm">
            Cancel
        </x-aura::button>

        <x-aura::button variant="primary" size="sm">
            Create
        </x-aura::button>
    </x-slot:footer>
</x-aura::card>