LilSchool/apps/course/templates/course/course.html

{% 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 }}{% 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 %}{{ request.build_absolute_uri }}{{ course.cover.url }}{% endblock ogimage %}
{% endif %}
{% block ogdescription %}{{ course.short_description }}{% 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>
      <button 
        class="go__btn btn btn_md"
        {% if user.is_authenticated %}
        data-popup=".js-popup-buy"
        {% else %}
        data-popup=".js-popup-auth"
        {% endif %}
        >КУПИТЬ КУРС</button>
    </div>
    <div
      class="course"
      data-course data-course-id={{ course.id }}
      data-likes-count={{ course.likes.count }}
      {% if course.is_deferred_start %}data-future-course data-future-course-time={{ course.deferred_start_at.timestamp }}{% endif %}
      >
      <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 }}</div>
      <a href="{% url 'user' course.author.id %}">
        <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.jpg' %}">
          </div>
          {% endif %}
          <div class="user__info">
            <div class="user__name">{{ course.author.get_full_name }}</div>
            <div class="user__meta">
              <div class="user__date">{{ course.created_at_humanize }}</div>
            </div>
          </div>
        </div>
      </a>
      <div class="course__metas">
        <div class="course__meta meta">
          <div class="meta__item">
            <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>
          </div>
          <div class="meta__item">
            <div class="meta__icon">
              <svg class="icon icon-date">
                <use xlink:href="{% static 'img/sprite.svg' %}#icon-date"></use>
              </svg>
            </div>
            <div class="meta__title">15 ноября</div>
          </div>
          <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>
        </div>
        <div class="course__meta meta">
          <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">12 видео</div>
          </div>
        </div>
      </div>
      <div class="course__actions">
        <button class="course__action btn btn_lg btn_stroke">Описание курса</button>
        <button
          class="course__action btn btn_lg btn_gray"
          {% if not user.is_authenticated %}data-popup=".js-popup-auth"{% endif %}
          >УРОКИ
          <svg class="icon icon-lock">
            <use xlink:href="{% static 'img/sprite.svg' %}#icon-lock"></use>
          </svg>
        </button>
      </div>
      <a class="course__video video" href="#">
        <img class="video__pic" src="{% static 'img/video-1.jpg' %}">
        {% if course.is_deferred_start %}
        <div class="video__soon">
          <div class="video__title">Курс начнется:</div>
          <div class="video__time">{{ course.deferred_start_at_humanize }}</div>
        </div>
        {% else %}
        <svg class="icon icon-play">
          <use xlink:href="{% static 'img/sprite.svg' %}#icon-play"></use>
        </svg>
        {% endif %}
      </a>
      <div class="course__share share share_sm">
        <div class="share__title">Поделиться курсом</div>
        <div class="share__list">
          <div class="likely">
            <div class="facebook">Facebook</div>
            <div class="twitter">Twitter</div>
            <div class="gplus">Google+</div>
            <div class="vkontakte">VK</div>
            <div class="pinterest">Pinterest</div>
          </div>
        </div>
      </div>
    </div>
    {% if course.from_author %}
    <div class="author">
      <div class="author__title title">От автора</div>
      <div class="author__row">
        {% if course.author.photo %}
        <div class="author__ava ava">
          <img class="ava__pic" src="{{ course.author.photo.url }}">
        </div>
        {% else %}
        <div class="author__ava ava">
          <img class="ava__pic" src="{% static 'img/user.jpg' %}">
        </div>
        {% endif %}
        <div class="author__wrap">
          <div class="author__hi">Привет всем!</div>
          <div class="author__content">
            {{ course.from_author }}
          </div>
          <a class="author__name" href="#">{{ course.author.get_full_name }}</a>
        </div>
      </div>
    </div>
  </div>
  {% endif %}
</div>
{% for content in course.content.all %}
<div class="section section_border">
  <div class="section__center center center_sm">
    {% with template="course/content/"|add:content.ctype|add:".html" %}
    {% include template %}
    {% endwith %}
    </div>
  </div>
{% endfor %}
{% if user.is_authenticated %}
<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 course.lessons.all %}
        <a href="{% url 'lesson' pk=lesson.id %}">
          <div class="lessons__item">
            <div class="lessons__subtitle subtitle">{{ lesson.title }}</div>
            <div class="lessons__row">
              {% if lesson.cover %}
              <div class="lessons__preview">
                <img class="lessons__pic" src="{{ lesson.cover.url }}">
              </div>
              {% else %}
              <div class="lessons__preview">
                <img class="lessons__pic" src="{% static 'img/pic-3.jpg' %}">
              </div>
              {% endif %}
              <div class="lessons__content">{{ lesson.short_description | safe }}</div>
            </div>
          </div>
        </a>
        {% endfor %}
      </div>
      {% comment %} <div class="lessons__load load">
        <button class="load__btn btn">еще</button>
      </div> {% endcomment %}
    </div>
  </div>
