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

{% block content %}

      <div class="body-wrapper">
        <div class="container-fluid">

          <div class="card card-body py-3">
            <div class="row align-items-center">
              <div class="col-12">
                <div class="d-sm-flex align-items-center justify-space-between">
                  <div>
                    <h4 class="mb-4 mb-sm-0 card-title">{{event.nom}} le {{event.date | date_fr}} à {{event.heure | date('H:i')}}</h4>
                  
                    <nav class="py-2" style="--bs-breadcrumb-divider: '&gt;'" aria-label="breadcrumb">
                      <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                          <a href="{{path('app_index')}}"><iconify-icon icon="solar:home-2-broken" class="fs-6"></iconify-icon></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            <a href="{{path('evenement_index')}}">Événements</a>
                        </li>
                      </ol>
                    </nav>
                  </div>

                  <nav aria-label="breadcrumb" class="ms-auto">
                    <ol class="breadcrumb">
                      <li class="breadcrumb-item d-flex align-items-center">
                        
                        <button id="btnGroupDrop1" type="button" class="btn btn-rounded btn-outline-primary" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <i class="ti ti-playstation-circle fs-4 me-2"></i>
                          Actions
                        </button>
                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
                          {% if not event.canceled %}
                            <a class="dropdown-item" href="{{ path('evenement_update_view', { id: event.idtoken }) }}" data-turbo-frame="modal-frame"><i class="ti ti-edit fs-4 me-2"></i>Modifier l'événement</a>
                            <a class="dropdown-item" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#cancelConfirmationModal"><i class="ti ti-circle-letter-x fs-4 me-2"></i>Annuler l'événement</a>
                          {% else %}
                            <a class="dropdown-item delete" href="javascript:void(0)" data-id="{{event.idtoken}}" data-type="evenement"><i class="ti ti-trash fs-4 me-2"></i>Supprimer l'événement</a>
                          {% endif %}
                        </div>

                      </li>
                    </ol>
                  </nav>
                  
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-8 d-flex align-items-stretch">
              <div class="card col-md-12">
                
                <div class="card-body text-center">
                  <img src="{{asset('uploads/event/' ~ event.image)}}" style="max-height: 350px; width:auto;" />
                </div>
              </div>
            </div>

            <div class="col-md-4 align-items-stretch">
              <turbo-frame id="evenement-details" src="{{ path('evenement_details_frame', { id: event.idtoken }) }}" loading="lazy" data-prefetch-frame>
                {% include '@Evenement/evenement/part/_details_frame.html.twig' with {
                  event: event,
                  wrap_frame: false
                } %}
              </turbo-frame>
            </div>

           <div class="col-md-12 d-flex align-items-stretch">
              <div class="card col-md-12">
                
                <div class="card-body">
                  <h5>Inscriptions</h5>

                  <turbo-frame id="evenement-inscriptions" src="{{ path('evenement_inscriptions_table', { id: event.idtoken }) }}" loading="lazy" data-prefetch-frame>
                    Chargement des inscriptions...
                  </turbo-frame>

                </div>
              </div>
            </div>
          

        </div>
      </div>


    </div>

{% endblock %}