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

{% 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 %}
            {% comment %}
                <h2 class= "home-title">{% trans 'Recently' %}</h2>
            {% endcomment %}
        </div>
    </div>
{% endblock %}