{{!
    @template local_kid/annuaire

    * filterform - { action, promotionoptions, studentquery, sort, dir, sifirst, silast }
    * firstinitialbar - raw HTML (core/initials_bar)
    * lastinitialbar - raw HTML (core/initials_bar)
    * sortheaders - { lastname, firstname, promotionname: {label, url, indicator} }
    * hasrows - bool
    * rows - [{id, firstname, lastname, promotionname, studenturl, promotionurl}]
    * pagingbar - raw HTML
    * total - int
}}
<div class="kid-annuaire fr-scope">
    <form method="get" action="{{filterform.action}}" class="fr-mb-4w">
        <input type="hidden" name="sifirst" value="{{filterform.sifirst}}">
        <input type="hidden" name="silast" value="{{filterform.silast}}">
        <input type="hidden" name="sort" value="{{filterform.sort}}">
        <input type="hidden" name="dir" value="{{filterform.dir}}">

        <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--bottom">
            <div class="fr-col-12 fr-col-md-4">
                <div class="fr-input-group">
                    <label class="fr-label" for="kid-annuaire-studentquery">{{#str}}annuaire_filter_query, local_kid{{/str}}</label>
                    <input class="fr-input" type="text" name="studentquery" id="kid-annuaire-studentquery" value="{{filterform.studentquery}}">
                </div>
            </div>
            <div class="fr-col-12 fr-col-md-4">
                <div class="fr-select-group">
                    <label class="fr-label" for="kid-annuaire-promotionid">{{#str}}annuaire_filter_promotion, local_kid{{/str}}</label>
                    <select class="fr-select" name="promotionid" id="kid-annuaire-promotionid">
                        <option value="0">{{#str}}annuaire_filter_all, local_kid{{/str}}</option>
                        {{#filterform.promotionoptions}}
                        <option value="{{id}}" {{#selected}}selected{{/selected}}>{{label}}</option>
                        {{/filterform.promotionoptions}}
                    </select>
                </div>
            </div>
            <div class="fr-col-12 fr-col-md-4">
                <ul class="fr-btns-group fr-btns-group--inline-md">
                    <li><button type="submit" class="fr-btn">{{#str}}annuaire_filter_apply, local_kid{{/str}}</button></li>
                    <li><a href="{{filterform.action}}" class="fr-btn fr-btn--secondary">{{#str}}annuaire_filter_reset, local_kid{{/str}}</a></li>
                </ul>
            </div>
        </div>
    </form>

    <div class="kid-annuaire__initials fr-mb-2w">
        {{{firstinitialbar}}}
        {{{lastinitialbar}}}
    </div>

    {{^hasrows}}
    {{> local_kid/empty_state}}
    {{/hasrows}}

    {{#hasrows}}
    <p class="fr-text--sm">{{#str}}annuaire_count, local_kid, {{total}}{{/str}}</p>
    <div class="fr-table kid-annuaire__table-wrap">
        <table>
            <caption>{{#str}}page_annuaire, local_kid{{/str}}</caption>
            <thead>
                <tr>
                    <th scope="col">{{#sortheaders.lastname}}{{> local_kid/sort_button}}{{/sortheaders.lastname}}</th>
                    <th scope="col">{{#sortheaders.firstname}}{{> local_kid/sort_button}}{{/sortheaders.firstname}}</th>
                    <th scope="col">{{#sortheaders.promotionname}}{{> local_kid/sort_button}}{{/sortheaders.promotionname}}</th>
                    <th scope="col">{{#str}}annuaire_col_dossier, local_kid{{/str}}</th>
                    <th scope="col">{{#str}}annuaire_col_promotionlink, local_kid{{/str}}</th>
                </tr>
            </thead>
            <tbody>
                {{#rows}}
                <tr>
                    <td>{{lastname}}</td>
                    <td>{{firstname}}</td>
                    <td>{{promotionname}}</td>
                    <td><a class="fr-link" href="{{studenturl}}">{{#str}}annuaire_link_dossier, local_kid{{/str}}</a></td>
                    <td><a class="fr-link" href="{{promotionurl}}">{{#str}}annuaire_link_promotion, local_kid{{/str}}</a></td>
                </tr>
                {{/rows}}
            </tbody>
        </table>
    </div>
    {{{pagingbar}}}
    {{/hasrows}}
</div>
