{% extends "base.html" %}
{% load i18n thumbnail %}

{% block head %}
    <link rel="stylesheet" href="{{ STATIC_URL }}common/css/slick.css">
    <script src="{{ STATIC_URL }}common/js/slick.min.js"></script>
    <script src="{{ STATIC_URL }}common/js/ajax-modal.js"></script>
{% endblock %}

{% block page-header %}{% endblock %}

{% block main %}
    <script type="text/javascript">
        $(document).ready(function() {
            $('.home-discover-container').slick({
                respondTo: 'min',
                slidesToShow: 5,
                slidesToScroll: 5,
                prevArrow: $('.arrow-prev'),
                nextArrow: $('.arrow-next')
            });
        });
    </script>
    <div class="home">
        <div class="container">
            {% if discover_items %}
                <h2 class= "home-title">{% trans 'Discover' %}</h2>
                <div class="home-discover">
                    <i class="fa fa-angle-left arrow arrow-prev"></i>
                    <div class="home-discover-container">
                        {% for discover_item in discover_items %}
                            <a href="{% url 'cms:discover_detail' slug=discover_item.slug %}" data-modal-classes="modal-discover-item" class="dialog-box discover-item discover-{{ discover_item.category }}">
                                <div class="discover-img" style="background-image: url('{{ discover_item.image.url }}');" alt="{{ discover_item.title }}"></div>
                                {% if discover_item.tag %}
                                    <span class="discover-tag discover-tag-{{ discover_item.tag }}">{{ discover_item.tag }}</span>
                                {% endif %}
                                <p>
                                    <span>{{ discover_item.title }}</span></br>{{ discover_item.short_description }}
                                </p>
                            </a>
                        {% endfor %}
                    </div>
                    <i class="fa fa-angle-right arrow arrow-next"></i>
                </div>
            {% endif %}
            <h2 class= "home-title">{% trans 'Recently' %}</h2>
            <ul class="recently-list">
                {% for item in recently_items %}
                    {% if item.type == 'activity' %}
                        <li class="recently-item recently-item-activity">
                            <a href="{{ item.get_detail_url }}">
                                <span class="recently-item-type-icon">
                                    <i class="icon-{{ item.activity_type }} activity-type-icon"></i>
                                </span>
                                <span class="recently-item-type-name">
                                    {{ item.verbose_activity_name }}
                                </span>
                                <span class="recently-item-info">
                                    <span class="recently-item-name">
                                        {{ item.name }}
                                    </span>
                                    <span class="recently-item-owner">
                                         -
                                        {% blocktrans with owner=item.library_status.owner.get_full_name %}
                                            Shared by {{ owner }}
                                        {% endblocktrans %}
                                    </span>
                                </span>
                                <span class="recently-item-date">
                                    {% now "d/m/Y" as current_date %}
                                    {% if item.updated_at|date:"d/m/Y" == current_date %}
                                        {% blocktrans with timesince=item.updated_at|timesince %}
                                            {{ timesince }} ago
                                        {% endblocktrans %}
                                    {% else %}
                                        {{ item.updated_at|date:"d/m/Y" }}
                                    {% endif %}
                                </span>
                            </a>
                        </li>
                    {% elif item.type == 'training' %}
                        <li class="recently-item recently-item-training">
                            <a href="{{ item.get_detail_url }}">
                                <span class="recently-item-type-icon">
                                    <i class="fa fa-list-ul activity-type-icon"></i>
                                </span>
                                <span class="recently-item-img"
                                    style="background-image: url('{% thumbnail item.get_header_image 300x100 crop quality=100 %}');">
                                </span>
                                <p class="recently-item-info">
                                    <span class="recently-item-name">
                                        {{ item.name }}
                                    </span>
                                </p>
                                <span class="recently-item-date">
                                    {% now "d/m/Y" as current_date %}
                                    {% if item.updated_at|date:"d/m/Y" == current_date %}
                                        {% blocktrans with timesince=item.updated_at|timesince %}
                                            {{ timesince }} ago
                                        {% endblocktrans %}
                                    {% else %}
                                        {{ item.updated_at|date:"d/m/Y" }}
                                    {% endif %}
                                </span>
                            </a>
                        </li>
                    {% elif item.type == 'session' %}
                        <li class="recently-item recently-item-sessions">
                            <a href="{{ item.get_export_results_url }}" class="dialog-box">
                                <span class="recently-item-type-icon">
                                    <i class="fa fa-download activity-type-icon"></i>
                                </span>
                                <span class="recently-item-type-name">
                                    {% trans 'Session results' %}
                                </span>
                                <span class="recently-item-hover">
                                    <span>{% trans 'Download' %}</span>
                                </span>
                                <span class="recently-item-info">
                                    <span class="recently-item-name">
                                        {{ item.training.name }}
                                    </span>
                                    <span class="recently-item-owner">
                                        - <i class="icon-trainer activity-type-icon" title="{% trans 'Trainer' %}"></i>
                                        {{ item.trainer.get_full_name }}
                                    </span>
                                </span>
                                <span class="recently-item-date">
                                    {% now "d/m/Y" as current_date %}
                                    {% if item.updated_at|date:"d/m/Y" == current_date %}
                                        {% blocktrans with timesince=item.updated_at|timesince %}
                                            {{ timesince }} ago
                                        {% endblocktrans %}
                                    {% else %}
                                        {{ item.updated_at|date:"d/m/Y" }}
                                    {% endif %}
                                </span>
                            </a>
                        </li>
                    {% endif %}
                {% endfor %}
            </ul>
        </div>
    </div>
{% endblock %}