@extends('layouts.admin')

@section('title', 'الوسوم | Help Numo')
@section('page-title', 'إدارة الوسوم')

@section('admin_content')
    <div
        class="card tag-table tag-table--reorderable"
        data-flat-reorder
        data-reorder-url="{{ route('admin.tags.reorder') }}"
    >
        <div class="tag-table__header">
            <div>
                <h3 class="heading-m">🏷️ قائمة الوسوم</h3>
                <p class="body-s text-muted tag-table__hint">اسحب الصفوف لترتيب ظهور الوسوم في المكتبة وفي قوائم التصفية. يُحفظ الترتيب تلقائياً.</p>
            </div>
            <a class="btn btn--primary" href="{{ route('admin.tags.create') }}">➕ إضافة وسم</a>
        </div>

        @if ($tags->isNotEmpty())
            <div class="tag-table__columns" aria-hidden="true">
                <span class="tag-table__col-grip" aria-hidden="true"></span>
                <span>الاسم</span>
                <span>الحالة</span>
                <span>اللون</span>
            </div>
        @endif

        <div class="tag-table__body tag-table__body--sortable" data-sortable>
            @forelse ($tags as $tag)
                <div class="tag-row" data-id="{{ $tag->id }}" draggable="true">
                    <span class="tag-row__grip" aria-hidden="true" title="سحب لإعادة الترتيب">⋮⋮</span>
                    <div class="tag-row__info">
                        <a class="tag-row__name link-plain" href="{{ route('admin.tags.edit', $tag) }}">{{ $tag->name }}</a>
                        <x-new-badge :show="$tag->show_new_badge" class="new-badge--admin-row" />
                        <span class="tag-row__sep" aria-hidden="true">·</span>
                        <span class="tag-row__slug">/{{ $tag->slug }}</span>
                    </div>
                    <div class="tag-row__status">
                        <span class="badge badge--{{ $tag->is_visible ? 'seafoam' : 'primary' }}">
                            {{ $tag->is_visible ? 'ظاهر' : 'مخفي' }}
                        </span>
                    </div>
                    <div class="tag-row__color">
                        @if ($tag->color)
                            <div class="color-chip color-chip--compact">
                                <span class="color-chip__swatch" style="background-color: {{ $tag->color }}"></span>
                                <span class="color-chip__value">{{ strtoupper($tag->color) }}</span>
                            </div>
                        @else
                            <span class="tag-row__dash">—</span>
                        @endif
                    </div>
                </div>
            @empty
                <p class="tag-table__empty">📭 لا توجد وسوم حالياً.</p>
            @endforelse
        </div>
    </div>
@endsection