{% extends "base.html" %}

{%- block control -%}<section>
    <style>
      .multi { display: flex }
      ul.control, .multi > ul {
        display: grid;
        gap: 5px;
        grid-template-columns: repeat(3, min-content);
        list-style-type: none;
      }
    </style>

    <p><a href="-year{{Q}}" title="Past year">↓</a>
        {% if input.inputType != "time" %}
        <a href="year/{{Q}}" title="Edit year">{{ T.year }}</a>
        <a href="+year{{Q}}" title="Next year">↑</a>

        <a href="-month{{Q}}" title="Past month">↓</a>
        {{ T.month }}
        <a href="+month{{Q}}" title="Next month">↑</a>
        {% endif %}

        {% if input.inputType != "month" %}
        {% if input.inputType != "time" %}
        <a href="-date{{Q}}" title="Past day">↓</a>
        {{ T.date }}
        <a href="+date{{Q}}" title="Next day">↑</a>
        {% endif %}

        {% if input.inputType != "date" %}
        <a href="-hour{{Q}}" title="Past hour">↓</a>
        {{ T.hour|pad2 }}
        <a href="+hour{{Q}}" title="Next hour">↑</a>
        :
        <a href="-minute{{Q}}" title="Past minute">↓</a>
        {{ T.minute|pad2 }}
        <a href="+minute{{Q}}" title="Next minute">↑</a>
        <a href="meridiem{{Q}}" title="Toggle AM/PM">{{ T.meridiem }}</a>

        {% if input.inputType != "datetime-local" && input.inputType != "time" %}
        <a href="-zone{{Q}}" title="Previous timezone">↓</a>
        <a href="zone/{{Q}}">{{ T.zone }}</a>
        <a href="+zone{{Q}}" title="Next zone">↑</a></p>
        {% endif %}
        {% endif %}
        {% endif %}
    <p><a href="now{{Q}}" title="Select current date & time">Now</a></a>

    <div class="multi">
      {% if input.inputType != "time" %}
      <ul>
        <li><a href="month=0{{Q}}">January</a></li>
        <li><a href="month=1{{Q}}">Febuary</a></li>
        <li><a href="month=2{{Q}}">March</a></li>
        <li><a href="month=3{{Q}}">April</a></li>
        <li><a href="month=4{{Q}}">May</a></li>
        <li><a href="month=5{{Q}}">June</a></li>
        <li><a href="month=6{{Q}}">July</a></li>
        <li><a href="month=7{{Q}}">August</a></li>
        <li><a href="month=8{{Q}}">September</a></li>
        <li><a href="month=9{{Q}}">October</a></li>
        <li><a href="month=10{{Q}}">November</a></li>
        <li><a href="month=11{{Q}}">December</a></li>
      </ul>
      {% endif %}

      {% if input.inputType != "month" %}
      {% if input.inputType != "time" %}
      <ul style="grid-template-columns: repeat(7, min-content)">
        {% for i in 1|seqTo(T.daysInMonth) %}
          <li {% if i == 1 %}style="grid-column: {{ T.monthStart }}"{% endif %}>
            <a href="date={{ i }}{{Q}}">{{ i }}</a>
          </li>
        {% endfor %}
      </ul>
      {% endif %}

      {% if input.inputType != "date" %}
      <ul>{% for i in 1|seqTo(12) %}
        <li><a href="hour={{ i }}{{Q}}">{{ i|pad2 }}:{{ T.minute|pad2 }}</a></li>
      {% endfor %}</ul>
      <ul>{% for i in 0|seqTo(5, 55) %}
        <li><a href="minute={{ i }}{{Q}}">{{ T.hour|pad2 }}:{{ i|pad2 }}</a></li>
      {% endfor %}</ul>
      {% endif %}
      {% endif %}
    </div>
</section>{%- endblock -%}