{% extends "base.html" %}{% load i18n crm_tags %}
{% block title %}{% translate "Shifts" %}{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <h1>{% translate "Shifts" %}</h1>
    <p>{% blocktranslate trimmed with start=monday|date:"j M" end=sunday|date:"j M Y" %}Week of {{ start }} to {{ end }}.{% endblocktranslate %}
      {% blocktranslate trimmed with ds=times.day_starts|time:"H:i" de=times.day_ends|time:"H:i" ns=times.night_starts|time:"H:i" ne=times.night_ends|time:"H:i" %}Day shift {{ ds }}–{{ de }}, night shift {{ ns }}–{{ ne }}.{% endblocktranslate %}</p>
  </div>
  <div class="actions">
    <a class="btn" href="?week={{ prev_week|date:'Y-m-d' }}" aria-label="{% translate 'Previous week' %}">‹ {{ prev_week|date:"j M" }}</a>
    {% if monday != this_week %}<a class="btn" href="?week={{ this_week|date:'Y-m-d' }}">{% translate "This week" %}</a>{% endif %}
    <a class="btn" href="?week={{ next_week|date:'Y-m-d' }}" aria-label="{% translate 'Next week' %}">{{ next_week|date:"j M" }} ›</a>
    <a class="btn" href="?week={{ monday|date:'Y-m-d' }}&amp;export=csv">{% translate "Download (CSV)" %}</a>
    {% if user.may_plan_shifts %}<a class="btn btn-primary" href="{% url 'shifts_edit' %}?week={{ monday|date:'Y-m-d' }}">{% translate "Plan this week" %}</a>{% endif %}
  </div>
</div>

{% if mine %}
<div class="my-shifts">
  <strong>{% translate "Your shifts this week" %}</strong>
  {% for day, sh in mine %}<span class="pill shift-{{ sh.period }}">{{ day|date:"D j M" }} · {% if sh.period == "day" %}{% translate "Day" context "shift" %}{% else %}{% translate "Night" context "shift" %}{% endif %} {{ sh.start|clock }}–{{ sh.end|clock }}</span>{% endfor %}
</div>
{% endif %}

{% if not rota.shifts %}
<div class="panel empty" style="margin-bottom:16px"><strong>{% translate "No shifts planned for this week." %}</strong>
  {% if user.may_plan_shifts %}<a href="{% url 'shifts_edit' %}?week={{ monday|date:'Y-m-d' }}">{% translate "Plan this week" %}</a>{% else %}{% translate "An administrator plans the shifts." %}{% endif %}</div>
{% endif %}

<div class="rota" role="table" aria-label="{% translate 'Shifts' %}">
  <div class="rota-head" role="row">
    <span role="columnheader">{% translate "Date" %}</span>
    <span role="columnheader"><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg> {% translate "Day shift" %} <small>{{ times.day_starts|time:"H:i" }}–{{ times.day_ends|time:"H:i" }}</small></span>
    <span role="columnheader"><svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg> {% translate "Night shift" %} <small>{{ times.night_starts|time:"H:i" }}–{{ times.night_ends|time:"H:i" }}</small></span>
  </div>
  {% for row in rota.rows %}
  <div class="rota-row{% if row.is_today %} today{% endif %}" role="row">
    <div class="rota-day" role="rowheader"><strong>{{ row.day|date:"l" }}</strong> <span class="muted">{{ row.day|date:"j M" }}</span>{% if row.is_today %} <span class="pill today">{% translate "Today" %}</span>{% endif %}</div>
    {% for sh in row.shifts %}
    <div class="rota-cell shift-{{ sh.period }}{% if sh.now %} now{% endif %}{% if not sh.people %} nobody{% endif %}" role="cell">
      <span class="rota-label">{% if sh.period == "day" %}{% translate "Day shift" %}{% else %}{% translate "Night shift" %}{% endif %}{% if sh.now %} <span class="pill online">{% translate "On now" %}</span>{% endif %}</span>
      {% for e in sh.people %}
        <span class="rota-person{% if e.mine %} mine{% endif %}">{{ e.user.display_name }}{% if e.status %} <span class="att {{ e.tone }}">{{ e.label }}</span>{% endif %}</span>
      {% empty %}
        <span class="rota-none">{% translate "No one" %}</span>
      {% endfor %}
    </div>
    {% endfor %}
  </div>
  {% endfor %}
</div>
{% if planners %}<p class="muted small" style="margin-top:12px">{% translate "Shifts are planned by" %} {% for p in planners %}{{ p.display_name }}{% if not forloop.last %}, {% endif %}{% endfor %}. {% translate "Ask them to change the rota." %}</p>{% endif %}
{% if has_agents %}<p class="muted small" style="margin-top:12px">{% translate "For agents, shifts that have started show whether they signed in, from attendance. Late means more than 15 minutes after the shift started." %}</p>{% endif %}
{% endblock %}