{# A period navigator (components/period.py). Every control is a link or a GET
   form over the current query string, so the view stays bookmarkable and the
   header works without JavaScript; with a target, Unpoly swaps that fragment
   and keeps history. #}
{% macro follow() -%}
  {%- if c.target %} up-follow up-target="{{ c.target }}" up-history="true" up-scroll="false"{% endif -%}
{%- endmacro %}
<nav id="{{ base }}" class="fcu-period {{ c.css_class if c.css_class }}" aria-label="{{ labels.nav }}">
  <div class="fcu-period-steps">
    {% if prev_url %}
      <a class="fcu-btn fcu-btn--secondary fcu-period-btn" href="{{ prev_url }}" rel="prev"
         title="{{ labels.earlier }}" aria-label="{{ labels.earlier }}"{{ follow() }}>{{ icon("previous") }}</a>
    {% else %}
      <span class="fcu-btn fcu-btn--secondary fcu-period-btn is-disabled" role="link" aria-disabled="true"
            title="{{ labels.earlier }}" aria-label="{{ labels.earlier }}">{{ icon("previous") }}</span>
    {% endif %}
    {% if today_url %}
      <a class="fcu-btn fcu-btn--secondary fcu-period-today" href="{{ today_url }}"{{ follow() }}>{{ labels.today }}</a>
    {% endif %}
    {% if next_url %}
      <a class="fcu-btn fcu-btn--secondary fcu-period-btn" href="{{ next_url }}" rel="next"
         title="{{ labels.later }}" aria-label="{{ labels.later }}"{{ follow() }}>{{ icon("next") }}</a>
    {% else %}
      <span class="fcu-btn fcu-btn--secondary fcu-period-btn is-disabled" role="link" aria-disabled="true"
            title="{{ labels.later }}" aria-label="{{ labels.later }}">{{ icon("next") }}</span>
    {% endif %}
  </div>
  {% if c.label is not none %}<span class="fcu-period-label">{{ slot(c.label) }}</span>{% endif %}
  {% if c.jump %}
    <details class="fcu-period-jump">
      <summary class="fcu-btn fcu-btn--secondary fcu-period-btn" title="{{ labels.jump }}" aria-label="{{ labels.jump }}">{{ icon("jump_date") }}</summary>
      <form class="fcu-period-panel" method="get" action="{{ action }}"
            {%- if c.target %} up-submit up-target="{{ c.target }}" up-history="true" up-scroll="false"{% endif %}>
        {{ hiddens }}
        <label class="fcu-period-field">
          <span>{{ labels.jump }}</span>
          <input type="date" name="{{ c.param }}" value="{{ start }}" class="fcu-form-control" required>
        </label>
        {% if c.count is not none %}
          <label class="fcu-period-field">
            <span>{{ labels.count }}</span>
            <input type="number" name="{{ c.count_param }}" value="{{ c.count }}" min="1"
                   {%- if c.max_count %} max="{{ c.max_count }}"{% endif %} class="fcu-form-control fcu-period-count">
          </label>
        {% endif %}
        <button type="submit" class="fcu-btn fcu-btn--primary">{{ labels.go }}</button>
      </form>
    </details>
  {% endif %}
  {% if kinds %}
    <ul class="fcu-period-kinds" aria-label="{{ labels.kinds }}">
      {% for k in kinds %}
        <li>
          {%- if k.current %}<a class="fcu-btn fcu-btn--primary fcu-period-kind" href="{{ k.url }}" aria-current="true"{{ follow() }}>{{ k.label }}</a>
          {%- else %}<a class="fcu-btn fcu-btn--secondary fcu-period-kind" href="{{ k.url }}"{{ follow() }}>{{ k.label }}</a>{% endif -%}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
  {% for e in c.extra %}{{ slot(e) }}{% endfor %}
</nav>