{% extends "templates/lilcity/index.html" %}
{% load static %}
{% load category_items from lilcity_category %}

{% block ogimage %}http://{{request.META.HTTP_HOST}}{% static 'img/og_courses.jpg' %}{% endblock ogimage %}
{% block content %}
  <div class="main" style="background-image: url({% static 'img/bg-1.jpg' %});">
    <div class="main__center center">
      <div class="main__title">Онлайн-курсы LilCity</div>
    </div>
  </div>
  <div class="section">
    <div class="section__center center">
      <div class="text text_lg">
        <p>Учите и развивайте креативное мышление когда и где угодно. Если вам не совсем удобно заниматься с нами в прямом эфире каждый день, как в
          нашей онлайн-школе, специально для вас мы делаем отдельные уроки в записи, которые вы можете проходить,
          когда вам будет удобно.</p><img class="text__curve text__curve_four" src="{% static 'img/curve-4.svg' %}" width="155"></div>
      <div class="head">
        <div class="head__title title title_center">Курсы</div>
        <div class="head__right">
          <div class="head__field field">
            <div class="field__wrap">
              <div class="field__select select js-select{% if category %} selected{% endif %}" data-category-select>
                <div class="select__head js-select-head">Категории</div>
                <div class="select__drop js-select-drop">
                  <div class="select__option js-select-option{% if not category.0 %} active{% endif %}" data-category-option>
                    <div class="select__title">Все категории</div>
                  </div>
                  {% category_items category %}
                </div>
                <input class="select__input" type="hidden"></div>
            </div>
          </div>
          <div class="head__field field">
            <div class="field__wrap">
              <div class="field__select select js-select{% if age.0 %} selected{% endif %}">
                <div class="select__head js-select-head">{% if age_name %}{{ age_name }}{% else %}Возраст{% endif %}</div>
                <div class="select__drop js-select-drop">
                  <div class="select__option js-select-option{% if not age.0 %} active{% endif %}" data-age-option>
                    <div class="select__title">Любой возраст</div>
                  </div>
                  {% for a in ages %}
                    <div class="select__option js-select-option{% if age and age.0 == a.0 %} active{% endif %}" data-age-option
                         data-age="{{ a.0 }}" data-age-name="{{ a.1 }}">
                      <div class="select__title">{{ a.1 }}</div>
                    </div>
                  {% endfor %}
                </div>
                <input class="select__input" type="hidden"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="courses">
        <div class="courses__list">
          {% include "course/course_items.html" %}
        </div>
        <div class="courses__load load">
          {% if page_obj.has_next %}
          <button class="load__btn btn" data-next-page="{{ page_obj.next_page_number }}">Показать еще</button>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  {% include "templates/blocks/game.html" %}
{% endblock content %}