{% extends 'base.html' %}
{% block title %}Agenda · {{ title }}{% endblock %}
{% block content %}
<div class="head">
  <div><div class="kicker">Agenda</div><h1>{{ title }}</h1></div>
  <div class="actions">
    <form method="get" action="{{ url_for('calendar_view') }}">
      <input type="hidden" name="m" value="{{ month.strftime('%Y-%m') }}">
      <select class="form-select w-auto" name="u" onchange="this.form.submit()" aria-label="Wiens agenda">
        <option value="all" {{ 'selected' if who == 'all' }}>Iedereen</option>
        <option value="me" {{ 'selected' if who == 'me' }}>Mijn agenda</option>
        {% for u in USERS if u.id != g.user.id %}<option value="{{ u.id }}" {{ 'selected' if who == u.id|string }}>{{ u.name }}</option>{% endfor %}
      </select>
    </form>
    <a class="btn btn-outline-secondary" href="{{ url_for('calendar_view', m=prev) }}" aria-label="Vorige maand">‹</a>
    {% if month.strftime('%Y-%m') != this_month %}<a class="btn btn-outline-secondary" href="{{ url_for('calendar_view', m=this_month) }}">Vandaag</a>{% endif %}
    <a class="btn btn-outline-secondary" href="{{ url_for('calendar_view', m=next) }}" aria-label="Volgende maand">›</a>
    <a class="btn btn-primary" href="{{ url_for('calendar_edit') }}">Nieuwe afspraak</a>
  </div>
</div>

{% macro item(i) %}
  <a class="cal-ev {{ i.color }}{{ ' task' if i.kind == 'task' else (' allday' if i.all_day else '') }}" href="{{ i.url }}"
     title="{{ i.title }} · {{ i.when }}{% if i.contact %} · {{ i.contact }}{% endif %}{% if i.user %} · {{ i.user }}{% endif %}">
    {%- if i.kind == 'task' %}☐ {% elif not i.all_day %}<span class="t">{{ i.start.strftime('%H:%M') }}</span>{% endif -%}
    {{ i.title }}{% if i.repeats %} ↻{% endif %}
  </a>
{% endmacro %}

<div class="card"><div class="card-body">
  <table class="cal d-none d-md-table">
    <thead><tr>{% for d in DAYS %}<th scope="col">{{ d }}</th>{% endfor %}</tr></thead>
    <tbody>
    {% for week in weeks %}
      <tr>
      {% for d in week %}
        <td class="{{ 'out' if d.month != month.month }}{{ ' today' if d.isoformat() == today }}">
          <a class="cal-num" href="{{ url_for('calendar_edit', date=d.isoformat()) }}" aria-label="Afspraak op {{ day_label(d) }}">{{ d.day }}</a>
          {% for i in by_day.get(d, []) %}{{ item(i) }}{% endfor %}
        </td>
      {% endfor %}
      </tr>
    {% endfor %}
    </tbody>
  </table>

  <div class="d-md-none">
    {% set ns = namespace(any=false) %}
    {% for week in weeks %}{% for d in week if d.month == month.month and by_day.get(d) %}
      {% set ns.any = true %}
      <div class="cal-ld{{ ' today' if d.isoformat() == today }}">
        <a class="cal-ldate" href="{{ url_for('calendar_edit', date=d.isoformat()) }}"><b>{{ d.day }}</b><span>{{ DAYS[d.weekday()] }}</span></a>
        <div class="cal-items">{% for i in by_day[d] %}{{ item(i) }}{% endfor %}</div>
      </div>
    {% endfor %}{% endfor %}
    {% if not ns.any %}<p class="empty">Geen afspraken of taken in {{ title|lower }}.</p>{% endif %}
  </div>

  {% if who == 'all' and USERS|length > 1 %}
  <div class="cal-legend">{% for u in USERS %}<span class="{{ user_color(u.id) }}">{{ u.name }}</span>{% endfor %}<span style="--u: transparent; ">☐ taak</span></div>
  {% endif %}
</div></div>
<p class="hint">Je eigen agenda op je telefoon of computer? Zie <a href="{{ url_for('account', _anchor='agenda') }}">Mijn account › Agenda koppelen</a>.</p>
{% endblock %}