{% extends 'timeseer.html' %}

{% from 'macros.html' import alerter %}
{% from 'configure.html' import configure_menu with context %}

{% block menu %}
{{ configure_menu('Date and time') }}
{% endblock %}

{% block main %}
<div class="ts-section py-3 my-3">
    <h2 class="h4">Manage date and time preferences</h2>
</div>

<div class="my-3 py-3">
    {{ alerter() }}

    <div class="alert alert-info">
        Date and time preferences are user specific.
        Changing them here does not change them for other users.
    </div>

    <form method="POST">
        <div class="mb-3">
            <label for="locale">Locale</label>
            {% if has_locale %}
            <input type="text" class="form-control" id="locale" name="locale" aria-describedby="localeHelp" value="{{ locale }}" list="localeList">
            {% else %}
            <input type="text" class="form-control" id="locale" name="locale" aria-describedby="localeHelp" placeholder="{{ locale }}" list="localeList">
            {% endif %}
            <small id="localeHelp" class="form-text text-muted">The locale controls the formatting of dates and times.</small>

            <datalist id="localeList">
                {% for value in available_locales %}
                <option>{{ value }}</option>
                {% endfor %}
            </datalist>
        </div>
        <div class="mb-3">
            <label for="timezone">Time zone</label>
            {% if has_timezone %}
            <input type="text" class="form-control" id="timezone" name="timezone" aria-describedby="timezoneHelp" value="{{ timezone }}" list="timezoneList">
            {% else %}
            <input type="text" class="form-control" id="timezone" name="timezone" aria-describedby="timezoneHelp" placeholder="UTC" list="timezoneList">
            {% endif %}
            <small id="timezoneHelp" class="form-text text-muted">The time zone controls the time zone used when displaying dates.</small>

            <datalist id="timezoneList">
                {% for value in available_timezones %}
                <option>{{ value }}</option>
                {% endfor %}
            </datalist>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
{% endblock %}
