{% load static %} {% load thumbnail %}
<div class="timing__item{% if school_schedule.weekday > 5 %} timing__item_bg{% endif %} js-timing-item js-timing-toggle {% if print %}open{% endif %} {% if purchased and not school_schedule.weekday in school_schedules_purchased %} disable{% endif %}">
  <div class="timing__cell timing__cell--info">
    <div class="timing__info">
      <div class="timing__day{% if school_schedule.is_online %} active{% endif %}">
        {{ school_schedule }}
      </div>
      {% if purchased and live_lesson %}
      <div class="timing__date">{{ live_lesson.date }}</div>
      {% endif %}
      <div class="timing__time">{{ school_schedule.start_at }} (МСК)</div>
      <div class="timing__buy">
        {% if purchased %}
          {% if school_schedule.weekday in school_schedules_purchased %}
            {% if live_lesson and live_lesson.title %}
              {% include './open_lesson.html' %}
            {% endif %}
          {% else %}
            {% include './day_pay_btn.html' %}
          {% endif %}
        {% endif %}
      </div>
    </div>
    {% comment %}
    <!-- это нужно чтобы в попапе продления школы всегда знать какие дни выбраны(куплены) -->
    {% endcomment %}
    {% if school_schedule.weekday in school_schedules_purchased %}
    <span style="display: none;" data-purchased="{{ school_schedule.weekday }}"></span>
    {% endif %}
  </div>
  <div style="display: flex; width: 100%;">
    <div class="timing__cell timing__cell--preview">
        <div class="timing__preview">
          {% thumbnail 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' %}" style="width: 70px; height: 70px;" />
          {% endthumbnail %}
        </div>
    </div>
    <div class="timing__cell timing__cell--content" {% if print %}style="flex: 1 0 0;"{% endif %}>
      <div class="timing__title">{{ school_schedule.title }}{% if live_lesson and live_lesson.title %},
        <span class="bold">{{ live_lesson.title }}</span>
        {% endif %}
      </div>
      <div class="timing__content">
      {% if live_lesson and live_lesson.short_description %}
        {{ live_lesson.short_description }}
      {% else %}
        {{ school_schedule.description }}
      {% endif %}
      </div>
      <div class="timing__more">
        <div class="timing__head">Материалы</div>
        <div class="timing__row">
          {% if print %}
            <div class="timing__col" style="flex: 0 0 100%;">
              <div class="timing__text">
                {{ school_schedule.materials }}
              </div>
            </div>
          {% else %}
            <div class="timing__text">
              {{ school_schedule.materials }}
            </div>
          {% endif %}
        </div>
        {% if not print and 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>
    {% if not print %}
    <div class="timing__cell timing__cell--toggle">
      <button class="timing__toggle">
        <svg class="icon icon-arrow-down">
          <use xlink:href="{% static 'img/sprite.svg' %}#icon-arrow-down"></use>
        </svg>
      </button>
    </div>
    {% endif %}
  </div>
</div>