{% extends '@App/partials/base.html.twig' %}

{% block content %}
<div class="body-wrapper">
  <div class="container-fluid mt-5">
    <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
      <div>
        <h2 class="mb-1 fw-bold">Sollicitations</h2>
        <p class="text-muted mb-0">Gérez et suivez vos sollicitations de partenariat</p>
      </div>
      <div class="d-flex gap-2">
        <a class="btn btn-outline-secondary" href="{{ path('projet_view_sollicitation', { id: projet.idtoken, q: filters.q, status: filters.status, deadline: filters.deadline, export: 'csv' }) }}">
          <i class="ti ti-download me-1"></i>Exporter
        </a>
        <a class="btn btn-primary" href="{{ path('projet_sollicitation_modal_step1', { idtoken: projet.idtoken }) }}" data-turbo-frame="modal-frame">
          <i class="ti ti-plus me-1"></i>Créer une demande
        </a>
      </div>
    </div>

    <div class="row g-3 mb-4">
      <div class="col-lg-4">
        <div class="card border rounded-4 h-100">
          <div class="card-body d-flex align-items-center justify-content-between">
            <div>
              <p class="text-muted mb-1">Demandes actives</p>
              <h1 class="mb-0 lh-1">{{ kpi.active }}</h1>
            </div>
            <div class="bg-primary-subtle rounded-3 d-flex align-items-center justify-content-center" style="width:56px;height:56px;">
              <i class="ti ti-send text-primary fs-6"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="card border rounded-4 h-100">
          <div class="card-body d-flex align-items-center justify-content-between">
            <div>
              <p class="text-muted mb-1">En retard</p>
              <h1 class="mb-0 lh-1">{{ kpi.overdue }}</h1>
            </div>
            <div class="bg-danger-subtle rounded-3 d-flex align-items-center justify-content-center" style="width:56px;height:56px;">
              <i class="ti ti-clock text-danger fs-6"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="card border rounded-4 h-100">
          <div class="card-body d-flex align-items-center justify-content-between">
            <div>
              <p class="text-muted mb-1">Partenaires en attente</p>
              <h1 class="mb-0 lh-1">{{ kpi.pendingPartners }}</h1>
            </div>
            <div class="bg-warning-subtle rounded-3 d-flex align-items-center justify-content-center" style="width:56px;height:56px;">
              <i class="ti ti-users text-warning fs-6"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <turbo-frame id="sollicitation-index-frame"
                 src="{{ path('projet_view_sollicitation_frame', { id: projet.idtoken, q: filters.q, status: filters.status, deadline: filters.deadline, page: pagination.page }) }}">
      {% include '@Projet/projet/sollicitation/_index_frame_content.html.twig' %}
    </turbo-frame>
  </div>
</div>
{% endblock %}