@extends('layouts.admin.app')

@section('title', __('pages/admin/components.nav.dropdowns'))

@section('content')
<x-layouts.admin.component-demo :title="__('pages/admin/components.nav.dropdowns')">
    <x-utility.card :title="__('pages/admin/components.dropdowns.left_aligned')">
        <x-utility.dropdown align="left" width="w-52">
            <x-slot:trigger>
                <x-buttons.secondary>
                    {{ __('pages/admin/components.dropdowns.trigger') }}
                    <x-heroicon-o-chevron-down class="h-4 w-4" />
                </x-buttons.secondary>
            </x-slot:trigger>
            <x-slot:items>
                <a href="#" class="block px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted">{{ __('pages/admin/components.dropdowns.items.view_details') }}</a>
                <a href="#" class="block px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted">{{ __('buttons.edit') }}</a>
                <a href="#" class="block px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted">{{ __('pages/admin/components.dropdowns.items.duplicate') }}</a>
                <hr class="my-1 border-border" />
                <a href="#" class="block px-4 py-2 text-sm text-destructive transition-colors hover:bg-destructive/10">{{ __('buttons.delete') }}</a>
            </x-slot:items>
        </x-utility.dropdown>
    </x-utility.card>

    <x-utility.card :title="__('pages/admin/components.dropdowns.right_aligned')">
        <div class="flex items-center justify-between gap-4 rounded-lg border border-border px-4 py-3">
            <div class="flex min-w-0 items-center gap-3">
                <x-utility.avatar name="Alice Johnson" size="sm" status="online" />
                <div class="min-w-0">
                    <p class="truncate text-sm font-medium text-foreground">Alice Johnson</p>
                    <p class="truncate text-xs text-muted-foreground">alice@example.com</p>
                </div>
                <x-utility.badge variant="primary" size="sm">{{ __('pages/admin/components.tables.roles.admin') }}</x-utility.badge>
            </div>

            <x-utility.dropdown align="right" width="w-48">
                <x-slot:trigger>
                    <x-buttons.icon variant="ghost" :title="__('buttons.more')">
                        <x-heroicon-o-ellipsis-vertical class="h-5 w-5" />
                    </x-buttons.icon>
                </x-slot:trigger>
                <x-slot:items>
                    <a href="#" class="block px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted">{{ __('pages/admin/components.dropdowns.items.profile') }}</a>
                    <a href="#" class="block px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted">{{ __('pages/admin/components.dropdowns.items.settings') }}</a>
                    <a href="#" class="block px-4 py-2 text-sm text-destructive transition-colors hover:bg-destructive/10">{{ __('pages/admin/components.dropdowns.items.sign_out') }}</a>
                </x-slot:items>
            </x-utility.dropdown>
        </div>
    </x-utility.card>
</x-layouts.admin.component-demo>
@endsection