{% load static %} {% load thumbnail %}
<div class="timing__item{% if school_schedule.weekday > 5 %} timing__item_bg{% endif %} js-timing-item js-timing-toggle{% if not school_schedule.weekday in school_schedules_purchased %} disable{% endif %}">
  <div class="timing__cell">
    <div class="timing__info">
      <div class="timing__day{% if school_schedule.is_online %} active{% endif %}">
        {{ school_schedule }}
      </div>
      {% if live_lesson %}
      <div class="timing__date">{{ live_lesson.date }}</div>
      {% endif %}
    </div>
    <div class="timing__buy">
      <div class="timing__time">{{ school_schedule.start_at }} (МСК)</div>
      {% if school_schedule.weekday in school_schedules_purchased %}
      {% if live_lesson %}
      {% include './open_lesson.html' %}
      {% endif %}
      {% else %}
      {% include './pay_btn.html' %}
      {% endif %}
    </div>
    {% comment %}
    <!-- это нужно чтобы в попапе продления школы всегда знать какие дни выбраны(куплены) -->
    {% endcomment %}
    <span style="display: none;" data-purchased="{{ school_schedule.weekday }}"></span>
  </div>
  <div class="timing__cell">
    <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' %}" width="70px" height="70px" />
      {% endthumbnail %}
    </div>
  </div>
  <div class="timing__cell">
    <div class="timing__title">{{ school_schedule.title }}{% if live_lesson %},
      <span class="bold">{{ live_lesson.title }}</span>
      {% endif %}
    </div>
    {% if live_lesson %}
    <div class="timing__content">{{ 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">
        {% 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>