{% load static i18n %}
{% load thumbnail %}
{% load template_filters %}

{% block page_body %}
    <div class="m-article event-page">
        <div class="item-wrap event clearfix">
            <aside>
                {% if exposition.expohit %}
                    <div class="hit"></div>
                {% endif %}

                {% if exposition.canceled %}
                    <div class="cancel"></div>
                {% endif %}

                <div class="i-pict">
                    {% with obj=exposition  %}
                        {% include 'client/includes/show_logo.html' %}
                    {% endwith %}
                </div>

                <div class="i-stats">
                    {% if exposition.visitors %}
                        <span class="visitors" title="{% trans 'Посетители' %}">{{ exposition.visitors }}</span>
                    {% endif %}

                    {% if exposition.members %}
                        <span class="participants" title="{% trans 'Участники' %}">{{ exposition.members }}</span>
                    {% endif %}
                </div>

                <div class="i-discount">
                    {% if exposition.discount %}
                        <a class="discount-button" href="#">{% trans 'Скидка' %} -{{ exposition.discount }}%</a>
                        <div class="dsc-text">{{ exposition.discount_description|safe|linebreaks }}</div>
                    {% endif %}
                 </div>
            </aside>

            <div class="i-info">
                <header>
                    <h1 class="i-title">
                    {% if exposition.main_title %}
                        {{ exposition.name|safe }} - {{ exposition.main_title|lowfirst|safe }}
                    {% else %}
                        {{ exposition.name|safe }}
                    {% endif %}
                    </h1>
                </header>

                <div class="i-date">
                    {% with obj=exposition  %}
                        {% include 'client/includes/show_date_block.html' %}
                    {% endwith %}

                    {% include "client/includes/sharing_block.html" %}
                </div>

                {% if exposition.place %}
                    <div class="i-address">
                        <header>
                            <div class="address">
                                {{ exposition.place.country }}, {{ exposition.place.city }},
                                {% if exposition.place.web_page %}
                                    <a href="{{ exposition.place.get_permanent_url }}" class="place_link">{{ exposition.place.name }}</a>
                                {% else %}
                                    {{ exposition.place.name }}
                                {% endif %}
                            </div>
{#                            <div class="show-map"><a class="toggle-map" href="#">{% trans 'Раскрыть карту' %}</a></div>#}
                        </header>

                        <div class="show-map"><a class="toggle-map" href="#">{% trans 'Раскрыть карту' %}</a></div>

                        <div class="i-map">
                            <div class="close-map">
                                <a class="toggle-map" href="#">{% trans 'Скрыть карту' %}</a>
                            </div>

                            <div class="map-canvas" id="map-canvas" data-coords="{{ exposition.place.address.lat|coord_format }},{{ exposition.place.address.lng|coord_format }}" ></div>
                        </div>
                    </div>
                {% else %}
                    <div class="i-address">
                        <header>
                            <div class="address">
                                {{ exposition.country.name }}, {{ exposition.city.name }}{% if exposition.place_alt %} , {{ exposition.place_alt }}{% endif %}
                            </div>
                        </header>
                    </div>
                {% endif %}
            </div>
        </div>

        <hr />
        <div class="i-buttons clearfix">
            <div class="ib-main">
                {% with event=exposition user=user %}
                    {% include 'client/includes/visit_button.html' %}
                {% endwith %}

                {% include 'client/includes/calendar_button.html'  with obj=exposition %}
                {% if request.user.is_admin %}
                    <a target="_blank" class="button green " href="/admin/exposition/{{ object.url }}/">{% trans 'изменить' %}</a>
                {% endif %}
            </div>

            <div class="event_org">
                <a href="#pw-event-news-subscribe" class="button pw-open new_subribe_btn green"><i class="fa fa-at"></i>&nbsp;{% trans 'Подписаться на новости' %}</a>
            </div>
        </div>

        <hr />
        <div class="i-divs clearfix">
            <div class="i-subj">
                <ul>
                    {% with themes=exposition.themes %}
                        {% for theme in themes %}
                            <li><a href="{{ object.catalog }}theme/{{ theme.url }}/">{{ theme.name }} ({{ theme.expositions_number }})</a></li>
                        {% endfor %}
                    {% endwith %}
                </ul>
            </div>
            <div class="i-tags grey">
                {% with tags=exposition.tags %}
                    {% for tag in tags %}
                        <a href="{{ object.catalog }}tag/{{ tag.url }}/">{{ tag.name }}</a>{% if forloop.counter != tags|length %},{% endif %}
                    {% endfor %}
                {% endwith %}
            </div>
        </div>

        {# TODO: в data-background подставить crop 937x244 #}
        <div class="exposition_main_image" {% if exposition.main_image %}data-background="{% thumbnail exposition.main_image '937x244' crop='center' %}"{% endif %}>
            <div class="buttons">
                <a href="#" class="orange">{% trans 'Посетителю' %}</a>
                <a href="#" class="green">{% trans 'Экспоненту' %}</a>
                {# TODO: Эта кнопка только для платных выставок #}
                <a href="#" class="pink">{% trans 'Официальный сайт' %}</a>
            </div>
        </div>

{#        {% include 'client/includes/event_steps.html' with event=exposition %}#}

        {# Описание выставки #}
        <div class="expo_description">
            <h2>{% trans 'О выставке' %} {{ exposition.name|safe }}</h2>
            <aside class="right_grey_block">
                <h4>{% trans 'Масштаб выставки:' %}</h4>
                <div class="exposition_members">
                    <div class="members">
                        <h5>{% trans 'Участники:' %}</h5>
                        <span>324234</span>
                    </div>
                    <div class="visitors">
                        <h5>{% trans 'Посетители:' %}</h5>
                        <span>324234</span>
                    </div>
                </div>

                <div class="logos">
                    {% if exposition.quality_label.ufi.is_set %}
                        <div class="img_wrapper">
                            <img src="{% static 'client/img/approved-logo.png' %}" alt="" title="Approved Event" />
                        </div>
                    {% endif %}

                    {% if exposition.quality_label.exporating.is_set %}
                        <div class="img_wrapper">
                            <img src="{% static 'client/img/exporating_logo.png' %}" alt="" title="Approved Event" />
                        </div>
                    {% endif %}

                    {% if exposition.quality_label.rsva.is_set %}
                        <div class="img_wrapper">
                            <img src="{% static 'client/img/rsva.jpg' %}" alt="" title="Approved Event" />
                        </div>
                    {% endif %}
                </div>
            </aside>

            <aside class="right_grey_block" id="recommended_expositions">
                <h4>{% trans 'Также рекомендуем:' %}</h4>
                <div class="recommended_expositions">
                    <div class="recommended">
                        <a href="#">Name of exposition</a>
                        <p>Москва, 8-12 сентября 2017</p>
                    </div>

                    <div class="recommended">
                        <a href="#">Name of exposition</a>
                        <p>Москва, 8-12 сентября 2017</p>
                    </div>
                </div>
            </aside>

            {% if exposition.description %}
                <div class="expo_description_detail">
                    {{ exposition.description|safe }}
                </div>
            {% elif default_description %}
                <div class="expo_description_detail">
                    {{ default_description|safe }}
                </div>
            {% else %}
               {% include "client/includes/exposition/default_description.html" with expo=exposition className="expo_description_detail" %}
            {% endif %}
        </div>

        {# TODO: здесь должен быть баннер, проверить его вывод #}
        {% include 'client/includes/banners/expo_detail.html' %}

        <hr>

        {# Дополнительная информация #}
        <div id="additional" class="i-event-additional clearfix">
            <div class="sect-title">{% trans 'Дополнительная информация' %}</div>

            <ul class="e-docs">
                {% if exposition.business_program.exists %}
                    <li><a href="{{ exposition.get_permanent_url }}program/">{% trans 'Деловая программа' %}</a></li>
                {% endif %}

                <li><a href="{{ exposition.get_permanent_url }}price/">{% trans 'Условия участия' %}</a></li>

                {% if exposition.statistic_exists %}
                    <li><a href="{{ exposition.get_permanent_url }}statistic/">{% trans 'Статистика' %}</a></li>
                {% endif %}

                <li><a href="#" class="find_hotel">{% trans 'Найти отель' %}</a></li>
                <li><a href="#" class="car_rent">{% trans 'Арендовать авто' %}</a></li>
                <li><a href="#" class="translator">{% trans 'Услуги переводчика' %}</a></li>
            </ul>

            <dl class="add-info">
                {% if exposition.organiser.all.exists %}
                    <dt>{% trans 'Организатор' %}:</dt>
                    <dd>
                        {% with organisers=exposition.organiser.all %}
                            {% for organiser in organisers %}
                                {{ organiser.name }}<br />
                            {% endfor %}
                        {% endwith %}
                    </dd>
                {% else %}
                    {% if exposition.org %}
                        {% for item in exposition.org_split %}
                            <dt>{% if forloop.counter == 1 %}{% trans 'Организатор' %}:{% endif  %}</dt>

                            <dd>
                            {{ item }}
                            </dd>
                        {% endfor %}

                    {% endif %}
                {% endif %}

                {% if exposition.web_page %}
                    <dt>{% trans 'Веб-сайт' %}:</dt>
                    <dd>
                        <a target="_blank" href="#" data-type="href" data-hash="1qwer" data-url="{{ exposition.web_page|base64_encode }}" class="link-encode">{{ exposition.web_page }}</a>
                    </dd>
                {% endif %}

                {% if exposition.get_audience %}
                    <dt>{% trans 'Аудитория' %}:</dt>
                    <dd>{{ exposition.get_audience }}</dd>
                {% endif %}

                {% if exposition.get_periodic %}
                    <dt>{% trans 'Периодичность' %}:</dt>
                    <dd>{{ exposition.get_periodic }}</dd>
                {% endif %}

                {% if exposition.products %}
                    <dt>{% trans 'Экспонируемые продукты' %}:</dt>
                    <dd>{{ exposition.products|safe }}</dd>
                {% endif %}

                {% if exposition.time %}
                    <dt>{% trans 'Время работы' %}:</dt>
                    <dd>{{ exposition.time|safe }}</dd>
                {% endif %}
            </dl>
        </div>

        <hr>
        {% include 'client/includes/booking_block.html' with city=exposition.city place=exposition.place event=exposition %}


        {# Планируют быть #}
        <div class="conf_visitors">
            {% with visitors=exposition.users.all|slice:":17" %}
                <h3>{% trans 'Планируют быть на' %} {{ exposition.name }}</h3>


                <ul class="visitors-list" id="visitors-list">
                    {% if visitors %}
                    {# есть посетители #}
                        {% for user in visitors %}
                            {% if user == request.user %}
                                <li class="current"><a href="{{ user.get_permanent_url }}">{{ user.get_full_name }}&nbsp;{% if user.company %}({{ user.company.name }}){% endif %}</a></li>
                            {% else %}
                                <li><a href="{{ user.get_permanent_url }}">{{ user.get_full_name }}&nbsp;{% if user.company %}({{ user.company.name }}){% endif %}</a></li>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                </ul>

                <p id="nobody" class=" mb-1em {% if exposition.users.all|length > 0 %}hidden{% else %}{% endif %}">{% trans 'Пока никто не отметился на событии.' %}</p>

                <p><a id="somebody" class=" more mb-1em {% if visitors|length > 0 %}{%else%}hidden{% endif %}" href="{{ event.get_permanent_url }}visitors/">{% trans 'Все посетители' %}</a></p>
            {% endwith %}

            {% with event=exposition user=user %}
                {% include 'client/includes/visit_button.html' %}
            {% endwith %}
        </div>

        {# Слайдер фото с прошлой выставки #}
        {% if exposition.get_photos %}
            {% with photos=exposition.get_photos %}
                <div class="conference_slider">
                    <h2><a href="{{ exposition.get_permanent_url }}photo/">{% trans 'Фотографии с прошлой конференции' %}</a></h2>
                    <div class="last_photos_slider">
                        {% for photo in photos %}
                            {% thumbnail photo.image '936x468' crop="center" as im %}
                                <a href="{{ exposition.get_permanent_url }}photo/"><img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt="" /></a>
                            {% endthumbnail %}
                        {% endfor %}
                    </div>

                    <div class="last_photos_thumbs">
                        {% for photo in photos %}
                            {% thumbnail photo.image '137x95' crop="center" as im %}
                                <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt="" />
                            {% endthumbnail %}
                        {% endfor %}
                    </div>
                </div>
            {% endwith %}
        {% endif %}

        {% comment %}
            <div class="clearfix">
                <hr />
                {% include 'client/includes/banners/detail_inner.html' %}
            </div>
        {% endcomment %}


        <div class="exposition_news">
            {% include "client/includes/article/articles_in_event.html" with event=exposition news_list=news %}
        </div>

        {% if exposition.members or exposition.visitors or exposition.foundation_year or exposition.area %}
            <div class="e-num-info">
                {% if exposition.area %}
                    <div class="eni-area-wrap">
                        <div class="eni-title">{% trans 'Общая выставочная площадь' %}</div>
                        <div class="eni-area">
                            {{ exposition.area }} {% trans 'м²' %}
                        </div>
                    </div>
                {% endif %}
                <div class="eni-stats">
                    {% if exposition.members %}
                        <div class="enis-item"><b>{{ exposition.members }}</b> {% trans 'участников' %}</div>
                    {% endif %}

                    {% if exposition.visitors %}
                        <div class="enis-item"><b>{{ exposition.visitors }}</b> {% trans 'посетителей' %}</div>
                    {% endif %}

                    {% if exposition.foundation_year %}
                        <div class="eni-founded">{% trans 'Основано в' %} <b>{{ exposition.foundation_year }}</b> {% trans 'году' %}</div>
                    {% endif %}
                </div>
            </div>
        {% endif %}

        <div class="conf_comments">
            <h2>{% trans 'Комментарии' %}</h2>

            {% for comment in comments %}
                <div class="comment">
                    <div class="comment_author">
                        {{ comment.user.get_full_name }} <time><i class="fa fa-calendar"></i> {{ comment.created }}</time>
                    </div>
                    <div class="comment_text">{{ comment.text }}</div>
                    <a href="#" data-parent="{{ comment.pk }}" data-user="{{ comment.user.get_full_name }}" class="reply_comment"><i class="fa fa-comment"></i> <span>{% trans "Ответить на комментарий" %}</span></a>

                    {% for answer in comment.childs %}
                        <div class="comment">
                            <div class="comment_author">
                                {{ answer.user.get_full_name }} <time><i class="fa fa-calendar"></i> {{ answer.created }}</time>
                            </div>
                            <div class="comment_text">{{ answer.text }}</div>
                        </div>
                    {% endfor %}
                </div>
            {% endfor %}

            {% if user.is_authenticated %}
                <div class="сomment_form">
                    <form action="." method="post" id="comment_form">
                        {% csrf_token %}
{#                        {{ commentform.as_p }}#}
                        <h3>{% trans 'Оставьте свой отзыв:' %}</h3>
                        <p>
                            <label for="id_text">Сообщение:</label>
                            <textarea id="id_text" name="text" placeholder="{% trans 'Введите текст' %}"></textarea>

                            <button type="submit" class="button">{% trans 'Оставить отзыв' %}</button>
                        </p>
                    </form>
                </div>
            {% else %}
                <p class="no_login">{% trans 'Если вы хотите  оставить отзыв или комментарий о конференции' %}, <a class="login pw-open" href="#pw-login">{% trans 'авторизуйтесь' %}.</a></p>
            {% endif %}
        </div>
    </div>

    <div class="conf_sharing">
        {% include 'client/includes/sharing_block_full.html' %}
    </div>

    {# TODO: подставить яндекс метрику #}

    {% if exposition.get_nearest_events %}
        <div class="e-cat">
            <div class="sect-title">
                {% trans 'Другие выставки, которые могут быть вам интересны' %}
                {# TODO: заголовок должен быть "Ближайшие выставки по тематике «Маркетинг, реклама, PR»" #}
            </div>
            <ul class="cat-list cl-exhibitions">
                {% for exp in exposition.get_nearest_events %}
                    <li class="cl-item">
                        <div class="cl-item-wrap clearfix">
                            <a href="{{ exp.get_permanent_url }}">
                                <div class="cli-pict">
                                    {% with obj=exp  %}
                                        {% include 'client/includes/show_logo.html' %}
                                    {% endwith %}
                                </div>
                            </a>
                            <div class="cli-info">
                                <div class="cli-top clearfix">
                                    {% if exp.quality_label.rsva.is_set %}
                                        <div class="cli-approved">
                                            <img width="52" height="42" src="{% static 'client/img/rsva.jpg' %}" alt="" title="Approved Event" />
                                        </div>
                                    {% endif %}

                                    {% if exp.quality_label.exporating.is_set %}
                                        <div class="cli-approved">
                                            <img width="52" height="42" src="{% static 'client/img/exporating_logo.png' %}" alt="" title="Approved Event" />
                                        </div>
                                    {% endif %}

                                    {% if exp.quality_label.ufi.is_set %}
                                        <div class="cli-approved">
                                            <img width="52" height="42" src="{% static 'client/img/approved-logo.png' %}" alt="" title="Approved Event" />
                                        </div>
                                    {% endif %}

                                    <header>
                                        <div class="cli-title"><a href="{{ exp.get_permanent_url }}">{{ exp.name|safe }}</a></div>
                                    </header>

                                    <div class="cli-descr">
                                        {{ exp.main_title|safe|linebreaks }}
                                    </div>
                                    <div class="cli-bot clearfix">
                                        <div class="cli-date">
                                            {% with obj=exp  %}
                                                {% include 'client/includes/show_date_block.html' %}
                                            {% endwith %}
                                        </div>

                                        <div class="cli-place">
                                            <a href="{{ exposition.catalog }}country/{{ exp.country.url }}/">{{ exp.country }}</a>, <a href="{{ exposition.catalog }}city/{{ exp.city.url }}/">{{ exp.city }}</a>
                                            {% if exp.place %}
                                            , <a href="{{ exp.place.get_permanent_url }}">{{ exp.place }}</a>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                {% endfor %}
                <li><a class="button more" href="{{ exposition.get_nearest_events_url|safe }}">{% trans 'Смотреть все' %}</a></li>
            </ul>
        </div>
    {% endif %}

    {# TODO: подставить еще одну рекламу #}
    {% include 'client/includes/banners/detail_inner_3.html' %}

    <div class="e-cat look-also">
        <div class="sect-title">{% trans 'Смотрите также:' %}</div>
        <a href="{{ exposition.catalog }}city/{{ exposition.city.url }}/">{% trans "Выставки" %} {% if request.LANGUAGE_CODE == 'ru' and exposition.city.inflect %}{{ exposition.city.inflect }}{% else %}{% trans 'in' %} {{ exposition.city.name }}{% endif %}</a>
        <a href="{{ exposition.catalog }}country/{{ exposition.country.url }}/">{% trans "Выставки" %} {% if request.LANGUAGE_CODE == 'ru' and exposition.country.inflect %}{{ exposition.country.inflect }}{% else %}{% trans 'in' %} {{ exposition.country.name }}{% endif %}</a>
        {% if exposition.theme.all %}
            <a href="{{ exposition.catalog }}theme/{{ exposition.theme.all.0.url }}/country/{{ exposition.country.url }}/">{% trans "Выставки по тематике " %}&laquo;{{ exposition.theme.all.0.name|capfirst }}&raquo; {% if request.LANGUAGE_CODE == 'ru' and exposition.country.inflect %}{{ exposition.country.inflect }}{% else %}{% trans 'in' %} {{ exposition.country.name }}{% endif %}</a>
            <a href="{{ exposition.catalog }}theme/{{ exposition.theme.all.0.url }}/city/{{ exposition.city.url }}/">{% trans "Выставки по тематике " %}&laquo;{{ exposition.theme.all.0.name|capfirst }}&raquo; {% if request.LANGUAGE_CODE == 'ru' and exposition.city.inflect %}{{ exposition.city.inflect }}{% else %}{% trans 'in' %} {{ exposition.city.name }}{% endif %}</a>
        {% endif %}
    </div>
{% endblock %}

{% block content_text %}
{% endblock %}

{% block popup %}
    {% include 'client/popups/advertise_member.html' with form=advertising_form %}
    {% include 'client/popups/event_news_subscribe.html' %}
{% endblock %}

{% block scripts %}
    {% if request.GET.debug == '1' %}
        <script src="{% static 'client/js/_modules/page.exposition.object.js' %}"></script>
    {% else %}
        <script src="{% static 'client/js_min/_modules/page.exposition.object.min.js' %}"></script>
    {% endif %}
    <script>
        EXPO.exposition.object.init({
            visit:{
                activeClass:"visit",
                passiveClass:"unvisit",
                currentHtml:'<li class="current"><a href="{{ request.user.get_permanent_url }}">{{ request.user.get_full_name }}&nbsp;{% if request.user.company %}({{ request.user.company.name }}){% endif %}</a></li>',
                visitorsListId:"visitors-list",
                somebodyId:"somebody",
                nobodyId:"nobody"
            },
            note:{
                wrapClass:'note-wrap',
                wrapDisabledClass:'note-wrap-disabled',
                buttonClass:'note-button',
                inputClass:'note-text'
            },
            advertise:{
                id:"advert-member-form"
            },
            event_news_subscribe:{
                id: "event-news-subscribe-form"
            },
            addCalendarText:"{% trans 'В расписание' %}",
            removeCalendarText:"{% trans 'Из расписания' %}"
        });
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
    <script>
        $(window).load(function () {
            $('.last_photos_slider').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                fade: true,
                asNavFor: '.last_photos_thumbs'
            });

            $('.last_photos_thumbs').slick({
                slidesToShow: 5,
                slidesToScroll: 1,
                asNavFor: '.last_photos_slider',
                dots: false,
                variableWidth: true,
                focusOnSelect: true
            });
        });

        $(function() {
            var $recommended = $('#recommended_expositions'),
                $text = $('.expo_description_detail'),
                $main_image = $('.exposition_main_image');

            $recommended
                .insertBefore($text.find('>*').eq(-2))
                .show();

            if ($main_image.data('background')) {
                $main_image.css('background', 'url(' + $main_image.data('background') + ')');
            }
        })
    </script>
{% endblock %}