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

{% block title %}{{ article.nom|capitalize }}{% endblock %}

{% block body %}
<div class="form-wrap">

    <div class="form-page-header">
        <a href="{{ path('app_article_index') }}" class="btn-back">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>
            </svg>
            Retour
        </a>
        <h2 class="form-page-title">{{ article.nom|capitalize }}</h2>
    </div>

    <div class="form-card">
        <div class="show-grid">
            <div class="show-field">
                <span class="show-label">Nom</span>
                <span class="show-value">{{ article.nom|capitalize }}</span>
            </div>
            <div class="show-field">
                <span class="show-label">Quantité</span>
                <span class="show-value">{{ article.qte }}</span>
            </div>
            <div class="show-field">
                <span class="show-label">Prix</span>
                <span class="show-value">
                    <span class="price-badge">{{ article.prix|number_format(2, ',', ' ') }} €</span>
                </span>
            </div>
            <div class="show-field">
                <span class="show-label">Observation</span>
                <span class="show-value show-obs">{{ article.obs ?: '—' }}</span>
            </div>
        </div>

        <div class="show-actions">
            <a href="{{ path('app_article_edit', {'id': article.id}) }}" class="btn-edit">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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>
            {{ include('article/_delete_form.html.twig') }}
        </div>
    </div>

</div>
{% endblock %}