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

{% block title %}{{ titlePage }}{% endblock %}

{% block body %}

<div class="budget-wrap">

    <div class="budget-header">
        <p class="budget-label">Budget</p>
        <div class="budget-total">
            <span class="budget-amount">{{ total|number_format(2, ',', ' ') }}</span>
            <span class="budget-currency">€</span>
        </div>
    </div>

    <a href="{{ path('app_article_new') }}" class="btn-add" title="Ajouter un article" aria-label="Ajouter un article">
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
        </svg>
    </a>

    {% if articles is empty %}
        <div class="budget-empty">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/>
                <path d="M16 10a4 4 0 01-8 0"/>
            </svg>
            <p>Aucun article pour l'instant.<br>Appuyez sur <strong>+</strong> pour commencer.</p>
        </div>
    {% else %}
        <div class="budget-table-card">
            <div class="budget-table-head">
                <span>Nom</span>
                <span>Qté</span>
                <span>Prix</span>
                <span>Obs</span>
                <span>Actions</span>
            </div>

            {% for article in articles %}
            <div class="budget-row">
                <span class="col-name">{{ article.nom|capitalize }}</span>
                <span class="col-qty">{{ article.qte }}</span>
                <span class="col-price">
                    <span class="price-badge">{{ article.prix|number_format(2, ',', ' ') }} €</span>
                </span>
                <span class="col-obs">{{ article.obs ?: '—' }}</span>
                <div class="col-actions">
                    <a href="{{ path('app_article_edit', {'id': article.id}) }}" class="btn-edit">
                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
                            <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
                        </svg>
                        Modifier
                    </a>
                    <form method="post" action="{{ path('app_article_delete', {'id': article.id}) }}"
                          onsubmit="return confirm('Supprimer cet article ?');">
                        <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ article.id) }}">
                        <button type="submit" class="btn-del" title="Supprimer" aria-label="Supprimer">
                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none"
                                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <polyline points="3 6 5 6 21 6"/>
                                <path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/>
                                <path d="M10 11v6"/><path d="M14 11v6"/>
                                <path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/>
                            </svg>
                        </button>
                    </form>
                </div>
            </div>
            {% endfor %}

            <div class="budget-footer">
                <span>Total</span>
                <span class="footer-total">{{ total|number_format(2, ',', ' ') }} €</span>
            </div>
        </div>
    {% endif %}

</div>

{% endblock %}