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

{% block content %}
<style>
    .modal{--bs-modal-zindex:1075;}
    .modal-backdrop{--bs-backdrop-zindex:1070;}
    .portail-space-card{border:1px solid #e5e7eb;border-radius:18px;background:#fff;transition:.18s ease}
    .portail-space-card:hover{transform:translateY(-2px);border-color:#cbd5e1}
    .portail-space-hero{border-radius:22px;background:linear-gradient(135deg,#161b2f 0%,#1f2b48 100%);color:#fff}
    .portail-search-input{border-radius:14px;padding:.95rem 1rem .95rem 2.8rem;border:1px solid #dbe2ea}
    .portail-search-wrap{position:relative}
    .portail-search-wrap i{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:#94a3b8}
</style>


{% if showSelectModal %}
  <div class="modal" id="projetConnectModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="projetConnectModalLabel" aria-hidden="true" data-controller="portail-select-modal">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
      <div class="modal-content">
        <div class="modal-header border-0 pb-0 px-4 px-lg-5 pt-4">
          <div>
            <h4 class="modal-title fw-bold mb-1" id="projetConnectModalLabel">Choisissez votre espace partenaire</h4>
            <p class="text-muted mb-0">Accédez à vos projets et réseaux partenaires en un clic.</p>
          </div>
        </div>
        <div class="modal-body px-4 px-lg-5 pb-4">
          <div class="portail-space-hero p-4 p-lg-5 mb-4">
            <div class="row align-items-center g-4">
              <div class="col-lg-8">
                <h3 class="fw-bold text-white mb-2">Rejoignez un écosystème premium de partenaires engagés</h3>
                <p class="mb-0 text-white-50">Sélectionnez l’espace correspondant à votre projet ou à votre organisation pour retrouver vos conventions, vos échanges et vos opportunités.</p>
              </div>
              <div class="col-lg-4">
                <div class="row g-3 text-center">
                  <div class="col-6">
                    <div class="fs-2 fw-bold">{{ globalVariable.espaces|length }}</div>
                    <div class="small text-white-50">Espaces accessibles</div>
                  </div>
                  <div class="col-6">
                    {% set societesCount = [] %}
                    {% for espace in globalVariable.espaces %}
                      {% if espace.societe and espace.societe.id not in societesCount %}
                        {% set societesCount = societesCount|merge([espace.societe.id]) %}
                      {% endif %}
                    {% endfor %}
                    <div class="fs-2 fw-bold">{{ societesCount|length }}</div>
                    <div class="small text-white-50">Organisations</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <form method="post" action="{{ path('portail_connect_projet', {'id': 0}) }}" id="societeConnectForm">
            <input type="hidden" id="societeConnect" name="societeConnect" value="" data-portail-select-modal-target="hiddenInput">

            <div class="portail-search-wrap mb-4">
              <i class="ti ti-search"></i>
              <input
                type="text"
                class="form-control portail-search-input"
                placeholder="Rechercher par nom de projet ou de société"
                data-action="input->portail-select-modal#filter"
              >
            </div>

            <div class="row g-4">
              {% for espace in globalVariable.espaces %}
                <div class="col-12 col-md-6 col-xl-3" data-espace-item>
                  <button
                    type="button"
                    class="portail-space-card p-4 h-100 w-100 text-start border-light-subtle"
                    data-portail-select-modal-target="card"
                    data-espace-id="{{ espace.idtoken }}"
                    data-project-name="{{ espace.nom }}"
                    data-company-name="{{ espace.societe.nom|default('') }}"
                    data-action="click->portail-select-modal#select dblclick->portail-select-modal#submit"
                  >
                    <div class="d-flex align-items-start justify-content-between gap-2 mb-3">
                      <div class="d-flex align-items-center gap-3">
                        <div class="d-flex align-items-center justify-content-center rounded-4" style="width:52px;height:52px;background:#ecfdf3;color:#10b981;">
                          <i class="ti ti-building-community fs-7"></i>
                        </div>
                        <div>
                          <div class="fw-bold text-dark">{{ espace.nom }}</div>
                          <div class="small text-muted">{{ espace.societe.nom|default('Société non renseignée') }}</div>
                        </div>
                      </div>
                      <span class="badge bg-success-subtle text-success d-none" data-selected-badge>Sélectionné</span>
                    </div>

                    <div class="small text-muted mb-3">
                      Connectez-vous à cet espace pour consulter les contenus, événements et partenaires liés au projet.
                    </div>

                    <div class="d-flex flex-wrap gap-2 small">
                      {% if espace.societe and espace.societe.secteur %}
                        <span class="badge bg-light text-dark border">{{ espace.societe.secteur.nom }}</span>
                      {% endif %}
                      {% if espace.societe and espace.societe.ville %}
                        <span class="badge bg-light text-dark border">{{ espace.societe.ville }}</span>
                      {% endif %}
                    </div>
                  </button>
                </div>
              {% endfor %}
            </div>
          </form>
        </div>
        <div class="modal-footer border-0 pt-0 px-4 px-lg-5 pb-4">
            <button type="button" class="btn btn-primary px-4" data-portail-select-modal-target="submit" data-action="portail-select-modal#submit" disabled>Se connecter à l'espace</button>
        </div>
      </div>
    </div>
  </div>

{% else %}
  {% set annonceFeatured = annonces|default([])|first %}
  {% set eventFeatured = events|default([])|first %}
  {% set upcomingEvents = events|default([])|slice(0, 3) %}
  {% set userIsInscrit = featuredEventUserIsInscrit|default(null) %}
  {% set meceneIsInscrit = featuredEventMeceneIsInscrit|default(null) %}
  {% set partnerFeatured = partenaireMois ? partenaireMois.mecene : (last5mecenes|default([])|first) %}
  {% set partnerCount = partnerCount|default(0) %}
  {% set eventCount = eventCount|default(0) %}
  {% set galleryCount = galleryCount|default(0) %}
  {% set annonceCount = annonces|default([])|length %}
  {% set spacesCount = globalVariable.espaces|default([])|length %}

  <style>
    .portal-shell{background:#f6f8fb}
    .portal-section-title{font-size:1.2rem;font-weight:700;color:#101828}
    .portal-soft-card{border:1px solid #e9eef5;border-radius:18px;background:#fff;box-shadow:0 8px 30px rgba(15,23,42,.04)}
    .portal-dark-hero{border-radius:22px;background:linear-gradient(135deg,#161b2f 0%,#1d2740 55%,#131a2c 100%);color:#fff}
    .portal-mini-stat{border:1px solid #e9eef5;border-radius:18px;background:#fff;min-height:170px}
    .portal-mini-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center}
    .portal-feature-image{height:250px;object-fit:cover;border-radius:16px}
    .portal-event-list .item{border:1px solid #edf1f7;border-radius:16px;padding:1rem;background:#fff}
    .portal-partner-card{border:1px solid #e9eef5;border-radius:18px;background:#fff;height:100%}
    .portal-partner-logo{width:56px;height:56px;border-radius:16px;background:#f8fafc;display:flex;align-items:center;justify-content:center;border:1px solid #e9eef5}
    .portal-partner-logo img{max-width:36px;max-height:36px}
    .portal-chip{display:inline-flex;align-items:center;border-radius:999px;padding:.3rem .65rem;border:1px solid #e5e7eb;background:#fff;font-size:.78rem;color:#475467}
    .portal-opportunity-hero{border-radius:18px;background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff}
    .portal-gallery-card{border:1px solid #e9eef5;border-radius:18px;overflow:hidden;background:#fff;height:100%}
    .portal-gallery-thumb{height:165px;object-fit:cover;width:100%}
    .portal-wall-card{border:1px solid #e9eef5;border-radius:20px;background:#fff}
    .portal-partner-month{border:1px solid #f5df9b;border-radius:28px;background:radial-gradient(circle at top,#fffdf5 0%,#fff9e8 45%,#fffdf7 100%);box-shadow:inset 0 0 45px rgba(234,179,8,.10)}
    .portal-partner-month-logo{width:160px;height:160px;border-radius:28px;background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.08);display:flex;align-items:center;justify-content:center;border:1px solid #f3f4f6}
    .portal-partner-month-logo img{max-width:88px;max-height:88px}
    .portal-crown-wrap{width:128px;height:128px;border-radius:999px;background:radial-gradient(circle,#fff7d6 0%,#fdf0bf 100%);display:flex;align-items:center;justify-content:center;color:#d4a514;margin:0 auto}
    .portal-search-inline{position:relative}
    .portal-search-inline i{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:#98a2b3}
    .portal-search-inline input{padding-left:2.6rem;border-radius:999px}
  </style>

  <div class="body-wrapper portal-shell">
    <div class="container-fluid py-4 py-lg-5">
      <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
        <div>
          <div class="d-flex align-items-center gap-2 mb-2">
            <h1 class="fw-bold mb-0">Business Club / Réseau</h1>
          </div>
          <p class="text-muted mb-0">Développez votre réseau grâce aux entreprises engagées aux côtés du projet.</p>
        </div>
        <div class="d-flex flex-wrap gap-2">
          {% if globalVariable.espace is not null %}
            <div class="dropdown">
              <button class="btn btn-light border" id="espaceDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="ti ti-building-community me-1"></i>
                {{ globalVariable.espace.nom }}
              </button>
              <div class="dropdown-menu dropdown-menu-end p-2" aria-labelledby="espaceDropdown">
                <div class="px-2 pb-2 small text-muted">Changer de portail partenaire</div>
                {% for espace in globalVariable.espaces %}
                  <a href="{{ path('admin_connect_espace', {'id': espace.idtoken}) }}" class="dropdown-item rounded-3 py-2 {% if globalVariable.espace and espace.id == globalVariable.espace.id %}active{% endif %}">
                    {{ espace.nom }}{% if espace.societe %} • {{ espace.societe.nom }}{% endif %}
                  </a>
                {% endfor %}
              </div>
            </div>
          {% endif %}
          {% if app.user and app.user.userType == 'staff' and espace is defined and app.user.societe is defined and espace.societe in app.user.societe %}
            <a class="btn btn-success" href="{{ path('portail_configuration_modal') }}" data-turbo-frame="modal-frame">
              <i class="ti ti-settings me-1"></i> Paramétrer le portail
            </a>
          {% endif %}
        </div>
      </div>

      <div class="row">
        <div class="col-8">
          <div class="bg-primary card p-4 p-lg-5 mb-4">
            <div class="row align-items-center g-4">
              <div class="col-lg-12">
                <h2 class="fw-bold text-white mb-2">Rejoignez un écosystème premium de partenaires engagés</h2>
                <p class="text-white-50 mb-0">Accédez à des opportunités de collaboration uniques et développez votre activité au sein d’un réseau professionnel à haut niveau d’engagement.</p>
              </div>

              <div class="col-lg-4">
                <div class="row g-3 text-center">
                    <div class="fs-9 fw-bold text-warning">{{ partnerCount }}</div>
                    <div class="small fs-3 text-white">Partenaires</div>
                </div>
              </div>

              <div class="col-lg-4">
                <div class="row g-3 text-center">
                    <div class="fs-9 fw-bold text-warning">{{ eventCount }}</div>
                    <div class="small fs-3 text-white">Événements</div>
                </div>
              </div>

              <div class="col-lg-4">
                <div class="row g-3 text-center">
                    <div class="fs-9 fw-bold text-warning">{{ galleryCount }}</div>
                    <div class="small fs-3 text-white">Galeries photos</div>
                </div>
              </div>

            </div>
          </div>

          {% if module_enabled('mur') %}
            <div class="portal-section-title mb-3 p-4">Mur de la communauté</div>
            <div class="portal-wall-card p-4 mb-4 p-4">
              <turbo-frame id="feed-composer">
                <form
                  method="post"
                  action="{{ path('post_create_espace', { mur: espace.wall.id }) }}"
                  enctype="multipart/form-data"
                  data-turbo-stream="true"
                  data-controller="wall-composer"
                  data-action="turbo:submit-start->wall-composer#submitStart turbo:submit-end->wall-composer#submitted"
                >
                  <input type="hidden" name="_token" value="{{ csrf_token('post_create_' ~ espace.wall.id) }}">
                  <input type="hidden" name="type" value="STATUS">

                  <div class="d-flex gap-3 align-items-start">
                    <div class="rounded-circle overflow-hidden bg-light flex-shrink-0" style="width:48px;height:48px;">
                      {% if app.user and app.user.image %}
                        <img src="{{ asset('uploads/profiles/user/' ~ app.user.image) }}" alt="Profil" class="w-100 h-100 object-fit-cover">
                      {% else %}
                        <div class="w-100 h-100 d-flex align-items-center justify-content-center text-muted">
                          <i class="ti ti-user"></i>
                        </div>
                      {% endif %}
                    </div>
                    <div class="flex-grow-1">
                      <div class="form-floating mb-3">
                        <textarea class="form-control h-140" placeholder="Exprimez-vous…" id="composerContent" name="content" data-wall-composer-target="content" data-action="input->wall-composer#toggleSubmit"></textarea>
                        <label for="composerContent">Partager une actualité, une rencontre ou une opportunité</label>
                      </div>
                      <div class="d-flex align-items-center gap-3 flex-wrap">
                        <input
                          type="file"
                          name="media[]"
                          class="d-none"
                          accept="image/*"
                          multiple
                          data-wall-composer-target="fileInput"
                          data-action="change->wall-composer#preview"
                        >
                        <button
                          type="button"
                          class="btn btn-light border rounded-pill"
                          title="Ajouter des photos"
                          data-action="wall-composer#pickPhotos"
                        >
                          <i class="ti ti-photo me-1"></i> Ajouter des photos
                        </button>
                        <button type="submit" class="btn btn-success ms-auto" data-wall-composer-target="submit">Publier</button>
                      </div>
                      <div class="mt-3 js-composer-preview d-none" data-wall-composer-target="preview"></div>
                      <div class="form-text text-muted mt-2">Jusqu’à 10 photos, 5 Mo max chacune.</div>
                    </div>
                  </div>
                </form>
              </turbo-frame>
            </div>
          {% endif %}
        </div>

        <div class="col-4">
          {% if partenaireMois %}
            {% set moisLabels = {
              1: 'Janvier', 2: 'Février', 3: 'Mars', 4: 'Avril', 5: 'Mai', 6: 'Juin',
              7: 'Juillet', 8: 'Août', 9: 'Septembre', 10: 'Octobre', 11: 'Novembre', 12: 'Décembre'
            } %}
            {% set relationDebut = null %}
            {% if espace and partenaireMois.mecene %}
              {% for relation in partenaireMois.mecene.meceneSocietes %}
                {% if relation.societe and espace.societe and relation.societe.id == espace.societe.id %}
                  {% set relationDebut = relation.dateDebutRelation %}
                {% endif %}
              {% endfor %}
            {% endif %}
            <div class="portal-partner-month p-4 p-lg-5 text-center">

              <h2 class="fw-bold mb-2">Partenaire du mois</h2>
              <div class="fs-2 text-muted mb-5">{{ moisLabels[partenaireMois.mois]|default('Mois') }} {{ partenaireMois.annee }}</div>

              <div class="portal-partner-month-logo mx-auto mb-4">
                {% if partenaireMois.mecene.logo %}
                  <img src="{{ asset('uploads/mecenes/logos/' ~ partenaireMois.mecene.logo) }}" alt="{{ partenaireMois.mecene.nom }}">
                {% else %}
                  <i class="ti ti-building fs-10 text-muted"></i>
                {% endif %}
              </div>

              <div class="fw-bold mb-1 text-black" style="font-size:2.25rem;line-height:1.1;">{{ partenaireMois.mecene.nom }}</div>
              <div class="text-primary mb-4 fs-4" style="font-size:1.9rem;">
                {{ partenaireMois.mecene.secteur ? partenaireMois.mecene.secteur.nom : 'Partenaire FundUp' }}
              </div>


              <div class="d-grid gap-3 text-start mb-5">
                <div class="d-flex justify-content-between align-items-center">
                  <span class="text-muted fs-3">Partenaraire depuis</span>
                  <strong class="fs-2">{{ relationDebut ? relationDebut|date('M Y') : partenaireMois.annee }}</strong>
                </div>
                {#<div class="d-flex justify-content-between align-items-center">
                  <span class="text-muted fs-3">Visibilité générée</span>
                  <strong class="fs-2">{{ partenaireMois.impression|default(0) }}</strong>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                  <span class="text-muted fs-3">Clics générés</span>
                  <strong class="fs-2">{{ partenaireMois.clic|default(0) }}</strong>
                </div>#}
              </div>

              <a
                class="btn btn-light border px-4 py-3 fs-4"
                href="{{ path('portail_annuaire_fiche', { id: partenaireMois.mecene.idtoken }) }}"
                data-turbo-frame="offcanvas-frame"
                data-controller="portail-partenaire"
                data-portail-partenaire-track-url-value="{{ path('portail_partenance_add_clic', { id: partenaireMois.idtoken }) }}"
                data-action="click->portail-partenaire#track"
              >
                Voir le profil complet
              </a>
            </div>
          {% endif %}
        </div>
      </div>

      

      <div class="row g-4 mb-5 p-4">
        <div class="col-xl-8">
          <div class="portal-soft-card p-4 h-100">
            <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3">
              <div>
                <div class="portal-section-title">Événement business du moment</div>
                <div class="text-muted small">Le prochain rendez-vous phare de votre réseau partenaires.</div>
              </div>
              {% if eventFeatured %}
                <a href="{{ path('portail_evenement_view', { id: eventFeatured.idtoken }) }}" class="small text-success text-decoration-none" data-turbo-frame="offcanvas-frame">Voir le détail</a>
              {% endif %}
            </div>

            {% if eventFeatured %}
              <div class="row g-4">
                <div class="col-lg-7">
                  {% if eventFeatured.image %}
                    <img src="{{ asset('uploads/event/' ~ eventFeatured.image) }}" alt="{{ eventFeatured.nom }}" class="portal-feature-image w-100 bg-light">
                  {% else %}
                    <div class="portal-feature-image w-100 d-flex align-items-center justify-content-center" style="background:linear-gradient(135deg,#0f172a,#334155);color:#fff;">
                      <i class="ti ti-calendar-event fs-10"></i>
                    </div>
                  {% endif %}
                </div>
                <div class="col-lg-5">
                  <span class="badge bg-warning-subtle text-warning mb-2">Événement</span>
                  <h4 class="fw-bold mb-2">{{ eventFeatured.nom }}</h4>
                  <div class="small text-muted mb-3">
                    {{ eventFeatured.description|striptags|slice(0, 230) }}{% if eventFeatured.description|striptags|length > 230 %}…{% endif %}
                  </div>
                  <div class="d-flex flex-wrap gap-2 mb-4">
                    <span class="portal-chip"><i class="ti ti-calendar me-1"></i> {{ eventFeatured.date ? eventFeatured.date|date_fr : 'Date à confirmer' }}</span>
                    {% if eventFeatured.heure %}
                      <span class="portal-chip"><i class="ti ti-clock me-1"></i> {{ eventFeatured.heure|date('H:i') }}</span>
                    {% endif %}
                    {% if eventFeatured.lieu %}
                      <span class="portal-chip"><i class="ti ti-map-pin me-1"></i> {{ eventFeatured.lieu }}</span>
                    {% endif %}
                  </div>
                  <div class="d-flex gap-2">
                    {% if userIsInscrit %}
                      <a class="btn bg-warning text-white" title="Se désinscrire" href="{{ path('portail_desinscription_modal', { id: eventFeatured.idtoken }) }}" data-turbo-frame="modal-frame">
                        Se désinscrire
                      </a>
                    {% elseif meceneIsInscrit %}
                      <div class="alert alert-warning text-warning mb-0 py-2 px-3" role="alert">
                        Votre entreprise est déjà inscrite à l'événement
                      </div>
                    {% else %}
                      <a class="btn bg-success text-white" title="S'inscrire" href="{{ path('portail_inscription_modal', { id: eventFeatured.idtoken }) }}" data-turbo-frame="modal-frame">
                        S'inscrire
                      </a>
                    {% endif %}
                    <a class="btn btn-light border" href="{{ path('portail_evenement_view', { id: eventFeatured.idtoken }) }}">Voir le détail</a>
                  </div>
                </div>
              </div>
            {% else %}
              <div class="text-muted">Aucun événement mis en avant pour le moment.</div>
            {% endif %}
          </div>
        </div>
        <div class="col-xl-4">
          <div class="portal-soft-card p-4 h-100">
            <div class="d-flex justify-content-between align-items-start mb-3">
              <div>
                <div class="portal-section-title">Prochains événements</div>
                <div class="text-muted small">Les prochains rendez-vous de l’espace partenaire.</div>
              </div>
              <a href="{{ path('portail_evenement') }}" class="small text-success text-decoration-none">Voir tout</a>
            </div>
            <div class="portal-event-list d-grid gap-3">
              {% for event in upcomingEvents %}
                <a href="{{ path('portail_evenement_view', { id: event.idtoken }) }}" class="item text-decoration-none text-dark" data-turbo-frame="offcanvas-frame">
                  <div class="d-flex align-items-start gap-3">
                    <div class="portal-mini-icon flex-shrink-0" style="background:#f5f3ff;color:#7c3aed;">
                      <i class="ti ti-calendar-event"></i>
                    </div>
                    <div>
                      <div class="fw-semibold">{{ event.nom }}</div>
                      <div class="small text-muted mt-1">
                        {{ event.date ? event.date|date_fr : 'Date à confirmer' }}
                        {% if event.heure %} • {{ event.heure|date('H:i') }}{% endif %}
                        {% if event.lieu %} • {{ event.lieu }}{% endif %}
                      </div>
                    </div>
                  </div>
                </a>
              {% else %}
                <div class="item">
                  <div class="small text-muted">Aucun événement disponible pour le moment.</div>
                </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
      

      {% if module_enabled('annuaire') %}
        <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3 p-4">
          <div>
            <div class="portal-section-title">Annuaire des partenaires</div>
            <div class="text-muted small">Retrouvez les entreprises engagées dans le réseau.</div>
          </div>
          
        </div>

        <div class="row g-4 mb-4 p-4">
          {% for mecene in last5mecenes %}
            
              <div class="col-12 col-md-6 col-xl-4">
                <a href="{{ path('portail_annuaire_fiche', { id: mecene.idtoken }) }}" data-turbo-frame="offcanvas-frame">
                <div class="portal-partner-card p-4">
                  <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                    <div class="d-flex align-items-center">
                        {% if mecene.logo is not null %}
                            <img src="{{asset('uploads/mecenes/logos/' ~ mecene.logo )}}" class="card-hover" width="50">
                        {% else %}
                            {% set initials = mecene.nom|slice(0, 1)|upper %}
                            <span 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}}
                            </span>
                        {% endif %}
                        <div class="ms-3">
                            <h6 class="fs-4 fw-semibold mb-0">{{mecene.nom}}</h4>
                        </div>
                    </div>

                    <div class="d-flex gap-2 flex-wrap justify-content-end">
                      {% if partenaireMois and partenaireMois.mecene and partenaireMois.mecene.id == mecene.id %}
                        <span class="badge bg-warning-subtle text-warning">Partenaire du mois</span>
                      {% endif %}
                    </div>
                  </div>
                  <div class="d-flex flex-wrap gap-2 small text-muted mb-3">
                    {% if mecene.ville %}<span class="portal-chip"><i class="ti ti-map-pin me-1"></i>{{ mecene.ville }}</span>{% endif %}
                    <span class="portal-chip">{{ mecene.secteur.nom }}</span>
                  </div>
                </div>
                </a>
              </div>
            
          {% else %}
            <div class="col-12">
              <div class="portal-soft-card p-4 text-muted">Aucun partenaire à afficher pour le moment.</div>
            </div>
          {% endfor %}
        </div>

        <div class="text-center mb-5">
          <a href="{{ path('portail_annuaire') }}" class="btn btn-light border px-4">Voir tous les partenaires <i class="ti ti-arrow-right ms-1"></i></a>
        </div>
      {% endif %}

      {% if module_enabled('offre') %}
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-3 p-4">
          <div>
            <div class="portal-section-title">Opportunités suggérées pour vous</div>
            <div class="text-muted small">Des offres et collaborations proposées par les partenaires du réseau.</div>
          </div>
          <a href="{{ path('portail_offre_index') }}" class="small text-success text-decoration-none">Voir tout</a>
        </div>
        <div class="row g-4 mb-5 p-4">
          <div class="col-xl-12">
            <div class="portal-soft-card p-4 h-100">
              <turbo-frame id="home-offres" class="row g-3" src="{{ path('portail_home_ajax_offre') }}">
                <div class="col-12 text-muted">Chargement des offres...</div>
              </turbo-frame>
            </div>
          </div>
        </div>
      {% endif %}

      {% if globalVariable.parametresEspace['display_galerie'] is defined and globalVariable.parametresEspace['display_galerie'].valeur == '1' %}
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-3 p-4">
          <div>
            <div class="portal-section-title">Galeries photos des événements</div>
            <div class="text-muted small">Retrouvez les dernières ambiances du réseau.</div>
          </div>
          {% if galeries is not empty %}
            <a href="{{ path('portail_galerie_view', { id: galeries|first.idtoken }) }}" class="small text-success text-decoration-none">Voir les galeries</a>
          {% endif %}
        </div>
        <div class="row g-4 mb-5 p-4">
          {% for galerie in galeries|slice(0, 3) %}
            <div class="col-12 col-md-6 col-xl-4">
              <a href="{{ path('portail_galerie_view', { id: galerie.idtoken }) }}" class="portal-gallery-card d-block text-decoration-none text-dark">
                {% if galerie.photo %}
                  <img src="{{ asset(galerie.societe.dossier ~ '/galeries/' ~ galerie.slug ~ '/' ~ galerie.photo.photo) }}" class="portal-gallery-thumb" alt="{{ galerie.nom }}">
                {% else %}
                  <div class="portal-gallery-thumb d-flex align-items-center justify-content-center bg-light">
                    <i class="ti ti-photo fs-8 text-muted"></i>
                  </div>
                {% endif %}
                <div class="p-4">
                  <div class="fw-semibold">{{ galerie.nom }}</div>
                  <div class="small text-muted mt-1">{{ galerie.date|date_fr }}</div>
                </div>
              </a>
            </div>
          {% else %}
            <div class="col-12">
              <div class="portal-soft-card p-4 text-muted">Aucune galerie disponible pour le moment.</div>
            </div>
          {% endfor %}
        </div>
      {% endif %}

      <div class="offcanvas offcanvas-40 offcanvas-end" tabindex="-1" id="homeOffcanvas" data-controller="turbo-offcanvas">
        <turbo-frame id="offcanvas-frame" data-action="turbo:frame-load->turbo-offcanvas#frameLoaded">
        </turbo-frame>
      </div>
    </div>
  </div>
{% endif %}

{% if globalVariable.parametresEspace['display_galerie'] is defined and globalVariable.parametresEspace['display_galerie'].valeur == '1' %}
 <style>
.el-element-overlay .el-card-item .el-overlay-1 .el-info {
    top: 0 !important;
}

/* Étendre les colonnes à la même hauteur */
.el-element-overlay > .col-lg-3,
.el-element-overlay > .col-md-6 {
  display: flex;
  flex-direction: column;
}

/* S'assurer que la carte prend toute la hauteur */
.card.overflow-hidden {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Étendre la hauteur de .el-card-item */
.el-card-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Étendre la div contenant l'image */
.el-card-avatar {
  position: relative;
  /*display: flex;*/
  justify-content: center;
  align-items: center;
  height: 250px;
  overflow: hidden;
}

/* Date en haut à gauche */
.galerie-date {
  position: absolute;
  top: 20px;
  left: 12px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  text-transform: uppercase;   /* => "1 AOÛT 2025" */
  letter-spacing: .5px;
  z-index: 2;
}

.galerie-nom {
  position: absolute;
  top: 150px;
  left: 0px;
  color: #fff;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .5px;
  z-index: 2;
}

/* Overlay + nom centré */
.el-overlay {
  position: absolute;
  inset: 0;                    /* top/right/bottom/left: 0 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-overlay .el-info {
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

/* Uniformiser la hauteur des images + overlay */
.el-overlay {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* ou center selon le design souhaité */
}


</style>
{% endif %}

{% endblock %}