{% extends "base.html" %}

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

    <p><a href="-year" title="Past year">↓</a>
        <a href="year/" title="Edit year">{{ year }}</a>
        <a href="+year" title="Next year">↑</a>
        <a href="epoch" title="Toggle BCE/CE">{{ epoch }}</a>

        <a href="-month" title="Past month">↓</a>
        {{ month }}
        <a href="+month" title="Next month">↑</a>

        <a href="-date" title="Past day">↓</a>
        {{ date }}
        <a href="+date" title="Next day">↑</a>

        <a href="-hour" title="Past hour">↓</a>
        {{ hour }}
        <a href="+hour" title="Next hour">↑</a>
        :
        <a href="-minute" title="Past minute">↓</a>
        {{ minute }}
        <a href="+minute" title="Next minute">↑</a>
        <a href="meridiem" title="Toggle AM/PM">{{ meridiem }}</a>

        <a href="-zone" title="Previous timezone">↓</a>
        {{ zone }}
        <a href="+zone" title="Next zone">↑</a></p>
    <p><a href="now" title="Select current date & time">Now</a></a>

    <div class="multi">
      <ul>
        <li><a href="month:0">January</a></li>
        <li><a href="month:1">Febuary</a></li>
        <li><a href="month:2">March</a></li>
        <li><a href="month:3">April</a></li>
        <li><a href="month:4">May</a></li>
        <li><a href="month:5">June</a></li>
        <li><a href="month:6">July</a></li>
        <li><a href="month:7">August</a></li>
        <li><a href="month:8">September</a></li>
        <li><a href="month:9">October</a></li>
        <li><a href="month:10">November</a></li>
        <li><a href="month:11">December</a></li>
      </ul>

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

      <ul>{% for i in 1|seqTo(12) %}
        <li><a href="hour:{{ i }}">{{ i }}:{{ minute }}</a></li>
      {% endfor %}</ul>
      <ul>{% for i in 0|seqTo(60, 5) %}
        <li><a href="minute:{{ i }}">{{ hour }}:{{ i|pad(2) }}</a></li>
      {% endfor %}</ul>
    </div>
</section>{%- endblock -%}