{% load static %}
{% load thumbnail %}
<div class="section">
  <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 not current_live_lesson %} timing__item_bg{% endif %} js-timing-item">
          <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">
                {% for image in school_schedule.schoolschedule_images.all %}
                <a class="timing__work" href="#">
                  {% thumbnail image.img.image "48x48" crop="center" as im %}
                  <img class="timing__pic" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
                  {% endthumbnail %}
                </a>
                {% endfor %}
              </div>
              {% endif %}
            </div>
          </div>
          <div class="timing__cell">
            <button class="timing__toggle js-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 %}
        {% comment %}
        <div class="timing__item js-timing-item">
          <div class="timing__cell">
            <div class="timing__info">
              <div class="timing__day">вторник</div>
              <div class="timing__date">3 апреля</div>
            </div>
            <div class="timing__buy">
              <div class="timing__time">17:00 (МСК)</div>
              <a class="timing__btn btn" href="#">купить</a>
            </div>
          </div>
          <div class="timing__cell">
            <div class="timing__preview">
              <img class="timing__pic" src="{% static 'img/user.jpg' %}">
            </div>
          </div>
          <div class="timing__cell">
            <div class="timing__title">Живопись,
              <span class="bold">Олени</span>
            </div>
            <div class="timing__content">Однажды он затеял скандал на торговой площади ради леденца, вокруг собралась толпа, и полицейские попросили хозяина
              лавки открыть её во время сиесты и подарить мальчику сладость.</div>
            <div class="timing__more">
              <div class="timing__head">Материалы</div>
              <div class="timing__row">
                <div class="timing__col">
                  <div class="timing__text">
                    <p>У него была сестра, Анна Мария Дали (исп. Anna Maria Dalí, 6 января 1908 — 16 мая 1989), и старший брат
                      (12 октября 1901 — 1 августа 1903), который умер от менингита.</p>
                  </div>
                </div>
                <div class="timing__col">
                  <div class="timing__text">
                    <ul>
                      <li>Кисть</li>
                      <li>Карандаш</li>
                      <li>Бумага акварекльная А4</li>
                      <li>Мелки</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="timing__head">Результаты прошлых уроков</div>
              <div class="timing__works">
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
              </div>
            </div>
          </div>
          <div class="timing__cell">
            <button class="timing__toggle js-timing-toggle">
              <svg class="icon icon-arrow-down">
                <use xlink:href="{% static 'img/sprite.svg' %}#icon-arrow-down"></use>
              </svg>
            </button>
          </div>
        </div>
        <div class="timing__item js-timing-item">
          <div class="timing__cell">
            <div class="timing__info">
              <div class="timing__day">среда</div>
              <div class="timing__date">4 апреля</div>
            </div>
            <div class="timing__buy">
              <div class="timing__time">17:00 (МСК)</div>
              <a class="timing__btn btn" href="#">купить</a>
            </div>
          </div>
          <div class="timing__cell">
            <div class="timing__preview">
              <img class="timing__pic" src="{% static 'img/user.jpg' %}">
            </div>
          </div>
          <div class="timing__cell">
            <div class="timing__title">Пластелин,
              <span class="bold">Лесные приключения Барри</span>
            </div>
            <div class="timing__content">Однажды он затеял скандал на торговой площади ради леденца</div>
            <div class="timing__more">
              <div class="timing__head">Материалы</div>
              <div class="timing__row">
                <div class="timing__col">
                  <div class="timing__text">
                    <p>У него была сестра, Анна Мария Дали (исп. Anna Maria Dalí, 6 января 1908 — 16 мая 1989), и старший брат
                      (12 октября 1901 — 1 августа 1903), который умер от менингита.</p>
                  </div>
                </div>
                <div class="timing__col">
                  <div class="timing__text">
                    <ul>
                      <li>Кисть</li>
                      <li>Карандаш</li>
                      <li>Бумага акварекльная А4</li>
                      <li>Мелки</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="timing__head">Результаты прошлых уроков</div>
              <div class="timing__works">
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
              </div>
            </div>
          </div>
          <div class="timing__cell">
            <button class="timing__toggle js-timing-toggle">
              <svg class="icon icon-arrow-down">
                <use xlink:href="{% static 'img/sprite.svg' %}#icon-arrow-down"></use>
              </svg>
            </button>
          </div>
        </div>
        <div class="timing__item js-timing-item">
          <div class="timing__cell">
            <div class="timing__info">
              <div class="timing__day">четверг</div>
              <div class="timing__date">5 апреля</div>
            </div>
            <div class="timing__buy">
              <div class="timing__time">17:00 (МСК)</div>
              <a class="timing__btn btn" href="#">купить</a>
            </div>
          </div>
          <div class="timing__cell">
            <div class="timing__preview">
              <img class="timing__pic" src="{% static 'img/user.jpg' %}">
            </div>
          </div>
          <div class="timing__cell">
            <div class="timing__title">Моторика,
              <span class="bold">Тема</span>
            </div>
            <div class="timing__content">Многочисленные комплексы[какие?] и фобии, например, страх перед</div>
            <div class="timing__more">
              <div class="timing__head">Материалы</div>
              <div class="timing__row">
                <div class="timing__col">
                  <div class="timing__text">
                    <p>У него была сестра, Анна Мария Дали (исп. Anna Maria Dalí, 6 января 1908 — 16 мая 1989), и старший брат
                      (12 октября 1901 — 1 августа 1903), который умер от менингита.</p>
                  </div>
                </div>
                <div class="timing__col">
                  <div class="timing__text">
                    <ul>
                      <li>Кисть</li>
                      <li>Карандаш</li>
                      <li>Бумага акварекльная А4</li>
                      <li>Мелки</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="timing__head">Результаты прошлых уроков</div>
              <div class="timing__works">
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
              </div>
            </div>
          </div>
          <div class="timing__cell">
            <button class="timing__toggle js-timing-toggle">
              <svg class="icon icon-arrow-down">
                <use xlink:href="{% static 'img/sprite.svg' %}#icon-arrow-down"></use>
              </svg>
            </button>
          </div>
        </div>
        <div class="timing__item js-timing-item">
          <div class="timing__cell">
            <div class="timing__info">
              <div class="timing__day">пятница</div>
              <div class="timing__date">6 апреля</div>
            </div>
            <div class="timing__buy">
              <div class="timing__time">17:00 (МСК)</div>
              <a class="timing__btn btn" href="#">купить</a>
            </div>
          </div>
          <div class="timing__cell">
            <div class="timing__preview">
              <img class="timing__pic" src="{% static 'img/user.jpg' %}">
            </div>
          </div>
          <div class="timing__cell">
            <div class="timing__title">Акварель,
              <span class="bold">Дикая сирень</span>
            </div>
            <div class="timing__content">Проигрывая в школьных азартных играх, он вёл себя так</div>
            <div class="timing__more">
              <div class="timing__head">Материалы</div>
              <div class="timing__row">
                <div class="timing__col">
                  <div class="timing__text">
                    <p>У него была сестра, Анна Мария Дали (исп. Anna Maria Dalí, 6 января 1908 — 16 мая 1989), и старший брат
                      (12 октября 1901 — 1 августа 1903), который умер от менингита.</p>
                  </div>
                </div>
                <div class="timing__col">
                  <div class="timing__text">
                    <ul>
                      <li>Кисть</li>
                      <li>Карандаш</li>
                      <li>Бумага акварекльная А4</li>
                      <li>Мелки</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="timing__head">Результаты прошлых уроков</div>
              <div class="timing__works">
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
              </div>
            </div>
          </div>
          <div class="timing__cell">
            <button class="timing__toggle js-timing-toggle">
              <svg class="icon icon-arrow-down">
                <use xlink:href="{% static 'img/sprite.svg' %}#icon-arrow-down"></use>
              </svg>
            </button>
          </div>
        </div>
        <div class="timing__item timing__item_bg js-timing-item">
          <div class="timing__cell">
            <div class="timing__info">
              <div class="timing__day">суббота</div>
              <div class="timing__date">7 апреля</div>
            </div>
            <div class="timing__buy">
              <div class="timing__time">17:00 (МСК)</div>
              <a class="timing__btn btn" href="#">купить</a>
            </div>
          </div>
          <div class="timing__cell">
            <div class="timing__preview">
              <img class="timing__pic" src="{% static 'img/user.jpg' %}">
            </div>
          </div>
          <div class="timing__cell">
            <div class="timing__title">Акварель,
              <span class="bold">Сырая техника</span>
            </div>
            <div class="timing__content">Проигрывая в школьных азартных играх, он вёл себя так</div>
            <div class="timing__more">
              <div class="timing__head">Материалы</div>
              <div class="timing__row">
                <div class="timing__col">
                  <div class="timing__text">
                    <p>У него была сестра, Анна Мария Дали (исп. Anna Maria Dalí, 6 января 1908 — 16 мая 1989), и старший брат
                      (12 октября 1901 — 1 августа 1903), который умер от менингита.</p>
                  </div>
                </div>
                <div class="timing__col">
                  <div class="timing__text">
                    <ul>
                      <li>Кисть</li>
                      <li>Карандаш</li>
                      <li>Бумага акварекльная А4</li>
                      <li>Мелки</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="timing__head">Результаты прошлых уроков</div>
              <div class="timing__works">
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
              </div>
            </div>
          </div>
          <div class="timing__cell">
            <button class="timing__toggle js-timing-toggle">
              <svg class="icon icon-arrow-down">
                <use xlink:href="{% static 'img/sprite.svg' %}#icon-arrow-down"></use>
              </svg>
            </button>
          </div>
        </div>
        <div class="timing__item timing__item_bg js-timing-item">
          <div class="timing__cell">
            <div class="timing__info">
              <div class="timing__day">воскресенье</div>
              <div class="timing__date">8 апреля</div>
            </div>
            <div class="timing__buy">
              <div class="timing__time">17:00 (МСК)</div>
              <a class="timing__btn btn" href="#">купить</a>
            </div>
          </div>
          <div class="timing__cell">
            <div class="timing__preview">
              <img class="timing__pic" src="{% static 'img/user.jpg' %}">
            </div>
          </div>
          <div class="timing__cell">
            <div class="timing__title">Акварель,
              <span class="bold">Трансформеры</span>
            </div>
            <div class="timing__content">Проигрывая в школьных азартных играх, он вёл себя так</div>
            <div class="timing__more">
              <div class="timing__head">Материалы</div>
              <div class="timing__row">
                <div class="timing__col">
                  <div class="timing__text">
                    <p>У него была сестра, Анна Мария Дали (исп. Anna Maria Dalí, 6 января 1908 — 16 мая 1989), и старший брат
                      (12 октября 1901 — 1 августа 1903), который умер от менингита.</p>
                  </div>
                </div>
                <div class="timing__col">
                  <div class="timing__text">
                    <ul>
                      <li>Кисть</li>
                      <li>Карандаш</li>
                      <li>Бумага акварекльная А4</li>
                      <li>Мелки</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="timing__head">Результаты прошлых уроков</div>
              <div class="timing__works">
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
                <a class="timing__work" href="#">
                  <img class="timing__pic" src="{% static 'img/user.jpg' %}">
                </a>
              </div>
            </div>
          </div>
          <div class="timing__cell">
            <button class="timing__toggle js-timing-toggle">
              <svg class="icon icon-arrow-down">
                <use xlink:href="{% static 'img/sprite.svg' %}#icon-arrow-down"></use>
              </svg>
            </button>
          </div>
        </div>
        {% endcomment %}
      </div>
      <div class="timing__foot">
        {% include './pay_btn.html' %}
        <a class="timing__print" href="#">Распечатать расписание
          <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>