{% extends 'base_emine.html.twig' %}

{% block title %}{{parent()}}-Actionnaires{% endblock %}

{% block content %}
    <main style="padding-top: 180px; min-height: 100vh;" class="bg-charcoal-light">
        <div class="container py-4">
          <nav class="operators-breadcrumb mb-4">
            <ol>
              <li>
                <a href="/">
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><polyline points="9 22 9 12 15 12 15 22" />
                  </svg>
                  Accueil
                </a>
              </li>
              <li class="separator">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="9 18 15 12 9 6" />
                </svg>
              </li>
              <li>
                <a href="#">Contrats</a>
              </li>
              <li class="separator">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="9 18 15 12 9 6" />
                </svg>
              </li>
              <li>
                <a href="#">Partenariat</a>
              </li>
              <li class="separator">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="9 18 15 12 9 6" />
                </svg>
              </li>
              <li class="active">Actionnaires</li>
            </ol>
          </nav>

          <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3 mb-4">
            <div>
              <h1 class="fw-bold mb-1" style="font-family: var(--font-display); font-size: 1.6rem;">
                📋 Liste des actionnaires
              </h1>
              <p class="text-muted-mine mb-0" style="font-size: 0.9rem">
                Liste complète des actionnaires publiés
              </p>
            </div>
            <div class="d-flex gap-2 flex-wrap">
              <a class="operators-btn operators-btn-primary btn" href="{{path('app_emine_actionnariat_actionnaire_download')}}">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" />
                </svg>
                Exporter en Excel
              </a>
            </div>
          </div>


          <div class="dashboard-card mb-4">
            <div class="d-flex flex-column flex-md-row gap-3 p-3">
              <div class="operators-search-box flex-grow-1">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
                </svg>
                <input
                  	type="text"
                 	 placeholder="Rechercher par nom  ou pays..."
				  	name="search" 
					hx-post="{{path('app_emine_actionnariat_actionnaire_search', {page: p})}}" 
					hx-trigger="input changed delay:500ms, search" 
					hx-target="#resultsOpera" 
					hx-indicator=".htmx-indicator"
                />
              </div>
              <div class="d-flex gap-2 flex-wrap align-items-center">
              </div>
            </div>
          </div>

          <div class="dashboard-card">
            <div class="dashboard-table-wrap">
              <table class="dashboard-table">
                <thead>
                  <tr>
                    <th>N°</th>
                    <th>Nom</th>
                    <th>Pays</th>
                    <th>Informations</th>
                    <th class="text-center">Actions</th>
                  </tr>
                </thead>
                <tbody id="resultsOpera">
					{% set compter = 0 %}

					{% for item in actionnaires %}
						{% set compter  = compter + 1 %}
						{% set compter1 = (compter + ((p - 1) * 10)) %}

                        <tr class="animate-fade-in-up">
							<td>
								<span style="font-family: var(--font-display); font-weight: 600; font-size:0.82rem; color:var(--copper);">
								    {{compter1}}
								</span>
							</td>
							<td class="fw-medium">{{ item.libelle }}</td>
							<td style="font-size:0.85rem;">{{ item.pays ? item.pays.libelle : ''  }}</td>
							<td style="font-size:0.85rem;">{{ item.proprietaire }}</td>
                          <td class="text-center">
                            <div class="d-flex gap-1 justify-content-center">
                              <a
                                class="operators-action-btn"
                                title="Voir les détails"
								href="{{path('app_emine_actionnariat_actionnaire_show', {id: item.id})}}"
                              >
                                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" />
                                </svg>
                              </a>
                            </div>
                          </td>
                        </tr>
					{% else %}
						<tr>
							<td colSpan="5" class="text-center py-5 text-muted-mine">
								Aucun actionnaire trouvé pour cette recherche.
							</td>
						</tr>
                    {% endfor %}
                </tbody>
              </table>
            </div>
          </div>

		  	<div class="d-flex align-items-center justify-content-between mt-3 mb-4">
              <p class="text-muted-mine mb-0" style="font-size: 0.83rem;">
                
              </p>
              <div class="d-flex gap-1">
                {{ pagerfanta(actionnaires, 'twitter_bootstrap5') }}
              </div>
            </div>
        </div>
    </main>   
{% endblock %}