{% 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 is_purchased and not school_schedule.weekday in school_schedules_purchased and not is_previous %} 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 }}
        {% if not is_purchased and request.user_agent.is_mobile and school_schedule.trial_lesson %}
        <a class="timing__trial-lesson js-video-modal" href="#" data-trial-lesson="1" data-video-url="{{ school_schedule.trial_lesson }}">Пробный урок</a>
        {% endif %}
      </div>
      {% if is_purchased and live_lesson %}
      <div class="timing__date">{% if request.user_agent.is_mobile %}{{ live_lesson.date|date:"j b" }}{% else %}{{ live_lesson.date|date:"j E" }}{% endif %}</div>
      {% endif %}
      <div class="timing__time">{{ school_schedule.start_at }} (МСК)</div>
      <div class="timing__buy">
        {% if is_purchased and school_schedule.weekday in school_schedules_purchased or is_previous %}
          {% if live_lesson and live_lesson.title %}
            {% include './open_lesson.html' %}
          {% endif %}
        {% else %}
          {% include './day_pay_btn.html' %}
        {% endif %}
        {% if not is_purchased and not request.user_agent.is_mobile and school_schedule.trial_lesson %}
        <a class="timing__trial-lesson js-video-modal" href="#" data-trial-lesson="1" data-video-url="{{ school_schedule.trial_lesson }}">Пробный урок</a>
        {% 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">
          {% comment %}
          {% thumbnail live_lesson.cover.image "70x70" crop="center" as im %}
          <img class="timing__pic" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
          {% empty %}
          {% endcomment %}
          <img class="timing__pic"
               src="{% if school_schedule.cover %}{{ school_schedule.cover.image_thumbnail.url }}{% else %}{% static 'img/no_cover.png' %}{% endif %}"
               style="width: 70px; height: 70px;" />
          {% comment %}{% endthumbnail %}{% endcomment %}
        </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">
      {% comment %}
      {% if live_lesson and live_lesson.short_description %}
        {{ live_lesson.short_description }}
      {% else %}
      {% endcomment %}
        {{ school_schedule.description }}
      {% comment %}{% endif %}{% endcomment %}
      </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>