{% load thumbnail %}
{% load static %}
{% load data_liked from data_liked %}

<div
    class="courses__item"
    data-course data-course-id={{ course.id }}
    {% if course.is_deferred_start and course.status == 2 %}data-future-course data-future-course-time={{ course.deferred_start_at.timestamp }}{% endif %}
>
<a class="courses__preview" href="{% if course.status == 0 %}{% url 'course_edit' course.id %}{% else %}{% url 'course' course.id %}?next={{ request.get_full_path }}{% endif %}">
  {% thumbnail course.cover.image "300x170" crop="center" as im %}
  <img class="courses__pic" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
  {% empty %}
  <img class="courses__pic" src="{% static 'img/no_cover.png' %}" width="300px" height="170px"/>
  {% endthumbnail %}
  <div class="courses__view">Подробнее</div>
  {% if course.is_featured %}
  <div class="courses__label courses__label_fav"></div>
  {% endif %}
  {% if course.status == 1 %}
  <div class="courses__soon">
    <div class="courses__time">КУРС ПРОХОДИТ МОДЕРАЦИЮ</div>
  </div>
  <div class="courses__label courses__label_eye"></div>
  {% elif course.status == 0 %}
  <div class="courses__soon">
    <div class="courses__time">ЧЕРНОВИК</div>
  </div>
  <div class="courses__label courses__label_draft"></div>
  {% elif course.status == 3 %}
  <div class="courses__soon">
    <div class="courses__time">В АРХИВЕ</div>
  </div>
  <div class="courses__label courses__label_draft"></div>
  {% elif course.status == 4 %}
  <div class="courses__soon">
    <div class="courses__time">ОТКЛОНЕН</div>
  </div>
  <div class="courses__label courses__label_draft"></div>
  {% endif %}
  {% if course.is_deferred_start and course.status == 2 %}
  <div class="courses__soon">
    <div class="courses__left">Курс начнется:</div>
    <div class="courses__time">{{ course.deferred_start_at_humanize }}</div>
    </div>
    <div class="courses__label courses__label_clock"></div>
  {% endif %}
</a>
<div class="courses__details">
    <a class="courses__theme theme {{ theme_color }}"
       href="{% url 'courses' %}?category={{ course.category.title }}">{{ course.category | upper }}</a>
    {% if not course.is_free %}
      <div class="courses__price">{{ course.price|floatformat:"-2" }}₽</div>
    {% endif %}
  </div>
  <a class="courses__title" href="{% url 'course' course.id %}?next={{ request.get_full_path }}">{{ course.title }}</a>
  <div class="courses__content">{{ course.short_description }}
  </div>
  <div class="courses__user user">
    <a href="{% if course.author %}{% url 'user' course.author.id %}{% endif %}">
      {% 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 %}
    </a>
    <div class="user__info">
      <a href="{% if course.author %}{% url 'user' course.author.id %}{% endif %}" class="link--black">
        <div class="user__name">{{ course.author.get_full_name }}</div>
      </a>
      <div class="user__meta">
        <div class="user__date">{{ course.created_at_humanize }}</div>
        {% data_liked user course as liked %}
        <a class="user__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">
              <use xlink:href="{% static 'img/sprite.svg' %}#icon-like"></use>
            </svg>
            <svg class="icon icon-like-fill">
              <use xlink:href="{% static 'img/sprite.svg' %}#icon-like-fill"></use>
            </svg>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>