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

{% block script %}
  {{ parent() }}
  <script src="{{ asset('assets/libs/tinymce/tinymce.min.js') }}"></script>
{% endblock %}

{% block styles %}
  {{ parent() }}
  <link rel="stylesheet" href="{{ asset('assets/css/signature.css') }}">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Allura&family=Caveat:wght@400..700&family=Dancing+Script:wght@400..700&family=Great+Vibes&family:Pacifico&family=Satisfy&display=swap" rel="stylesheet">
{% endblock %}

{% block content %}
      <div class="body-wrapper">
        
        <div class="container-fluid">
          <img src="{{ asset('assets/images/app-logo.svg') }}" class="dark-logo img-50" alt="Logo-Dark" />
          <div class="card card-body py-3 mt-4">
            <div class="row align-items-center">
              <div class="col-12">
                <div class="d-sm-flex align-items-center justify-space-between">
                  <h5>Signature de votre convention avec {{convention.societe.nom}}</h5>
                </div>
              </div>
            </div>
          </div>
          <div class="card">
            
            <div class="row">
              <div class="col-8 ">
                <div class="card-body">
                  <div class="d-sm-flex align-items-center justify-space-between">
                    <nav aria-label="breadcrumb" class="ms-auto">
                      {% if convention.document.statutMecene == 'Envoyée' %}
                      <a
                        class="btn btn-rounded btn-danger mb-2"
                        href="{{ path('public_projet_view_convention_signature_modal', { id: convention.projet.idtoken, conventionid: convention.idtoken, public: 1, userId: user.idtoken }) }}"
                        data-turbo-frame="modal-frame"
                      >
                        <i class="ti ti-writing-sign fs-4 me-2"></i>
                        Signer la convention
                      </a>
                      {% endif %}
                    </nav>
                  </div>
                  <embed src="{{ path( 'secure_public_pdf_convention', {'id':  convention.document.idtoken }) }}" type="application/pdf" width="100%" height="600px" />
                </div>
            </div>
            
            <div class="col-4 py-2 px-3">

              <div class="d-flex flex-row comment-row border-bottom p-3 gap-3">
                <div class="comment-text w-100">
                  <div class="comment-footer mt-2">
                    <div class="d-flex align-items-center" id="titre-container">
                      <h5 id="titre-texte">{{convention.document.nom}}</h5>
                      
                    </div>
                  </div>
                </div>
              </div>

              <div class="comment-footer mt-2">
                <div class="d-flex flex-row comment-row border-bottom p-3 gap-3">
                  <div class="comment-text w-100">
                    <h6 class="fw-medium">Créé le</h6>
                    <p class="mb-1 fs-4 text-muted">
                      {{convention.document.createdAt | date('d/m/Y à H:i')}}
                    </p>
                    <h6 class="fw-medium">Auteur</h6>
                    <p class="mb-1 fs-4 text-muted">
                      {{convention.document.createdBy.prenom}} {{convention.document.createdBy.nom}}
                    </p>
                    <h6 class="fw-medium">Statut</h6>
                    <span class="badge bg-primary-subtle text-primary ">{{convention.document.statut}}</span>
                          
                  </div>
                </div>
              </div>

              <div class="comment-footer mt-2">
                <div class="flex-row comment-row border-bottom p-3 gap-3">

                  <h6>Signataires de la convention</h6><br/>

                    <div class="d-flex align-items-center mb-3 pb-3 border-bottom gap-6">
                      {% if convention.projet.societe.contact.image is null %}
                          {% set initials = convention.projet.societe.contact.prenom|slice(0, 1)|upper ~ convention.projet.societe.contact.nom|slice(0, 1)|upper %}
                          <a href="" class="text-bg-primary text-white fs-6 round-40 rounded-circle me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                            {{initials}}
                          </a>
                      {% else %}
                          <img src="{{asset('uploads/profiles/user/' ~ convention.projet.societe.contact.image )}}" alt="matdash-img" class="img-fluid rounded-circle" width="30" height="30" id="imgProfilApp">
                      {% endif %}
                      <div>
                        <div class="d-flex align-items-center justify-space-between">
                          <div>
                            <h5 class="mb-0 fs-12">{{convention.projet.societe.contact.prenom}} {{convention.projet.societe.contact.nom}}
                            </h5>
                            <p class="mb-0 text-dark">
                              {{convention.projet.societe.contact.email}}
                            </p>
                            <p class="mb-0 fs-2 text-dark opacity-75">
                              Organisateur
                            </p>
                        </div>
                        <div>
                          <span class="badge {% if convention.document.statutOrga == 'Signée' %}bg-success-subtle text-success{% else %}bg-primary-subtle text-primary{% endif %}  ms-4">{{convention.document.statutOrga}}</span>
                        </div>
                        </div>
                        
                      </div>
                    </div>

                    <div class="d-flex align-items-center mb-3 pb-3 gap-6">
                      {% if convention.mecene.contact.image is null %}
                          {% set initials = convention.mecene.contact.prenom|slice(0, 1)|upper ~ convention.mecene.contact.nom|slice(0, 1)|upper %}
                          <a href="" class="text-bg-primary text-white fs-6 round-40 rounded-circle me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                            {{initials}}
                          </a>
                      {% else %}
                          <img src="{{asset('uploads/profiles/user/' ~ convention.mecene.contact.image )}}" alt="matdash-img" class="img-fluid rounded-circle" width="30" height="30" id="imgProfilApp">
                      {% endif %}
                      <div>
                        <div class="d-flex align-items-center justify-space-between">
                          <div>
                            <h5 class="mb-0 fs-12">{{convention.mecene.contact.prenom}} {{convention.mecene.contact.nom}}
                            </h5>
                            <p class="mb-0 text-dark">
                              {{convention.mecene.contact.email}}
                            </p>
                            <p class="mb-0 fs-2 text-dark opacity-75">
                              Mécène / Partenaire
                            </p>
                        </div>
                        <div>
                          <span class="badge {% if convention.document.statutMecene == 'Signée' %}bg-success-subtle text-success{% else %}bg-primary-subtle text-primary{% endif %}  ms-4">{{convention.document.statutMecene}}</span>
                        </div>
                        </div>
                        
                      </div>
                    </div>

                </div>
              </div>

          </div>
        </div>
      </div>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<style>
.slider-glow.validated {
  box-shadow: 0 0 12px 4px rgba(40, 167, 69, 0.6);
  border-radius: 5px;
  outline: none;
}
</style>

{% endblock %}