index-main/site/templates/impacts.php

<?php snippet('header') ?>
<main>

<header class="page__header">

    <h2 class="page__title"><?= $page->title() ?></h2>

    <?php if ($page->chapo()->isNotEmpty()): ?>
    <div class="description-medium">
        <p><?= $page->chapo() ?></p>
    </div>
    <?php endif ?>
</header>


<div class="page__sort">
    <button class="sort btn--small no-link"  data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
    <div class="dropdown">
        <button class="dropdown__trigger sort btn--small no-link"><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Filtrer par type</p></button>
        <div class="dropdown__content">
            <ul>
                <li><button type="button" data-filter="france">Médiatique</button></li>
                <li><button type="button" data-filter="cisjordanie">Judiciaire</button></li>
                <li><button type="button" data-filter="etats-unis">Institutionnel</button></li>
                <li><button type="button" data-filter="gaza">Public</button></li>
            </ul>
        </div>
    </div>
</div>

<div class="page__content">

    <!-- Contenu statique temporaire -->
    <div class="card--impact" data-impact-type="media">
        <div class="card--impact__inner">
        <p class="tag">Médiatique</p>

        <?php snippet('card-open-graph') ?>
            <ul class="investigations">
                <li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
                <li><a href="/enquetes/l-homicide-de-nahel-merzouk"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L’homicide de Nahel Merzouk</a></li>  
        </ul>
      

        <div class="keywords-wrapper">
        <ul class="keywords">
                        <li><a href="#keyword" target="_blank">Occupation</a></li>
                        <li><a href="#keyword" target="_blank">Colonialité</a></li>
                        <li><a href="#keyword" target="_blank">Forces armées</a></li>
                    </ul>
        </div>
    </div>
    </div>


    <div class="card--impact has-link" data-impact-type="judiciaire">
    <div class="card--impact__inner">
        <p class="tag">Judiciaire</p>
        <p class="date">12 Dec 2025</p>
        <div class="content">
            <p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah".
            </p>
        </div>

        <ul class="investigations">
                <li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
            </ul>

        <div class="keywords-wrapper">
        <ul class="keywords">
                        <li><a href="#keyword" target="_blank">Occupation</a></li>
                        <li><a href="#keyword" target="_blank">Colonialité</a></li>
                    </ul>
        </div>
  
            <button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
            <a class="link-block" href="#" target="_blank"></a>
    </div>
    </div>

    <div class="card--impact has-link" data-impact-type="judiciaire">
    <div class="card--impact__inner">
        <p class="tag">Judiciaire</p>
        <p class="date">12 Dec 2025</p>
        <div class="content">
            <p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"
            </p>
        </div>
        <ul class="investigations">
                <li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
        </ul>
        <div class="keywords-wrapper">
        <ul class="keywords">
                        <li><a href="#keyword" target="_blank">Occupation</a></li>
                        <li><a href="#keyword" target="_blank">Colonialité</a></li>
                        <li><a href="#keyword" target="_blank">Forces armées</a></li>
                    </ul>
        </div>

        <button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
        <a class="link-block" href="#" target="_blank"></a>
    </div>
    </div>

    <div class="card--impact" data-impact-type="public">
    <div class="card--impact__inner">
        <p class="tag">Judiciaire</p>
        <p class="date">12 Dec 2025</p>
        <div class="content">
            <p>Index présente une série d'enquêtes récentes au Festival du Réel 2025.
            </p>
           
        </div>

        <div class="keywords-wrapper">
        <ul class="keywords">
                        <li><a href="#keyword" target="_blank">Evènement</a></li>
                        <li><a href="#keyword" target="_blank">Actualité d’Index</a></li>
                    </ul>
        </div>
    </div>
    </div>



</div>

</main>
<?php snippet('footer') ?>