{% extends "templates/lilcity/index.html" %}
{% load static %}
{% load data_liked from data_liked %}
{% load rupluralize from plural %}
{% block title %}{{ course.title }} - {{ block.super }}{% endblock title %}
{% comment %} seo tags {% endcomment %}
{% block description %}{{ course.short_description | striptags }}{% endblock description%}
{% block twurl %}{{ request.build_absolute_uri }}{% endblock twurl %}
{% block ogtitle %}{{ course.title }} - {{ block.super }}{% endblock ogtitle %}
{% block ogurl %}{{ request.build_absolute_uri }}{% endblock ogurl %}
{% if course.cover %}
{% block ogimage %}http://{{request.META.HTTP_HOST}}{% if course.cover %}{{ course.cover.image.url }}{% else %}{% static 'img/og_courses.jpg' %}{% endif %}{% endblock ogimage %}
{% endif %}
{% block ogdescription %}{{ course.short_description | striptags }}{% endblock ogdescription %}

{% block content %}
<div class="section section_border">
  <div class="section__center center center_sm">
    <div class="go">
      <a class="go__item" href="{% if next %}{{next}}{% else %}{% url 'courses' %}{% endif %}">
        <div class="go__arrow">
          <svg class="icon icon-arrow-left">
            <use xlink:href="{% static '/img/sprite.svg' %}#icon-arrow-left"></use>
          </svg>
        </div>
        <div class="go__title">Вернуться</div>
      </a>
      {% if has_full_access %}
      <a class="go__btn btn" href="{% url 'course_edit' course.id %}">Редактировать</a>
      {% endif %}
      {% if not paid and course.price and not has_full_access %}
      <div>
        <a
          class="go__btn btn{% if pending %} btn_gray{% endif %} btn_md"
          {% if user.is_authenticated %}
          {% if not pending %}
          href="{% url 'course-checkout' course.id %}"
          {% endif %}
          {% else %}
          data-popup=".js-popup-auth"
          href="#"
          {% endif %}
          >{% if pending %}ОЖИДАЕТСЯ ПОДТВЕРЖДЕНИЕ ОПЛАТЫ{% else %}КУПИТЬ КУРС{% endif %}</a>
        {% if not paid %}
        <a class="main__btn btn btn_stroke-black" href="{% url 'gift-certificates' %}">Подарить другу</a>
        {% endif %}
      </div>
      {% endif %}
    </div>
    <div
      class="course"
      data-course data-course-id={{ course.id }}
      data-likes-count={{ course.likes.count }}
      >
      <div class="course__head">
        <div class="course__theme theme theme_green">{{ course.category.title | upper }}</div>
        {% data_liked user course as liked %}
        <a
          class="course__likes likes{% if liked %} active{% endif %}"
          {% if not user.is_authenticated %}data-popup=".js-popup-auth"{% endif %}
          data-course-likes
          {% if liked %} data-liked=1 {% else %} data-liked=0 {% endif %}
          data-course-likes-count="{{ course.likes.count }}"
          data-course-id="{{ course.id }}"
          href="#"
          >
          <div class="likes__counter">{{ course.likes.count }}</div>
          <div class="likes__icon">
            <svg class="icon icon-like-bold">
              <use xlink:href="{% static 'img/sprite.svg' %}#icon-like-bold"></use>
            </svg>
            <svg class="icon icon-like-fill-bold">
              <use xlink:href="{% static 'img/sprite.svg' %}#icon-like-fill-bold"></use>
            </svg>
          </div>
        </a>
      </div>
      <div class="course__title title">{{ course.title }}</div>
      <div class="course__content">{{ course.short_description | safe | linebreaks }}</div>
      <a href="{{ course.author.url }}">
        <div class="course__user user">
          {% if course.author.photo %}
          <div class="user__ava ava">
            <img class="ava__pic" src="{{ course.author.photo.url }}">
          </div>
          {% else %}
          <div class="user__ava ava">
            <img class="ava__pic" src="{% static 'img/user_default.jpg' %}">
          </div>
          {% endif %}
          <div class="user__info">
            <div class="user__name">{{ course.author.get_full_name }}</div>
          </div>
        </div>
      </a>
      <div class="course__metas">
        <div class="course__meta meta">
          <a class="meta__item" title="Продолжительность курса">
            <div class="meta__icon">
              <svg class="icon icon-time">
                <use xlink:href="{% static 'img/sprite.svg' %}#icon-time"></use>
              </svg>
            </div>
            <div class="meta__title">{{ course.duration | rupluralize:"день,дня,дней" }}</div>
          </a>
          {% if course.price %}
          <div class="meta__item">
            <div class="meta__icon">
              <svg class="icon icon-money">
                <use xlink:href="{% static 'img/sprite.svg' %}#icon-money"></use>
              </svg>
            </div>
            <div class="meta__title">{{ course.price|floatformat:"-2" }}₽</div>
          </div>
          {% endif %}
          <div class="meta__item">
            <div class="meta__icon">
              <svg class="icon icon-showcase">
                <use xlink:href="{% static 'img/sprite.svg' %}#icon-showcase"></use>
              </svg>
            </div>
            <div class="meta__title">{{ course.lessons.count | rupluralize:"урок,урока,уроков" }}</div>
          </div>
          <div class="meta__item">
            <div class="meta__icon">
              <svg class="icon icon-video">
                <use xlink:href="{% static 'img/sprite.svg' %}#icon-video"></use>
              </svg>
            </div>
            <div class="meta__title">{{ course.count_videos_in_lessons }} видео</div>
          </div>
        </div>
      </div>
      <div class="course__actions">
          <a href="{{ course.url }}" class="course__action btn btn_lg{% if not only_lessons %} btn_stroke{% else %} btn_gray{% endif %}">Описание курса</a>
          {% if course.author == request.user and request.user.role >= request.user.AUTHOR_ROLE %}
          <a
            href="{% url 'course-only-lessons' course.id %}"
            class="course__action btn btn_lg{% if only_lessons %} btn_stroke{% else %} btn_gray{% endif %}"
            {% if not user.is_authenticated %}data-popup=".js-popup-auth"{% endif %}
            >УРОКИ
          </a>
          {% elif request.user.role == request.user.ADMIN_ROLE %}
          <a
            href="{% url 'course-only-lessons' course.id %}"
            class="course__action btn btn_lg{% if only_lessons %} btn_stroke{% else %} btn_gray{% endif %}"
            {% if not user.is_authenticated %}data-popup=".js-popup-auth"{% endif %}
            >УРОКИ
          </a>
          {% else %}
          <a
            href="{% if paid or not course.price %}{% url 'course-only-lessons' course.id %}{% else %}#{% endif %}"
            class="course__action btn btn_lg{% if only_lessons %} btn_stroke{% else %} btn_gray{% endif %}"
            >УРОКИ
            {% if not paid and course.price %}
            <svg class="icon icon-lock">
              <use xlink:href="{% static 'img/sprite.svg' %}#icon-lock"></use>
            </svg>
            {% endif %}
          </a>
          {% endif %}
      </div>
    </div>
