{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template core/datafilter/filtertypes/datetime_selector

    A selector for two datetime values.

    This displays two "datetime-local" input types, each with a label based on the provided title.
    Each field has a wrapper and can be shown or hidden based on a companion datetime_mode element.

    Context variables required for this template:
    * title - The label for the filter
    * filtertype - filter type name for dataset filterfield.
    * value1 - The datetime value for the first field.
    * value2 - The datetime value for the second field.

    Example context (json):
    {
        "afterlabel": "Modified time after",
        "beforelabel": "Modified time before",
        "filtertype": "datetime",
        "aftervalue": "2024-01-01T12:00",
        "beforevalue": "2025-01-01T12:00",
        "now": "2024-01-01T12:00"
    }
}}
<div class="d-flex flex-column flex-md-row align-items-md-center" data-required="{{required}}">
    <span id="core-filter_row-{{filtertype}}-mode-{{uniqid}}"></span>
    <span class="{{filtertype}}-afterwrapper">
        <label for="core-filter_row-{{filtertype}}-after-{{uniqid}}" class="visually-hidden">{{afterlabel}}</label>
        <input
            id="core-filter_row-{{filtertype}}-after-{{uniqid}}"
            type="datetime-local"
            class="form-control"
            name="{{filtertype}}[0]"
            value="{{aftervalue}}"
            data-filterfield="{{filtertype}}1"
            data-field-title="{{afterlabel}}"
            {{#max}}max="{{max}}"{{/max}}
        >
    </span>
    <span class="{{filtertype}}-betweenwrapper ms-2 me-2">
        {{#str}} operator_and {{/str}}
    </span>
    <span class="{{filtertype}}-beforewrapper">
        <label for="core-filter_row-{{filtertype}}-before-{{uniqid}}" class="visually-hidden">{{beforelabel}}</label>
        <input
            id="core-filter_row-{{filtertype}}-before-{{uniqid}}"
            type="datetime-local"
            class="form-control"
            name="{{filtertype}}[1]"
            value="{{beforevalue}}"
            data-filterfield="{{filtertype}}2"
            data-field-title="{{beforelabel}}"
            {{#max}}max="{{max}}"{{/max}}
        >
    </span>
</div>
