{% load static %}
{% load thumbnail %}
<div class="section" id="schedule">
  <div class="section__center center center_md">
    <div class="title title_center">Расписание</div>
    <div class="timing js-timing">
      <div class="timing__week">
        {% for school_schedule in school_schedules %}
        {% with current_live_lesson=school_schedule.current_live_lesson %}
        <div class="timing__item{% if school_schedule.weekday > 5 %} timing__item_bg{% endif %} js-timing-item js-timing-toggle">
          <div class="timing__cell">
            <div class="timing__info">
              <div class="timing__day{% if school_schedule.is_online %} active{% endif %}">
                {{ school_schedule }}
              </div>
              {% if current_live_lesson %}
              <div class="timing__date">{{ current_live_lesson.date }}</div>
              {% endif %}
            </div>
            <div class="timing__buy">
              <div class="timing__time">{{ school_schedule.start_at }} (МСК)</div>
              {% include './pay_btn.html' %}
            </div>
          </div>
          <div class="timing__cell">
            <div class="timing__preview">
              {% thumbnail current_live_lesson.cover.image "70x70" crop="center" as im %}
              <img class="timing__pic" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
              {% empty %}
              <img class="timing__pic" src="{% static 'img/no_cover.png' %}" width="70px" height="70px"/>
              {% endthumbnail %}
            </div>
          </div>
          <div class="timing__cell">
            <div class="timing__title">{{ school_schedule.title }}{% if current_live_lesson %},
              <span class="bold">{{ current_live_lesson.title }}</span>
              {% endif %}
            </div>
            {% if current_live_lesson %}
            <div class="timing__content">{{ current_live_lesson.short_description }}</div>
            {% endif %}
            <div class="timing__more">
              <div class="timing__head">Материалы</div>
              <div class="timing__row">
                <div class="timing__col">
                  <div class="timing__text">
                    <p>{{ school_schedule.description }}</p>
                  </div>
                </div>
                <div class="timing__col">
                  <div class="timing__text">
                    {{ school_schedule.materials }}
                  </div>
                </div>
              </div>
              {% if school_schedule.schoolschedule_images.exists %}
              <div class="timing__head">Результаты прошлых уроков</div>
              <div class="timing__works gallery">
                {% for image in school_schedule.schoolschedule_images.all %}
                {% thumbnail image.img.image "48x48" crop="center" as im %}
                <a class="timing__work" href="{{ image.img.image.url }}">
                  <img class="timing__pic" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
                </a>
                {% endthumbnail %}
                {% endfor %}
              </div>
              {% endif %}
            </div>
          </div>
          <div class="timing__cell">
            <button class="timing__toggle">
              <svg class="icon icon-arrow-down">
                <use xlink:href="{% static 'img/sprite.svg' %}#icon-arrow-down"></use>
              </svg>
            </button>
          </div>
        </div>
        {% endwith %}
        {% endfor %}
      </div>
      <div class="timing__foot">
        {% include './pay_btn.html' %}
        <a target="_blank" class="timing__print" href="{% url 'school:school_schedules-print' %}">Распечатать расписание
          <span class="bold">чтобы не забыть</span>
          <svg class="icon icon-print">
            <use xlink:href="{% static 'img/sprite.svg' %}#icon-print"></use>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>