<div class="tdbmd-table-container">
    <div class="tdbmd-table-header">
        <div>
            <label
                class="fr-label fr-mb-1w"
                for="data-table-search-input{%if props.flows %}-flows{% endif %}"
            >
                Filtrer par année, lieu ou dimension
            </label>
            <div
                class="fr-search-bar"
                id="header-search"
            >
                <input
                    id="data-table-search-input{%if props.flows %}-flows{% endif %}"
                    class="table-search fr-input"
                    placeholder="Rechercher"
                    type="search"
                    value="{{ props.search|default_if_none:'' }}"
                ></input>
                <button class="fr-btn" title="Rechercher">
                    Rechercher
                </button>
            </div>
        </div>
    </div>
    <div style="overflow-x: auto;">
        <table class="tdbmd-table" data-sort="{{ props.column_order|default_if_none:'' }}" data-orderflow="{{ props.column_order_flow|default_if_none:'' }}" data-limit="{{props.limit}}" data-page="{{ pages.current }}" data-search="{{ props.search|default_if_none:'' }}" data-linefocus="{{ line_focus|default_if_none:'' }}">
            <thead>
                <tr>
                    {% for key in keys %}
                        <th class="orderableTh" data-orderflow="{% if props.column_order_flow  == "DESC"%}DESC{% else%}ASC{% endif %}" data-name="{{ key.db }}" scope="col">
                            <div>
                                <span>{{ key.label }}</span>
                                <button
                                    type="button"
                                    aria-label="Trier la colonne {{key.label}} par ordre {% if props.column_order == key.db %}{% if props.column_order_flow == "ASC" %}décroissant{% elif props.column_order_flow == "DESC" %}croissant{% endif %}{% else %}croissant{% endif %}"
                                    class="orderArrow {% if props.column_order == key.db %}{% if props.column_order_flow == "ASC" %}orderArrowUp{% elif props.column_order_flow == "DESC" %}orderArrowDown{% endif %}{% else %}orderArrowBoth{% endif %}"
                                >
                                    {% if props.column_order == key.db %}{% if props.column_order_flow == "ASC" %}↑{% elif props.column_order_flow == "DESC" %}↓{% endif %}{% else %}↕{% endif %}
                                </button>
                            </div>
                        </th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in rows %}
                    <tr tabindex="-1">
                        {% for value in row.values %}
                            <td>{{ value }}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
    </table>
    </div>
    {% if not rows %}
        Pas de donnée disponible.
    {% endif %}
    <div class="fr-table__footer">
        <div class='fr-table__footer--start'>
        <p class='fr-table__detail' style="margin: 0px;">{{ result_count }} lignes</p>
        <div class='fr-select-group'>
            <label class='fr-sr-only fr-label' for='table-footer-select-7847'> Lignes par page </label>
            <select class='select-table-limit fr-select' aria-describedby='table-footer-select-7847-messages' id='table-footer-select-7847' name='table-footer-select-7847' style="width: 11rem;">
            <option value='' selected disabled hidden>Lignes par page</option>
            <option value='20'>20 lignes par page</option>
            <option value='50'>50 lignes par page</option>
            <option value='100'>100 lignes par page</option>
            </select>
            <div class='fr-messages-group' id='table-footer-select-7847-messages' aria-live='polite'>
            </div>
        </div>
        </div>
        {% if not pages.only_one_page %}
            <div class='fr-table__footer--middle'>
                <nav role='navigation' class='fr-pagination' aria-label='Pagination'>
                    <ul class='fr-pagination__list'>
                        {% if pages.first != None %}
                            <li>
                                <button class='fr-pagination__link fr-pagination__link--first fr-pagination__link-override' data-page="{{ pages.first }}" aria-label="Afficher la première page"> Première page </button>
                            </li>
                        {% endif %}
                        {% if pages.before != None %}
                            <li>
                                <button class='fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label fr-pagination__link-override' data-page="{{ pages.before }}" aria-label="Afficher la page précédente"> Précédente </button>
                            </li>
                        {% endif %}
                        <li>
                            <button class='fr-pagination__link fr-pagination__link-override' data-page="{{ pages.current }}" aria-label="Afficher la page {{ pages.current }}"> <b>{{ pages.current }}</b></button>
                        </li>
                        {% if pages.after != None %}
                            <li>
                                <button class='fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label fr-pagination__link-override' data-page="{{ pages.after }}" aria-label="Afficher la page suivante"> Suivante </button>
                            </li>
                        {% endif %}
                        {% if pages.last != None %}
                            <li>
                                <button class='fr-pagination__link fr-pagination__link--last fr-pagination__link-override' data-page="{{ pages.last }}" aria-label="Afficher la dernière page"> Dernière page </button>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        {% endif %}
    </div>
    <div class="data-table-export-buttons">
        {% if last_year %}
            <button
                data-year="{{ last_year }}"
                class="table-export fr-btn fr-btn--secondary fr-btn--sm fr-icon-file-download-line fr-btn--icon-right"
            >
                Export des données de {{ last_year }}
            </button>
        {% endif %}
        <button
            class="table-export fr-btn fr-btn--secondary fr-btn--sm fr-icon-file-download-line fr-btn--icon-right"
        >
            Exporter les données (toutes années)
        </button>
    </div>
</div>
