{% set frame_prefix = 'convention-' ~ convention.idtoken %}
{% set id_prefix = frame_prefix ~ '-' %}

<div class="row">
  <div class="col-lg-12">
    <h5>Résumé des apports de mécénat</h5>

    <div class="card bg-light">
      <div class="card-body">
        <turbo-frame id="{{ frame_prefix }}-resume" src="{{ path('projet_view_convention_turbo_resume', { id: convention.projet.idtoken, conventionId: convention.idtoken, frame: frame_prefix ~ '-resume', prefix: id_prefix }) }}" loading="lazy" data-prefetch-frame>
          Chargement du résumé...
        </turbo-frame>
      </div>
    </div>

    <div class="card border mt-4">
      <div class="card-header d-flex align-items-center justify-content-between py-3">
        <h5 class="mb-0 d-flex align-items-center text-uppercase">
          <iconify-icon icon="solar:file-text-outline" class="me-2 text-muted"></iconify-icon>
          Convention & formule
        </h5>
        <span class="badge bg-success-subtle text-success fs-3 px-3 py-2">
          {{ convention.document ? convention.document.statut : convention.statut }}
        </span>
      </div>
      <div class="card-body">
        <div class="d-flex flex-wrap gap-2 justify-content-end mb-3">
          {% if (convention.document is null or convention.document.statut == 'Créée') and permissionAccess.can('PERSONNALISER_FORMULE') %}
            <a href="{{ path('projet_view_convention_turbo_personnalise_formule', { id: convention.projet.idtoken, conventionId: convention.idtoken, frame: frame_prefix }) }}"
               class="btn btn-rounded btn-outline-primary btn-sm"
               data-turbo-frame="modal-frame">
              <i class="ti ti-wand fs-4 me-2"></i>
              Personnaliser cette formule
            </a>
          {% endif %}

          {% if convention.document is null and permissionAccess.can('EDITER_CONVENTION') %}
            <a href="{{ path('projet_view_convention_turbo_edit', { id: convention.projet.idtoken, conventionId: convention.idtoken }) }}"
               class="btn btn-rounded btn-outline-primary btn-sm"
               data-turbo-frame="modal-frame">
              <i class="ti ti-edit fs-4 me-2"></i>
              Éditer une convention
            </a>
          {% endif %}
        </div>

        <div class="bg-light-subtle rounded-3 p-3 mb-4">
          <turbo-frame id="{{ frame_prefix }}-formule-table" src="{{ path('projet_view_convention_table_formule', { id: convention.projet.idtoken, conventionId: convention.idtoken, frame: frame_prefix ~ '-formule-table' }) }}" loading="lazy" data-prefetch-frame>
            Chargement de la formule...
          </turbo-frame>
        </div>

        {% if convention.document is not null %}
          <div class="bg-light-subtle rounded-3 p-3">
            <div class="d-flex align-items-center justify-content-between border rounded-3 p-3 bg-white">
              <div class="d-flex align-items-center">
                <div class="bg-danger-subtle text-danger rounded-3 d-flex align-items-center justify-content-center me-3" style="width: 52px; height: 52px;">
                  <iconify-icon icon="solar:file-text-linear" class="fs-7"></iconify-icon>
                </div>
                <div>
                  <div class="fw-semibold fs-6">{{ convention.document.nom }}</div>
                  <div class="text-muted">Créé le {{ convention.document.createdAt | date('d/m/Y à H:i') }}</div>
                </div>
              </div>
              <div class="d-flex align-items-center gap-2">
                <span class="badge bg-primary-subtle text-primary">{{ convention.document.statut }}</span>
                {% if convention.document.statut == 'Créée' or convention.document.statut == 'Éditée' %}
                  {% if permissionAccess.can('EDITER_CONVENTION') %}
                    <a href="{{path('projet_view_convention_document', {'id': convention.projet.idtoken, 'conventionid': convention.idtoken})}}" class="btn mb-0 bg-success-subtle rounded-circle round-30 btn-sm d-inline-flex align-items-center justify-content-center">
                      <iconify-icon icon="solar:pen-new-square-linear" class="fs-5"></iconify-icon>
                    </a>
                  {% endif %}
                  {% if permissionAccess.can('SUPPRIMER_CONVENTION') %}
                    <button type="button" data-id="{{convention.idtoken}}" data-type="document" class="delete btn mb-0 bg-danger-subtle rounded-circle round-30 btn-sm d-inline-flex align-items-center justify-content-center">
                      <iconify-icon icon="solar:trash-bin-trash-broken" class="fs-5"></iconify-icon>
                    </button>
                  {% endif %}
                {% elseif convention.document.statut == 'En attente de signature' %}
                  <a href="{{path('projet_view_convention_signature', {'id': convention.projet.idtoken, 'conventionid': convention.idtoken})}}" class="btn mb-0 bg-info-subtle rounded-circle round-30 btn-sm d-inline-flex align-items-center justify-content-center">
                    <iconify-icon icon="solar:document-add-broken" class="fs-5"></iconify-icon>
                  </a>
                {% else %}
                  <a href="{{path('projet_view_convention_document', {'id': convention.projet.idtoken, 'conventionid': convention.idtoken})}}" class="btn mb-0 bg-success-subtle rounded-circle round-30 btn-sm d-inline-flex align-items-center justify-content-center">
                    <iconify-icon icon="solar:eye-broken" class="fs-5"></iconify-icon>
                  </a>
                {% endif %}
              </div>
            </div>
          </div>
        {% else %}
          <div class="alert alert-warning text-warning mb-0" role="alert">
            <i class="ti ti-info-circle fs-4 me-2"></i> Aucune convention n'a pas été créée
          </div>
        {% endif %}
      </div>
    </div>

    <div class="card border mt-4">
      <div class="card-header d-flex align-items-center justify-content-between py-3">
        <h5 class="mb-0 d-flex align-items-center text-uppercase">
          <iconify-icon icon="solar:wallet-money-linear" class="me-2 text-muted"></iconify-icon>
          Apports & paiements
        </h5>
        <div>
          {% if convention.recu is null and permissionAccess.can('CREER_APPORT') %}
            <a href="{{ path('convention_ajax_add_apport', { id: convention.idtoken, frame: frame_prefix }) }}"
               class="btn btn-rounded btn-success btn-sm"
               data-turbo-frame="modal-frame">
              <i class="ti ti-plus fs-4 me-2"></i>
              Ajouter un apport
            </a>
          {% endif %}
        </div>
      </div>
      <div class="card-body">
        <div class="bg-light-subtle rounded-3 p-3">
          <turbo-frame id="{{ frame_prefix }}-apports-table" src="{{ path('projet_view_convention_table_apports', { id: convention.projet.idtoken, conventionId: convention.idtoken, frame: frame_prefix ~ '-apports-table' }) }}" loading="lazy" data-prefetch-frame>
            Chargement des apports...
          </turbo-frame>
        </div>
      </div>
    </div>

    <div class="card border mt-4">
      <div class="card-header d-flex align-items-center justify-content-between py-3">
        <h5 class="mb-0 d-flex align-items-center text-uppercase">
          <iconify-icon icon="solar:bill-list-linear" class="me-2 text-muted"></iconify-icon>
          Reçu fiscal
        </h5>
        <div>
          <turbo-frame id="recu-action-frame" src="{{ path('convention_ajax_recu_action', { id: convention.idtoken }) }}">
            {% include '@Projet/convention/ajax/_recu_action_link.html.twig' with { convention: convention } %}
          </turbo-frame>
        </div>
      </div>
      <div class="card-body">
        {% if convention.recu is not null %}
          <div class="table-responsive mb-0 border rounded-3">
            <table class="table text-nowrap mb-0 align-middle">
              <thead class="text-dark fs-4">
                <tr>
                  <th><h6 class="fs-4 fw-semibold mb-0">Document</h6></th>
                  <th><h6 class="fs-4 fw-semibold mb-0">Statut</h6></th>
                  <th><h6 class="fs-4 fw-semibold mb-0">Créé le</h6></th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{{ convention.recu.nom }}</td>
                  <td><span class="badge bg-primary-subtle text-primary">{{ convention.recu.statut }}</span></td>
                  <td>{{ convention.recu.createdAt | date('d/m/Y H:i') }}</td>
                  <td class="text-end">
                    {% if convention.recu.statut == 'Créée' or convention.recu.statut == 'Édité' %}
                      {% if permissionAccess.can('ENVOYER_RECU') %}
                        <a href="{{ path('projet_view_convention_document', {'id': convention.projet.idtoken, 'conventionid': convention.idtoken}) }}" class="btn mb-1 bg-success-subtle rounded-circle round-30 btn-sm d-inline-flex align-items-center justify-content-center">
                          <iconify-icon icon="solar:pen-new-square-linear" class="fs-5"></iconify-icon>
                        </a>
                      {% endif %}
                      {% if permissionAccess.can('SUPPRIMER_RECU') %}
                        <button type="button" data-id="{{ convention.idtoken }}" data-type="recu" class="delete btn mb-1 bg-danger-subtle rounded-circle round-30 btn-sm d-inline-flex align-items-center justify-content-center">
                          <iconify-icon icon="solar:trash-bin-trash-broken" class="fs-5"></iconify-icon>
                        </button>
                      {% endif %}
                    {% else %}
                      <a href="{{ path('projet_view_convention_recu', {'id': convention.projet.idtoken, 'conventionid': convention.idtoken}) }}" class="btn mb-1 bg-success-subtle rounded-circle round-30 btn-sm d-inline-flex align-items-center justify-content-center">
                        <iconify-icon icon="solar:eye-broken" class="fs-5"></iconify-icon>
                      </a>
                    {% endif %}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        {% else %}
          <div class="alert alert-warning text-warning mb-0" role="alert">
            <i class="ti ti-info-circle fs-4 me-2"></i> Aucun reçu fiscal n'a pas été créé
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>