{# -*- engine:django -*- #}

{% extends 'core/base.html' %}

{% load i18n static %}

{% block extra_head %}
  <link rel="stylesheet" href="{% static 'css/chronos/timetable.css' %}">
{% endblock %}

{% block browser_title %}{% blocktrans %}Substitutions{% endblocktrans %}{% endblock %}
{% block no_page_title %}{% endblock %}

{% block content %}
  <div class="row no-margin">
    <div class="col s10 m6 no-padding">
      <h4>{% trans "Substitutions" %}</h4>
    </div>
    <div class="col s2 m6 right align-right print-icon">
      <a class="waves-effect waves-teal btn-flat btn-flat-medium right"
         href="{% url "substitutions_print_by_date" day.year day.month day.day %}" target="_blank">
        <i class="material-icons center">print</i>
      </a>
    </div>
  </div>

  <div class="row no-print">
    <div class="col s12 m6 l8">
      {% include "chronos/partials/headerbox.html" %}

      {% include "core/partials/announcements.html" with announcements=announcements show_recipients=1 %}
    </div>
    <div class="col s12 m6 l4 no-padding">
      {% include "chronos/partials/datepicker.html" %}
    </div>
  </div>

  <h5 class="hide-on-small-and-down">{{ day|date:"l" }}, {{ day }}</h5>

  <table class="substitutions striped responsive-table">
    <thead>
    <tr>
      <th><i class="material-icons">people</i></th>
      <th><i class="material-icons">access_time</i></th>
      <th>{% trans "Teacher" %}</th>
      <th>{% trans "Subject" %}</th>
      <th>{% trans "Room" %}</th>
      <th>{% trans "Notes" %}</th>
      <th></th>
    </tr>
    </thead>
    <tbody>
    {% if not substitutions %}
      <td colspan="7">
        <p class="flow-text center">
          {% blocktrans %}No substitutions available.{% endblocktrans %}
        </p>
      </td>
    {% endif %}
    {% for item in substitutions %}
      <tr class="{% include "chronos/partials/subs/colour.html" with item=item %}">
        {# TODO: Extend support for purple (events) #}
        <td>
          {% include "chronos/partials/subs/groups.html" with type=item.type el=item.el %}
        </td>
        <td>
          {% include "chronos/partials/subs/period.html" with type=item.type el=item.el item=item %}
        </td>
        <td>
          {% include "chronos/partials/subs/teachers.html" with type=item.type el=item.el %}
        </td>
        <td>
          {% include "chronos/partials/subs/subject.html" with type=item.type el=item.el %}
        </td>
        <td>
          {% include "chronos/partials/subs/room.html" with type=item.type el=item.el %}
        </td>
        <td>
          <span class="hide-on-med-and-up">
            {% include "chronos/partials/subs/badge.html" with sub=item.el %}
          </span>
          {% include "chronos/partials/subs/comment.html" with el=item.el %}
        </td>
        <td class="hide-on-small-and-down">
          {% include "chronos/partials/subs/badge.html" with sub=item.el %}
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>

{% endblock %}