</div>
{% if user.is_authenticated and course.lessons.exists %}
<div class="section">
  <div class="section__center center center_sm">
    <div class="lessons">
      <div class="lessons__title title">Содержание курса</div>
      <div class="lessons__list">
        {% for lesson in lessons %}
          <div class="lessons__item">
            <div class="lessons__row">
              <div class="lessons__content-wrapper">
                <div class="lessons__subtitle subtitle">{{ forloop.counter }}. {{ lesson.title }}</div>
                <div class="lessons__content">{{ lesson.short_description | truncatechars_html:800 | safe }}</div>
                <a href="{% url 'lesson' pk=lesson.id %}" class="btn btn_stroke">Перейти к уроку</a>
              </div>
              <div class="lessons__preview">
                <div class="lessons__pic-wrapper">
                  <img class="lessons__pic"
                       src="{% if lesson.cover %}{{ lesson.cover.image_thumbnail.url }}{% else %}{% static 'img/no_cover.png' %}{% endif %}">
                </div>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endif %}
<div class="section section_gray">
  <div class="section__center center center_sm">
    <div class="title">Задавайте вопросы:</div>
    <comments obj-type="course" obj-id="{{ course.id }}"></comments>
  </div>
</div>
<div class="section">
  <div class="section__center center center_sm">
    {% include 'templates/blocks/share.html' with share_object_name='курсом' %}
  </div>
</div>
{% endblock content %}