{% extends 'base.html.twig' %}

{% block title %}BL en attente - Mercuriale.io{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/admin.css') }}">
{% endblock %}

{% block body %}
<div class="min-h-screen bg-gradient-to-br from-cream to-cream-dark py-6 px-4"
     data-controller="pending-bl">
    <div class="max-w-3xl mx-auto">
        {# Header #}
        <div class="flex items-center justify-between mb-6">
            <div>
                <h1 class="text-2xl font-bold text-navy">
                    <i class="fas fa-cloud-upload-alt mr-2"></i>
                    BL en attente de synchronisation
                </h1>
                <p class="text-gray-500 mt-1">
                    <span data-pending-bl-target="count">0</span> bon(s) de livraison en attente
                </p>
            </div>
            <a href="{{ path('admin') }}" class="text-gray-500 hover:text-navy">
                <i class="fas fa-arrow-left mr-1"></i> Retour
            </a>
        </div>

        {# Statut réseau #}
        <div data-pending-bl-target="networkStatus" class="mb-6">
            {# Rempli dynamiquement par JS #}
        </div>

        {# Quota de stockage #}
        <div data-pending-bl-target="storageQuota" class="mb-6">
            {# Rempli dynamiquement par JS #}
        </div>

        {# Liste vide #}
        <div data-pending-bl-target="emptyState" class="hidden bg-white rounded-2xl shadow-lg p-12 text-center">
            <div class="w-20 h-20 mx-auto mb-6 bg-green-100 rounded-full flex items-center justify-center">
                <i class="fas fa-check text-3xl text-green-600"></i>
            </div>
            <h3 class="text-xl font-semibold text-navy mb-2">Tout est synchronisé !</h3>
            <p class="text-gray-500 mb-6">Aucun bon de livraison en attente d'envoi.</p>
            <a href="{{ path('app_bl_upload') }}"
               class="btn btn--secondary">
                <i class="fas fa-camera"></i>
                Scanner un nouveau BL
            </a>
        </div>

        {# Liste des BL #}
        <div data-pending-bl-target="list" class="space-y-4">
            {# Rempli dynamiquement par JS #}
        </div>

        {# Actions globales #}
        <div data-pending-bl-target="actions" class="hidden mt-6 flex gap-4">
            <button type="button"
                    data-action="pending-bl#syncAll"
                    class="btn btn--primary flex-1">
                <i class="fas fa-sync"></i>
                Synchroniser maintenant
            </button>
            <button type="button"
                    data-action="pending-bl#deleteAll"
                    class="btn btn--ghost">
                <i class="fas fa-trash-alt"></i>
                Tout supprimer
            </button>
        </div>
    </div>
</div>
{% endblock %}