<div>

    <x-title>Tags</x-title>
    <div class="container">

    <!-- Tag Form -->
    <div class="card">
        <div class="card-body p-4">
            <h3 class="h5 fw-semibold mb-4">{{ $isEditing ? 'Edit Tag' : 'Create New Tag' }}</h3>

            <form wire:submit.prevent="save">
                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Tag Name</label>
                        <input type="text" wire:model="name" class="form-control">
                        @error('name') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Color</label>
                        <div class="d-flex align-items-center gap-2">
                            <input type="color" wire:model="color" class="form-control form-control-color p-1" style="width: 45px; height: 38px; cursor: pointer;">
                            <input type="text" wire:model="color" class="form-control">
                        </div>
                        @error('color') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Description</label>
                    <textarea wire:model="description" rows="2" class="form-control"></textarea>
                    @error('description') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                </div>

                <div class="d-flex justify-content-end gap-2 mt-4">
                    @if($isEditing)
                        <button type="button" wire:click="resetForm" class="btn btn-outline-secondary">Cancel</button>
                    @endif
                    <button type="submit" class="btn btn-primary">
                        {{ $isEditing ? 'Update Tag' : 'Save Tag' }}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Tags List -->
    <div class="list-group shadow-sm">
        @forelse($tags as $tag)
            <div class="list-group-item list-group-item-action d-flex justify-content-between align-items-center p-3">
                <div>
                    <!-- The Tag UI -->
                    <span style="background-color: {{ $tag->color }}1A; color: {{ $tag->color }}; border-color: {{ $tag->color }}40;"
                          class="badge rounded-pill border fw-normal fs-6 mb-1">
                        {{ $tag->name }}
                    </span>

                    @if($tag->description)
                        <p class="text-muted small mb-0 mt-1">
                            {{ $tag->description }}
                        </p>
                    @endif
                </div>

                <div class="d-flex gap-3 align-items-center ms-3">
                    <button wire:click="edit({{ $tag->id }})" class="btn btn-sm btn-link p-0 text-secondary" title="Edit">
                        <i class="mdi mdi-pencil"></i>
                    </button>
                    <button wire:click="delete({{ $tag->id }})" class="btn btn-sm btn-link p-0 text-danger" onclick="confirm('Are you sure?') || event.stopImmediatePropagation()" title="Delete">
                        <i class="mdi mdi-trash-can text-danger"></i>
                    </button>
                </div>
            </div>
        @empty
            <div class="list-group-item text-center py-5 text-muted">
                No tags created yet.
            </div>
        @endforelse
    </div>
    </div>
</div>