{{!
    @template local_kid/journal

    * filterform - { action, authoroptions, promotionoptions, domainoptions,
      actionoptions: [{id, label, selected}], studentquery, datefrom, dateto,
      sort, dir }
    * sortheaders - { timecreated, userid, domain, action: {label, url, indicator} }
    * hasrows - bool
    * rows - [{id, timecreated, author, authorurl, actionlabel, domainlabel, promotionname,
      studentname, studenturl, context, haschanges, diffhtml}]
    * pagingbar - raw HTML
    * total - int
}}
<div class="kid-journal fr-scope">
    <form method="get" action="{{filterform.action}}" class="fr-mb-4w">
        <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">
            <div class="fr-col-12 fr-col-sm-6 fr-col-md-3">
                <div class="fr-select-group">
                    <label class="fr-label" for="kid-journal-userid">{{#str}}journal_filter_author, local_kid{{/str}}</label>
                    <select class="fr-select" name="userid" id="kid-journal-userid">
                        <option value="0">{{#str}}journal_filter_all, local_kid{{/str}}</option>
                        {{#filterform.authoroptions}}
                        <option value="{{id}}" {{#selected}}selected{{/selected}}>{{label}}</option>
                        {{/filterform.authoroptions}}
                    </select>
                </div>
            </div>
            <div class="fr-col-12 fr-col-sm-6 fr-col-md-3">
                <div class="fr-select-group">
                    <label class="fr-label" for="kid-journal-promotionid">{{#str}}journal_filter_promotion, local_kid{{/str}}</label>
                    <select class="fr-select" name="promotionid" id="kid-journal-promotionid">
                        <option value="0">{{#str}}journal_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-sm-6 fr-col-md-3">
                <div class="fr-select-group">
                    <label class="fr-label" for="kid-journal-domain">{{#str}}journal_filter_domain, local_kid{{/str}}</label>
                    <select class="fr-select" name="domain" id="kid-journal-domain">
                        <option value="">{{#str}}journal_filter_all, local_kid{{/str}}</option>
                        {{#filterform.domainoptions}}
                        <option value="{{id}}" {{#selected}}selected{{/selected}}>{{label}}</option>
                        {{/filterform.domainoptions}}
                    </select>
                </div>
            </div>
            <div class="fr-col-12 fr-col-sm-6 fr-col-md-3">
                <div class="fr-select-group">
                    <label class="fr-label" for="kid-journal-action">{{#str}}journal_filter_action, local_kid{{/str}}</label>
                    <select class="fr-select" name="action" id="kid-journal-action">
                        <option value="">{{#str}}journal_filter_all, local_kid{{/str}}</option>
                        {{#filterform.actionoptions}}
                        <option value="{{id}}" {{#selected}}selected{{/selected}}>{{label}}</option>
                        {{/filterform.actionoptions}}
                    </select>
                </div>
            </div>
            <div class="fr-col-12 fr-col-sm-6 fr-col-md-3">
                <div class="fr-input-group">
                    <label class="fr-label" for="kid-journal-studentquery">{{#str}}journal_filter_student, local_kid{{/str}}</label>
                    <input class="fr-input" type="text" name="studentquery" id="kid-journal-studentquery" value="{{filterform.studentquery}}">
                </div>
            </div>
            <div class="fr-col-12 fr-col-sm-6 fr-col-md-3">
                <div class="fr-input-group">
                    <label class="fr-label" for="kid-journal-datefrom">{{#str}}journal_filter_datefrom, local_kid{{/str}}</label>
                    <input class="fr-input" type="date" name="datefrom" id="kid-journal-datefrom" value="{{filterform.datefrom}}">
                </div>
            </div>
            <div class="fr-col-12 fr-col-sm-6 fr-col-md-3">
                <div class="fr-input-group">
                    <label class="fr-label" for="kid-journal-dateto">{{#str}}journal_filter_dateto, local_kid{{/str}}</label>
                    <input class="fr-input" type="date" name="dateto" id="kid-journal-dateto" value="{{filterform.dateto}}">
                </div>
            </div>
            <div class="fr-col-12 fr-col-sm-6 fr-col-md-3 fr-grid-row fr-grid-row--bottom">
                <ul class="fr-btns-group fr-btns-group--inline-md fr-mb-0">
                    <li><button type="submit" class="fr-btn">{{#str}}journal_filter_apply, local_kid{{/str}}</button></li>
                    <li><a href="{{filterform.action}}" class="fr-btn fr-btn--secondary">{{#str}}journal_filter_reset, local_kid{{/str}}</a></li>
                </ul>
            </div>
        </div>
    </form>

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

    {{#hasrows}}
    <p class="fr-text--sm">{{#str}}journal_count, local_kid, {{total}}{{/str}}</p>
    <div class="fr-table fr-table--no-caption">
        <table>
            <caption>{{#str}}journal_count, local_kid, {{total}}{{/str}}</caption>
            <thead>
                <tr>
                    <th scope="col">{{#sortheaders.timecreated}}{{> local_kid/sort_button}}{{/sortheaders.timecreated}}</th>
                    <th scope="col">{{#sortheaders.userid}}{{> local_kid/sort_button}}{{/sortheaders.userid}}</th>
                    <th scope="col">{{#sortheaders.domain}}{{> local_kid/sort_button}}{{/sortheaders.domain}}</th>
                    <th scope="col">{{#sortheaders.action}}{{> local_kid/sort_button}}{{/sortheaders.action}}</th>
                    <th scope="col">{{#str}}journal_col_promotion, local_kid{{/str}}</th>
                    <th scope="col">{{#str}}journal_col_student, local_kid{{/str}}</th>
                    <th scope="col">{{#str}}journal_col_details, local_kid{{/str}}</th>
                </tr>
            </thead>
            <tbody>
                {{#rows}}
                <tr>
                    <td>{{timecreated}}</td>
                    <td><a class="fr-link" href="{{authorurl}}">{{author}}</a></td>
                    <td>{{domainlabel}}</td>
                    <td>{{actionlabel}}</td>
                    <td>{{promotionname}}</td>
                    <td>{{#studentname}}<a class="fr-link" href="{{studenturl}}">{{studentname}}</a>{{/studentname}}</td>
                    <td>
                        {{#haschanges}}
                        <div class="kid-journal__diff">{{{diffhtml}}}</div>
                        {{/haschanges}}
                        {{#context}}<span class="kid-journal__context">{{context}}</span>{{/context}}
                    </td>
                </tr>
                {{/rows}}
            </tbody>
        </table>
    </div>
    {{{pagingbar}}}
    {{/hasrows}}
</div>
