{% comment %}
Render a navigation menu for dates

Context:
- url_name: url name
- date: current date
- input_type: date input type
- dates: dates to display as a list of `(date|None, title|None)`.

An empty date results to a title or a separator
{% endcomment %}
{% load i18n %}

<div class="media" role="menu"
        aria-label="{% translate "pick a date" %}">
    <div class="media-content">
        <div class="tabs is-toggle">
            <ul>
                {% for day in dates %}
                <li class="{% if day == date %}is-active{% endif %}">
                    <a href="{% url url_name date=day %}">
                        {{ day|date:"D. d" }}
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <div class="media-right">
        <form action="{% url url_name %}" method="GET" class="navbar-body"
                aria-label="{% translate "Jump to date" %}">
            <div class="field has-addons">
                <div class="control has-icons-left">
                    <span class="icon is-small is-left"><span class="far fa-calendar"></span></span>
                    <input type="{{ date_input|default:"date" }}" class="input date"
                           name="date" value="{{ date|date:"Y-m-d" }}">
                </div>
                <div class="control">
                    {% comment %}Translators: form button to select a date{% endcomment %}
                    <button class="button is-primary">{% translate "Go" %}</button>
                </div>
            </div>
        </form>
    </div>
</div>
