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

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

{% load data_helpers rules static i18n %}

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

{% block browser_title %}{% blocktrans %}Timetable{% endblocktrans %}{% endblock %}
{% block no_page_title %}{% endblock %}
{% block content %}

  {% if smart %}
    <script type="text/javascript" src="{% static "js/helper.js" %}"></script>
    {{ week_select|json_script:"week_select" }}
    <script type="text/javascript" src="{% static "js/chronos/week_select.js" %}"></script>
  {% endif %}

  <div class="row no-margin">
    <div class="col s8 m6 l8 xl9">
      <h1>
        {% trans "Timetable" %} <i>{{ el }}</i>
      </h1>

      {# Show class teacher and deputy class teacher #}
      {% if type.value == "group" and el.owners.all %}
        <h2>{% trans "Group teachers:" %}
          {% for teacher in el.owners.all %}
            <span data-position="bottom" class="tooltipped"
                  data-tooltip="{{ teacher }}">
                            <a href="{% url "timetable" "teacher" teacher.pk %}">
                                {{ teacher.short_name }}</a></span>{% if not forloop.last %},{% endif %}
          {% endfor %}
        </h2>
      {% endif %}
    </div>
    <div class="col s4 m6 l4 xl3 right align-right no-print">
      <a class="waves-effect waves-teal btn-flat btn-flat-medium right hide-on-small-and-down" href="{% url "timetable_print" type.value pk %}">
        <i class="material-icons iconify center" data-icon="mdi:printer-outline"></i>
      </a>
    </div>
  </div>
  <div class="row">
    {% if smart %}
      {# Show if smart #}
      {# Toggle button to regular and smart plan badge #}
      <div class="row s12 m6 left">
        <span class="badge new primary-color left smart-plan-badge">{% trans "SMART PLAN" %}</span>

        <a class="waves-effect waves-light btn-flat no-print"
           href="{% url "timetable_regular" type.value pk "regular" %}">
          <i class="material-icons iconify left" data-icon="mdi:play-box-outline"></i>
          {% trans "Show regular timetable" %}
        </a>

        {% has_perm "alsijil.view_week_rule" user as can_view_week_view %}
        {% if is_alsijil_installed and can_view_week_view %}
          <a class="waves-effect waves-light btn-flat no-print"
            href="{% url "week_view_by_week" year=week.year week=week.week %}">
            <i class="material-icons iconify left" data-icon="mdi:book-open"></i>
            {% trans "View class register of this week" %}
          </a> 
        {% endif %}
      </div>

      {# Week select #}
      {% include "chronos/partials/week_select.html" with wanted_week=week %}

    {% else %}
      {# Show if regular #}
      <a class="waves-effect waves-light btn-flat no-print"
         href="{% url "timetable" type.value pk %}">
        <i class="material-icons iconify left" data-icon="mdi:play-box-outline"></i>
        {% trans "Show SMART PLAN" %}
      </a>

      {% has_perm "alsijil.view_week_rule" user as can_view_week_view %}
      {% if is_alsijil_installed and can_view_week_view %}
        <a class="waves-effect waves-light btn-flat no-print"
          href="{% url "week_view_by_week" year=week.year week=week.week %}">
          <i class="material-icons iconify left" data-icon="mdi:book-open"></i>
          {% trans "View class register of this week" %}
        </a> 
      {% endif %}
    {% endif %}
  </div>

  {% include "core/partials/announcements.html" with announcements=announcements show_interval=1 %}

  {# show full timetable on tablets, laptops and pcs #}
  <div class="timetable-plan hide-on-small-and-down">
    {% include "chronos/partials/week_timetable.html" %}
  </div>

  {# show 5 seperate ones on mobiles #}
  <div class="timetable-plan hide-on-med-and-up">
    {% for weekday in weekdays %}
      <div class="card timetable-mobile-title-card">
        <div class="card-content">
          <span class="card-title">
            {{ weekday.name }}
          </span>
          {% if smart %}
                {{ weekday.date }}
                {% if weekday.holiday %}
                  <br/>{% include "chronos/partials/holiday.html" with holiday=weekday.holiday %}
                {% endif %}
              {% endif %}
        </div>
      </div>
      {% for row in timetable %}
        <div class="row">
          <div class="col s4">
            {% include "chronos/partials/period_time.html" with period=row.period periods=periods %}
          </div>

          {% for col in row.cols %}
            {% if forloop.counter0 == weekday.key %}
              <div class="col s8">
                {# A lesson #}
                {% if row.type == "period" %}
                  {% include "chronos/partials/elements.html" with elements=col %}
                {% else %}
                  {% include "chronos/partials/supervision.html" with supervision=col %}
                {% endif %}
              </div>
            {% endif %}
          {% endfor %}
        </div>
      {% endfor %}
    {% endfor %}
  </div>
{% endblock %}
