{% 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="d-sm-flex align-items-center justify-space-between mt-4">
      <h5>Formule</h5>
      <div class="ms-auto">
         {% if convention.document is null or convention.document.statut == 'Créée'  %}
          <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 mb-2"
             data-turbo-frame="modal-frame">
            <i class="ti ti-wand fs-4 me-2"></i>
            Personnaliser cette formule
          </a>
        {% endif %}
      </div>
    </div>

    <div class="row justify-content-center">
      <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>

    <div class="d-sm-flex align-items-center justify-space-between mt-4">
      <h5>Convention</h5>
      <div class="ms-auto">
        {% if convention.document is null %}
          <a href="{{ path('projet_view_convention_turbo_edit', { id: convention.projet.idtoken, conventionId: convention.idtoken }) }}"
             class="btn btn-rounded btn-outline-primary btn-sm mb-2"
             data-turbo-frame="modal-frame">
            <i class="ti ti-edit fs-4 me-2"></i>
            Éditer une convention
          </a>
        {% endif %}
      </div>
    </div>

    {% if convention.document is not null %}
        <div class="table-responsive mb-4 border rounded-1">

            <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ée le</h6>
                        </th>
                        <th>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            {{convention.document.nom}}
                        </td>
                        <td>
                            <span class="badge bg-primary-subtle text-primary">{{convention.document.statut}}</span>
                        </td>
                        <td>
                            {{convention.document.createdAt | date('d/m/Y H:i')}}
                        </td>
                          <td class="text-end">
                            {% if convention.document.statut == 'Créée' or convention.document.statut == 'Éditée' %}
                              <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>
                              <button type="button" data-id="{{convention.idtoken}}" data-type="document" 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>
                            {% 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-1 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-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" role="alert">
            <i class="ti ti-info-circle fs-4 me-2"></i> Aucune convention n'a pas été créée
        </div>
    {% endif %}

    <div class="d-sm-flex align-items-center justify-space-between mt-4">
      <h5>Apports</h5>
      <div class="ms-auto">
      {% if convention.recu is  null %}
        <a href="{{ path('convention_ajax_add_apport', { id: convention.idtoken, frame: frame_prefix }) }}"
           class="btn btn-rounded btn-outline-primary btn-sm mb-2"
           data-turbo-frame="modal-frame">
          <i class="ti ti-coins fs-4 me-2"></i>
          Ajouter un apport
        </a>
      {% endif %}
      </div>
    </div>

    <div class="row justify-content-center">
      <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 class="d-sm-flex align-items-center justify-space-between mt-4">
      <h5>Reçu fiscal</h5>
      <div class="ms-auto">

          <a href="{{ path('convention_ajax_edit_recu', { id: convention.idtoken }) }}"
             class="btn btn-rounded btn-outline-primary btn-sm mb-2"
             data-turbo-frame="recu-action-frame-{{ convention.idtoken }}"
             {% if convention.recu is null and convention.apports | length > 0 %} style="display:block;"{% else %}style="display:none;"{% endif %}>
            <i class="ti ti-edit fs-4 me-2"></i>
              Éditer un reçu fiscal
          </a>
          <turbo-frame id="recu-action-frame-{{ convention.idtoken }}"></turbo-frame>

      </div>
    </div>

    {% if convention.recu is not null %}
      <div class="table-responsive mb-4 border rounded-1">

          <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ée 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é' %}
                            <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>
                            <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>
                          {% elseif convention.recu.statut == 'En attente de signature' %}
                              <a href="{{path('projet_view_convention_signature', {'id': convention.projet.idtoken, 'conventionid': convention.idtoken})}}" class="btn mb-1 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_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" 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>