</div>
<div class="section">
  <div class="section__center center center_sm">
    <div class="title">Материалы, которые понадобятся</div>
    <div class="materials">
      {% for material in course.materials.all %}
      <div class="materials__item">
        {% if material.cover %}
        <div class="materials__preview">
          <img class="materials__pic" src="{{ material.cover.url }}">
        </div>
        {% else %}
        <div class="materials__preview">
          <img class="materials__pic" src="{% static 'img/pic-3.jpg' %}">
        </div>
        {% endif %}
        <div class="materials__wrap">
          <div class="materials__title">{{ material.title }}</div>
          <div class="materials__content">{{ material.short_description }}</div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>
{% endif %}
<div class="section section_gradient">
  <div class="section__center center center_sm">
    {% include "course/content/gallery.html" with results=True %}
  </div>
</div>
<div class="course course_promo" style="background-image: url({% static 'img/video-1.jpg' %});">
  <div class="course__center center center_sm">
    <div class="course__head">
      <div class="course__theme theme theme_green">ПЕРСОНАЖИ</div>
      <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">Как просто научиться рисовать простых персонажей.</div>
    <div class="course__content">Этот курс поможет детям узнать о том как из простых форм создавать веселый и харизматичных персонажей.</div>
    <a href="{% url 'user' course.author.id %}">
      <div class="course__user user user_white">
        {% 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.jpg' %}">
        </div>
        {% endif %}
        <div class="user__info">
          <div class="user__name">{{ course.author.get_full_name }}</div>
          <div class="user__meta">
            <div class="user__date">{{ course.created_at_humanize }}</div>
          </div>
        </div>
      </div>
    </a>
    <div class="course__info">
      <div class="course__meta meta meta_white">
        <div class="meta__item">
          <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>
        </div>
        <div class="meta__item">
          <div class="meta__icon">
            <svg class="icon icon-date">
              <use xlink:href="{% static 'img/sprite.svg' %}#icon-date"></use>
            </svg>
          </div>
          <div class="meta__title">15 ноября</div>
        </div>
        <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>
      </div>
      <button 
        class="course__buy btn btn_md"
        {% if user.is_authenticated %}
        data-popup=".js-popup-buy"
        {% else %}
        data-popup=".js-popup-auth"
        {% endif %}
      >КУПИТЬ КУРС</button>
    </div>
  </div>
</div>
<div class="section section_gray">
  <div class="section__center center center_sm">

    <div class="title">Задавайте вопросы:</div>
    <div class="questions">
      {% if user.is_authenticated %}
      <form class="questions__form" method="post" action="{% url 'coursecomment' course_id=course.id %}">
        <input type="hidden" name="reply_id">
        <div class="questions__ava ava">
          <img class="ava__pic" src="{% static 'img/user.jpg' %}">
        </div>
        <div class="questions__wrap">
          <div class="questions__reply-info">В ответ на
            <a href="" class="questions__reply-anchor">этот комментарий</a>.
            <a href="#" class="questions__reply-cancel grey-link">Отменить</a>
          </div>
          <div class="questions__field">
            <textarea class="questions__textarea" placeholder="Спросите автора курса интересующие вас вопросы"></textarea>
          </div>
          <button class="questions__btn btn btn_light">ОТПРАВИТЬ</button>
        </div>
      </form>
      {% else %}
      <div>Только зарегистрированные пользователи могут оставлять комментарии.</div>
      {% endif %}
      <div class="questions__list">
        {% include "./blocks/comments.html" with object=course %}
      </div>
    </div>
  </div>
</div>
<div class="section">
  <div class="section__center center center_sm">
    <div class="share">
      <div class="share__title">Поделиться курсом</div>
      <div class="share__list">
        <a class="share__item" href="#">
          <svg class="icon icon-share-facebook">
            <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-facebook"></use>
          </svg>
        </a>
        <a class="share__item" href="#">
          <svg class="icon icon-share-twitter">
            <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-twitter"></use>
          </svg>
        </a>
        <a class="share__item" href="#">
          <svg class="icon icon-share-google">
            <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-google"></use>
          </svg>
        </a>
        <a class="share__item" href="#">
          <svg class="icon icon-share-pinterest">
            <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-pinterest"></use>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock content %}