@extends('layouts.admin')

@section('title', 'ترتيب المقالات | Help Numo')
@section('page-title', 'ترتيب المقالات')

@section('admin_content')
    <div class="card">
        <div class="list-header">
            <div>
                <h2 class="heading-m">📋 ترتيب ظهور المقالات</h2>
                <p class="body-s text-muted mt-1">
                    اسحب الصفوف لتحديد ترتيب المقالات في المكتبة وفي قوائم الإدارة. القائمة الرئيسية للمقالات تبقى مع بحث وتصفية كما هي.
                </p>
            </div>
            <div class="list-header__actions">
                <a class="btn btn--secondary" href="{{ route('admin.articles.index') }}">← العودة للقائمة</a>
            </div>
        </div>

        @if ($articles->isEmpty())
            <p class="body-s text-muted">📭 لا توجد مقالات لترتيبها.</p>
        @else
            <div
                class="article-ordering-card"
                data-flat-reorder
                data-reorder-url="{{ route('admin.articles.reorder') }}"
            >
                <div class="article-ordering-card__hint body-s text-muted">
                    <span aria-hidden="true">⠿</span>
                    اسحب الصف باستخدام المقبض أو أي جزء من الصف؛ يُحفظ الترتيب تلقائياً.
                </div>
                <div class="article-ordering-list" data-sortable>
                    @foreach ($articles as $article)
                        <div class="article-ordering-row" data-id="{{ $article->id }}" draggable="true">
                            <span class="article-ordering-row__grip" aria-hidden="true" title="سحب">⋮⋮</span>
                            <div class="article-ordering-row__main">
                                <span class="article-ordering-row__title">{{ $article->title }}</span>
                                <x-new-badge :show="$article->show_new_badge" class="new-badge--admin-row" />
                                <span class="article-ordering-row__sep" aria-hidden="true">·</span>
                                <span class="article-ordering-row__slug">/{{ $article->slug }}</span>
                                <span class="article-ordering-row__author body-s text-muted">
                                    {{ $article->authorDisplayNamePlain() }}@if ($article->authorIsInactive()) (مستخدم غير نشط)@endif
                                </span>
                            </div>
                            <span class="badge badge--{{ $article->status === 'published' ? 'seafoam' : 'primary' }}">
                                {{ $article->status === 'published' ? 'منشور' : 'مسودة' }}
                            </span>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
@endsection