{% extends 'layout.html' %}
{% from 'macros.html' import common_styles %}
{% block title %}Fournisseurs{% endblock %}
{% block page_title %}Fournisseurs{% endblock %}
{% block styles %}{{ common_styles() }}{% endblock %}

{% block content %}
<div class="container-fluid">
  <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:#fff7ed;color:#ea580c;font-size:1.1rem">
        <i class="fas fa-truck"></i>
      </div>
      <div>
        <h5 class="fw-bold mb-0">Fournisseurs</h5>
        <div class="text-muted small">{{ fournisseurs|length }} fournisseur(s)</div>
      </div>
    </div>
    {% if permissions.can_add %}
    <a href="{{ url_for('ajouter_fournisseur') }}" class="btn btn-primary btn-sm px-3">
      <i class="fas fa-plus me-2"></i>Ajouter
    </a>
    {% endif %}
  </div>

  <!-- Filtres -->
  <div class="card border-0 shadow-sm mb-4" style="border-radius:12px">
    <div class="card-body px-4 py-3">
      <form method="GET" action="{{ url_for('liste_fournisseurs') }}" class="row g-2 align-items-end">
        <div class="col-md-4 col-sm-6">
          <label class="form-label">Nom</label>
          <input type="text" class="form-control form-control-sm" name="designation" value="{{ filtres.designation }}" placeholder="Nom du fournisseur…">
        </div>
        <div class="col-md-4 col-sm-6">
          <label class="form-label">Adresse</label>
          <input type="text" class="form-control form-control-sm" name="adresse" value="{{ filtres.adresse }}" placeholder="Ville, adresse…">
        </div>
        <div class="col-md-4 col-sm-6 d-flex gap-2">
          <button type="submit" class="btn btn-primary btn-sm flex-fill"><i class="fas fa-search"></i></button>
          <a href="{{ url_for('liste_fournisseurs') }}" class="btn btn-outline-secondary btn-sm flex-fill"><i class="fas fa-undo"></i></a>
        </div>
      </form>
    </div>
  </div>

  <!-- Grille cartes fournisseurs -->
  {% if fournisseurs %}
  <div class="row g-3">
    {% for f in fournisseurs %}
    <div class="col-xl-3 col-lg-4 col-md-6">
      <div class="card border-0 shadow-sm h-100" style="border-radius:12px;transition:transform .2s,box-shadow .2s"
           onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,.1)'"
           onmouseout="this.style.transform='';this.style.boxShadow=''">
        <div class="card-body p-4">
          <div class="d-flex align-items-center gap-3 mb-3">
            <div class="rounded-3 d-flex align-items-center justify-content-center fw-bold text-white"
                 style="width:42px;height:42px;background:linear-gradient(135deg,#ea580c,#f97316);font-size:1.1rem;flex-shrink:0">
              {{ f.designation[0]|upper }}
            </div>
            <div style="min-width:0">
              <div class="fw-bold text-truncate" title="{{ f.designation }}">{{ f.designation }}</div>
              <div class="text-muted small text-truncate">{{ f.adresse or 'Adresse non renseignée' }}</div>
            </div>
          </div>
          <div class="d-flex flex-column gap-1 mb-3">
            {% if f.tel %}
            <div class="small text-muted"><i class="fas fa-phone me-2 text-primary" style="width:14px"></i>{{ f.tel }}</div>
            {% endif %}
            {% if f.email %}
            <div class="small text-muted text-truncate"><i class="fas fa-envelope me-2 text-primary" style="width:14px"></i>{{ f.email }}</div>
            {% endif %}
          </div>
          <div class="d-flex gap-1 pt-2" style="border-top:1px solid #f1f5f9">
            <a href="{{ url_for('voir_fournisseur', id=f.id) }}"
               style="background:#eff6ff;color:#2563eb;border:none;border-radius:6px;padding:5px 10px;font-size:.75rem" class="btn btn-xs flex-fill text-center">
              <i class="fas fa-eye me-1"></i>Voir
            </a>
            {% if permissions.can_delete %}
            <a href="{{ url_for('supprimer_fournisseur', id=f.id) }}"
               style="background:#fde8e6;color:#b91c1c;border:none;border-radius:6px;padding:5px 10px;font-size:.75rem" class="btn btn-xs"
               onclick="return confirm('Supprimer ce fournisseur ?')" title="Supprimer">
              <i class="fas fa-trash"></i>
            </a>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="card border-0 shadow-sm" style="border-radius:12px">
    <div class="card-body text-center py-5 text-muted">
      <i class="fas fa-truck fa-2x mb-2 d-block opacity-25"></i>Aucun fournisseur trouvé
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}