tz-display.html

{% load origin %}
{% origin %}
<div class="tz-display input-group my-3">
    <label class="input-group-text border-primary bg-white fw-bold">Time zone:</label>
    <input type="radio"
           autocomplete="off"
           {% if timezone == "meeting" %}checked{% endif %}
           name="tzradio"
           class="btn-check"
           id="meeting-timezone{{ id_suffix }}"
           onclick="ietf_timezone.use('{{ timezone }}')">
    <label class="btn btn-outline-primary" for="meeting-timezone{{ id_suffix }}">Meeting</label>
    <input type="radio"
           autocomplete="off"
           {% if timezone == "local" %}checked{% endif %}
           name="tzradio"
           class="btn-check"
           id="local-timezone{{ id_suffix }}"
           onclick="ietf_timezone.use('local')">
    <label class="btn btn-outline-primary" for="local-timezone{{ id_suffix }}">Local</label>
    <input type="radio"
           autocomplete="off"
           {% if timezone == "UTC" %}checked{% endif %}
           name="tzradio"
           class="btn-check"
           id="utc-timezone{{ id_suffix }}"
           onclick="ietf_timezone.use('UTC')">
    <label class="btn btn-outline-primary" for="utc-timezone{{ id_suffix }}">UTC</label>
    <select id="timezone-select{{ id_suffix }}"
            class="tz-select select2-field form-select border-primary"
            data-max-entries="1" data-minimum-input-length="0"
            onchange="$('.tz-display input[name=tzradio]').prop('checked', false);">
        {# Avoid blank while loading. JavaScript replaces the option list after init. #}
        <option selected>
            {{ timezone }}
        </option>
    </select>
</div>