{# ═══════════════════════════════════════════════════════════
   macros.html  –  Composants réutilisables GMAO BIOGALENIC
   ═══════════════════════════════════════════════════════════ #}

{# ── En-tête de page ── #}
{% macro page_header(title, icon, btn_label=None, btn_url=None, btn_icon='fa-plus') %}
<div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
    <div class="d-flex align-items-center gap-3">
        <div class="rounded-3 d-flex align-items-center justify-content-center"
             style="width:44px;height:44px;background:#eff6ff;color:#2563eb;font-size:1.1rem;flex-shrink:0">
            <i class="fas {{ icon }}"></i>
        </div>
        <div>
            <h5 class="fw-bold mb-0 text-dark">{{ title }}</h5>
        </div>
    </div>
    {% if btn_label and btn_url %}
    <a href="{{ btn_url }}" class="btn btn-primary btn-sm px-3">
        <i class="fas {{ btn_icon }} me-2"></i>{{ btn_label }}
    </a>
    {% endif %}
</div>
{% endmacro %}

{# ── Carte filtre ── #}
{% macro filter_card(action_url) %}
<div class="card border-0 shadow-sm mb-4" style="border-radius:12px">
    <div class="card-header bg-white px-4 py-3 d-flex justify-content-between align-items-center"
         style="border-radius:12px 12px 0 0;border-bottom:1px solid #f1f5f9">
        <span class="fw-semibold text-muted small text-uppercase" style="letter-spacing:.5px">
            <i class="fas fa-filter me-2 text-primary"></i>Filtres
        </span>
        <a href="{{ action_url }}" class="btn btn-sm btn-outline-secondary py-0 px-2" style="font-size:.75rem">
            <i class="fas fa-undo me-1"></i>Réinitialiser
        </a>
    </div>
    <div class="card-body px-4 py-3">
        {{ caller() }}
    </div>
</div>
{% endmacro %}

{# ── Carte tableau ── #}
{% macro table_card(title, icon, count=None) %}
<div class="card border-0 shadow-sm" style="border-radius:12px">
    <div class="card-header bg-white px-4 py-3 d-flex justify-content-between align-items-center"
         style="border-radius:12px 12px 0 0;border-bottom:1px solid #f1f5f9">
        <span class="fw-semibold text-dark">
            <i class="fas {{ icon }} me-2 text-primary"></i>{{ title }}
            {% if count is not none %}
            <span class="badge bg-primary ms-1" style="font-size:.72rem">{{ count }}</span>
            {% endif %}
        </span>
        {{ caller() }}
    </div>
    <div class="card-body p-0">
        {{ caller() }}
    </div>
</div>
{% endmacro %}

{# ── Badge urgence ── #}
{% macro badge_urgence(degre) %}
{% if degre == 'Trés urgent' %}
    <span class="badge" style="background:#fde8e6;color:#b91c1c;font-size:.72rem">🔴 Très urgent</span>
{% elif degre == 'Urgent' %}
    <span class="badge" style="background:#fef3c7;color:#92400e;font-size:.72rem">🟡 Urgent</span>
{% else %}
    <span class="badge" style="background:#dce8ff;color:#1d4ed8;font-size:.72rem">🔵 Normal</span>
{% endif %}
{% endmacro %}

{# ── Badge état intervention ── #}
{% macro badge_etat(est_traiter, annuler) %}
{% if annuler == 'oui' %}
    <span class="badge" style="background:#f1f5f9;color:#64748b;font-size:.72rem">⛔ Annulée</span>
{% elif est_traiter == 'oui' %}
    <span class="badge" style="background:#d1fae5;color:#065f46;font-size:.72rem">✅ Traitée</span>
{% else %}
    <span class="badge" style="background:#fef3c7;color:#92400e;font-size:.72rem">⏳ En cours</span>
{% endif %}
{% endmacro %}

{# ── Badge panne ── #}
{% macro badge_panne(panne) %}
{% if panne == 'totale' %}
    <span class="badge" style="background:#fde8e6;color:#b91c1c;font-size:.72rem">Totale</span>
{% else %}
    <span class="badge" style="background:#fef3c7;color:#92400e;font-size:.72rem">Partielle</span>
{% endif %}
{% endmacro %}

{# ── Badge stock ── #}
{% macro badge_stock(stock, stock_alerte) %}
{% if stock_alerte and stock_alerte > 0 and stock <= stock_alerte %}
    <span class="fw-bold text-danger">{{ stock }}</span>
    <span class="badge ms-1" style="background:#fde8e6;color:#b91c1c;font-size:.65rem">Alerte</span>
{% else %}
    <span class="fw-semibold text-success">{{ stock }}</span>
{% endif %}
{% endmacro %}

{# ── Boutons actions tableau ── #}
{% macro action_btns(voir_url, modifier_url=None, supprimer_url=None, extra=None) %}
<div class="d-flex gap-1">
    <a href="{{ voir_url }}" class="btn btn-xs" title="Voir"
       style="background:#eff6ff;color:#2563eb;border:none;border-radius:6px;padding:4px 8px;font-size:.75rem">
        <i class="fas fa-eye"></i>
    </a>
    {% if modifier_url %}
    <a href="{{ modifier_url }}" class="btn btn-xs" title="Modifier"
       style="background:#f0fdf4;color:#16a34a;border:none;border-radius:6px;padding:4px 8px;font-size:.75rem">
        <i class="fas fa-edit"></i>
    </a>
    {% endif %}
    {% if extra %}{{ extra }}{% endif %}
    {% if supprimer_url %}
    <a href="{{ supprimer_url }}" class="btn btn-xs" title="Supprimer"
       style="background:#fde8e6;color:#b91c1c;border:none;border-radius:6px;padding:4px 8px;font-size:.75rem"
       onclick="return confirm('Confirmer la suppression ?')">
        <i class="fas fa-trash"></i>
    </a>
    {% endif %}
</div>
{% endmacro %}

{# ── Info row (détail) ── #}
{% macro info_row(label, value, icon=None) %}
<div class="d-flex align-items-start py-2" style="border-bottom:1px solid #f1f5f9">
    <div class="text-muted small fw-semibold" style="min-width:180px">
        {% if icon %}<i class="fas {{ icon }} me-2 text-primary" style="width:14px"></i>{% endif %}
        {{ label }}
    </div>
    <div class="fw-semibold text-dark small">{{ value if value else '—' }}</div>
</div>
{% endmacro %}

{# ── CSS commun injecté une fois ── #}
{% macro common_styles() %}
<style>
.page-card { border:none; border-radius:14px; }
.page-card .card-header { background:#fff; border-bottom:1px solid #f1f5f9; border-radius:14px 14px 0 0; padding:14px 20px; }
.gtable th { font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; color:#94a3b8; font-weight:600; border:none; padding:10px 14px; background:#f8fafc; }
.gtable td { font-size:.85rem; padding:11px 14px; vertical-align:middle; border-color:#f1f5f9; }
.gtable tbody tr:hover { background:#f8fafc; }
.gtable tbody tr { transition:background .15s; }
.form-label { font-size:.82rem; font-weight:600; color:#475569; margin-bottom:4px; }
.form-control, .form-select { font-size:.88rem; border-color:#e2e8f0; border-radius:8px; }
.form-control:focus, .form-select:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.section-hdr { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:#94a3b8; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.section-hdr::after { content:''; flex:1; height:1px; background:#e2e8f0; }
.back-btn { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:#64748b; text-decoration:none; padding:6px 12px; border-radius:8px; border:1px solid #e2e8f0; background:#fff; transition:all .2s; }
.back-btn:hover { background:#f8fafc; color:#2563eb; border-color:#2563eb; text-decoration:none; }
.empty-row td { text-align:center; padding:40px; color:#94a3b8; }
</style>
{% endmacro %}