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

{% block styles %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
{% endblock %}

{% block page_body %}
    <div class="m-article event-page">
        <div class="item-wrap event clearfix">
            <aside>
                {% if event.expohit %}
                    <div class="hit"></div>
                {% endif %}
                {% if event.canceled %}
                <div class="cancel"></div>
                {% endif %}
                <div class="i-pict">
                {% with obj=event  %}
                    {% include 'client/includes/show_logo.html' %}
                {% endwith %}
                </div>
                <div class="i-stats">
                    {% if event.visitors %}
                    <span class="visitors" title="{% trans 'Посетители' %}">{{ event.visitors }}</span>
                    {% endif %}
                    {% if event.members %}
                    <span class="participants" title="{% trans 'Участники' %}">{{ event.members }}</span>
                    {% endif %}
                </div>
                <div class="i-discount">
                {% if event.discount %}
                    <a class="discount-button" href="#">{% trans 'Скидка' %} -{{ event.discount }}%</a>
                    <div class="dsc-text">{{ event.discount_description|safe|linebreaks }}</div>
                    {% endif %}
                 </div>
            </aside>
            <div class="i-info">
                <header>
                    <h1 class="i-title">
                    {% if event.main_title %}
                        {{ event.name|safe }} - {{ event.main_title|lowfirst|safe }}
                    {% else %}
                        {{ event.name|safe }}
                    {% endif %}
                    </h1>
                </header>
                <div class="i-date">
                    {% with obj=event  %}
                        {% include 'client/includes/show_date_block.html' %}
                    {% endwith %}

                    {% include "client/includes/sharing_block.html" %}
                </div>
                {% if event.place %}
                    <div class="i-address">
                        <header>
                            <div class="address">
                                {{ event.place.adress }}
                            </div>
                            <div class="show-map"><a class="toggle-map" href="#">{% trans 'Раскрыть карту' %}</a></div>
                        </header>
                        <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="{{ event.place.address.lat|stringformat:'f' }},{{ event.place.address.lng|stringformat:'f' }}" ></div>
                        </div>
                    </div>
                {% else %}
                    <div class="i-address">
                        <header>
                            <div class="address">
                                {{ event.country.name }}, {{ event.city.name }}{% if event.place_alt %} , {{ event.place_alt }}{% endif %}
                            </div>
                        </header>
                    </div>
                {% endif %}
            </div>
        </div>

        <hr />

        <div class="i-buttons clearfix">
            <div class="ib-main">
                {% with event=event user=user %}
                    {% include 'client/includes/visit_button.html' %}
                {% endwith %}
                {% include 'client/includes/calendar_button.html'  with obj=object %}
                <div class="{% if request.user.is_authenticated%}note-wrap{% else %}note-wrap-disabled{% endif %}">
                    {% with note=object|note_by_user:request.user %}
                    <a class="button green icon-note {% if note %}active{% endif %} note-button" href="/expo/add-note/{{ obj.url }}/">{% trans 'заметка' %}</a>
                    <div class="note-overlay">
                        <form action="">
                            <textarea name="note_text" class="note-text"> {{ note }}</textarea>
                        </form>
                    </div>
                    {% endwith %}
                </div>
                {% if request.user.is_admin %}
                <a class="button green " href="/admin/conference/{{ object.url }}/">{% trans 'изменить' %}</a>
                {% endif %}
                {% if event.photogallery %}
                    <a class="button blue icon-photo" href="{{ event.get_permanent_url }}photo/">{% trans 'фото' %}</a>
                {% endif %}
            </div>
            <div class="ib-add"><a target="_blank" class="button blue2 icon-find" href="http://www.booking.com/searchresults.html?aid={{ book_aid }}&city={{ object.city.id }}">{% trans 'Найти отель' %}</a></div>
        </div>

        <hr />

        <div class="i-divs clearfix">
            <div class="i-subj">
                <ul>
                {% with themes=event.theme.all %}
                    {% for theme in themes %}
                        <li><a href="{{ object.catalog }}theme/{{ theme.url }}/">{{ theme.name }} ({{ theme.conferences_number }})</a></li>
                    {% endfor %}
                {% endwith %}

                </ul>
            </div>
            <div class="i-tags grey">
                {% with tags=event.tag.all %}
                    {% for tag in tags %}
                        <a href="{{ object.catalog }}tag/{{ tag.url }}/">{{ tag.name }}</a>{% if forloop.counter != tags|length %},{% endif %}
                    {% endfor %}
                {% endwith %}
            </div>
        </div>

        <div class="conference_interested">
            <div class="conference_for">
                <h3><i class="fa fa-user"></i> {% trans 'Кому будет интересно' %}</h3>
                <ul>
                    <li>Маркетолог</li>
                    <li>Контент-менеджер</li>
                    <li>Маркетолог</li>
                    <li>Контент-менеджер</li>
                    <li>Маркетолог</li>
                    <li>Контент-менеджер</li>
                </ul>
            </div>
            <div class="confererence_price">
                <h3><i class="fa fa-tag"></i> {% trans 'Стоимость участия' %}</h3>

                <div class="conference_price">10 000 - 20 000 руб.</div>
            </div>
        </div>

        <hr>

        {% include 'client/includes/conference/conference_services.html' with event=event %}
        {% include 'includes/event_steps.html' with event=event %}

        <hr>

        <div class="i-event-description conference_about">
            <h2 class="ied-title">{% if event.event_type == 'expo' %}{% trans 'О выставке' %}{% else %}{% trans 'О конференции' %}{% endif %} {{ event.name|safe }}</h2>
            {% if event.description %}
                <div class="ied-text">{{ event.description|safe }}</div>
            {% else %}
                    <div class="ied-text" style="text-align: justify">
                    {{ default_description|safe }}
                </div>
                {# {% include "client/includes/conference/default_description.html" with conf=event %} #}
            {% endif %}

            <hr>

            <ul class="conf_extra">
                {% if event.business_program.exists %}
                    <li><a href="{{ event.get_permanent_url }}program/"><i class="fa fa-file-text-o"></i> <span>{% trans 'Деловая программа' %}</span></a></li>
                {% endif %}
            
                {% if event.web_page %}
                    <li><a target="_blank" href="{{ event.web_page }}" data-url="{{ event.web_page|base64_encode }}"><i class="fa fa-globe"></i> <span>{% trans 'На сайт события' %}</span></a></li>
                {% endif %}
            </ul>

            {% comment %}
            <dl class="add-info">
                {% if event.organiser.all|length > 0 %}
                    <dt>{% trans 'Организатор' %}:</dt>
                    <dd>
                        {% with organisers=event.organiser.all %}
                            {% for organiser in organisers %}
                                {{ organiser.name }}<br />
                            {% endfor %}
                        {% endwith %}
                    </dd>
                {% else %}
                    {% if event.org %}

                        {% for item in event.org_split %}
                            <dt>{% if forloop.counter == 1 %}{% trans 'Организатор' %}:{% endif  %}</dt>

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

                    {% endif %}
                {% endif %}

                {% if event.web_page %}
                <dt>{% trans 'Веб-сайт' %}:</dt>
                <dd>
                    <a target="_blank" href="#" data-type="href" data-hash="1qwer" data-url="{{ event.web_page|base64_encode }}" class="link-encode">{{ event.web_page }}</a>
                </dd>
                {% endif %}
                {% if event.get_audience %}
                <dt>{% trans 'Аудитория' %}:</dt>
                <dd>
                    {{ event.get_audience }}
                </dd>
                {% endif %}
                {% if event.get_periodic %}
                <dt>{% trans 'Периодичность' %}:</dt>
                <dd>{{ event.get_periodic }}</dd>
                {% endif %}
                {% if event.time %}
                <dt>{% trans 'Время работы' %}:</dt>
                <dd>{{ event.time|safe }}</dd>
                {% endif %}
            </dl>
            {% endcomment %}

            <hr>

        </div>

        {% with speakers=event.speakers.all %}
            {% if speakers %}
                <div class="connference_speakers">
                <h3>{% trans 'Спикеры' %}</h3>
                    <div class="speakers_slider">
                    {% for speaker in speakers %}
                        <div class="speaker">
                            <div class="speaker_img">
                                {% thumbnail speaker.photo '196x139' crop="center" as im %}
                                    <img src="{{ im.url }}" alt="img">
                                {% endthumbnail %}
                                <div class="overlay">
                                    <span>
                                        {{ speaker.company|default:'' }} <br> {{ speaker.position|default:'' }}
                                    </span>
                                </div>
                            </div>

                            <h5>{{ speaker.fullname }}</h5>
                            <span>{{ speaker.company|default:'' }}</span>
                        </div>
                    {% endfor %}

                    </div>
                </div>

                <hr>
            {% endif %}
        {% endwith %}


        {% if event.get_photos %}
            {% with photos=event.get_photos|slice:"5" %}
                <div class="i-photo-slides">
                    <h2>{% trans 'Фотографии с прошлой конференции' %}</h2>

                    <div class="last_photos_slider">
                        {% for photo in photos %}
                            {% thumbnail photo.image '936x468' crop="center" as im %}
                                <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt="" />
                            {% 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 %}

            <hr />
        {% endif %}

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

        {% include "client/includes/article/articles_in_event.html" with event=event news_list=news %}

        <div class="conf_members clearfix">
            {% comment %}
            <div class="im-participants">
            {% with companies=event.company.all|slice:":6" %}
                {% if companies %}
                {# есть участники #}
                    <header>
                        <div class="im-title">{% trans 'Спикеры' %}</div>
                        <a class="more" href="{{ event.get_permanent_url }}members/">{% trans 'Все спикеры' %}</a>
                    </header>
                    <ul>
                        {% for company in companies %}
                        <li>
                            <a href="{{ company.get_permanent_url }}">
                                <span class="imp-pict">

                                {% with obj=company %}
                                    {% include 'includes/show_logo.html' %}
                                {% endwith %}
                                </span>
                                {{ company.name }}
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                {% else %}
                {# нет участников #}
                    <header>
                        <div class="im-title">{% trans 'Спикеры' %}</div>
                        <p>{% trans 'Разместите информацию о ключевых спикерах' %}</p>
                        <p><a href="#pw-advertise" class="button icon-up pw-open" >{% trans 'Рекламировать спикера' %}</a></p>
                        <p><a href="#pw-event-news-subscribe" class="button icon-up pw-open" >{% trans 'Подписаться на новости' %}</a></p>
                    </header>
                {% endif %}
            {% endwith %}
            </div>
            {% endcomment %}

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

                    {% if visitors %}
                    {# есть посетители #}
                        <ul class="visitors-list">
                            {% for user in visitors %}
                                <li><a href="{{ user.get_permanent_url }}">{{ user.get_full_name }}&nbsp;{% if user.company %}({{ user.company.name }}){% endif %}</a></li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p id="nobody" class=" mb-1em {% if event.users.all|length > 0 %}hidden{% else %}{% endif %}">{% trans 'Пока никто не отметился на событии.' %}</p>
                    {% endif %}

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

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


        <div class="conf_place">
            <div class="place_detail">
                <h3>{% trans 'Место проведения' %}</h3>
                <h4><i class="fa fa-map-marker"></i> ЦВК «Экспоцентр», павильон 8</h4>
                <div class="grey">Россия, Москва, отель Radysson Slavyanskaya Moscow <br> Экспозиционная площадь павильона №8 – 14 842 кв.м</div>
                <p>Главное событие отрасли высоких технологий — 9-й Russian Interactive Week (RIW)  —  это место встреч, коммуникаций, обмена опытом и демонстрации достижений российской  отрасли высоких технологий и инноваций. RIW — ежегодное осеннее выставочно- конференционное событие сразу четырех отраслей: Интернет, Телеком, Медиа, Софт. А с 2016 года в RIW активно</p>
                <a class="button" href="#">{% trans 'подробнее' %}</a>
            </div>
            <div class="place_image">
                <img src="{% static 'client/img/_del-temp/place.jpg' %}" alt="">
            </div>
        </div>

        {% comment %}
        {% if event.members or event.visitors or event.foundation_year %}
            <div class="e-num-info">
                <div class="eni-stats">
                    {% if event.members %}
                    <div class="enis-item"><b>{{ event.members }}</b> {% trans 'участников' %}</div>
                    {% endif %}
                    {% if event.visitors %}
                    <div class="enis-item"><b>{{ event.visitors }}</b> {% trans 'посетителей' %}</div>
                    {% endif %}
                    {% if event.foundation_year %}
                    <div class="eni-founded">{% trans 'Основано в' %} <b>{{ event.foundation_year }}</b> {% trans 'году' %}</div>
                    {% endif %}
                </div>
            </div>
        {% endif %}
        {% endcomment %}

        <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 }}" 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 }}#}
                        <p>
                            <label for="id_text">Сообщение:</label>
                            <textarea cols="40" id="id_text" name="text" rows="10"></textarea>
                        </p>
                        <button type="submit">Отправить</button>
                    </form>
                </div>
            {% else %}
                <p>{% trans 'Для отправки комментариев авторизуйтесь.' %}</p>
            {% endif %}
        </div>
    </div>

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

    {% if event.get_nearest_events %}
        <div class="e-cat">
            <div class="sect-title">{% trans 'Другие конференции, которые могут быть вам интересны' %}</div>
            <ul class="cat-list cl-exhibitions">
                {% for exp in event.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="{{ exp.country.get_permanent_url }}">{{ exp.country }}</a>, <a href="{{ exp.city.get_permanent_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="{{ event.get_nearest_events_url|safe }}">{% trans 'Смотреть все' %}</a></li>

            </ul>
        </div>
    {% endif %}

    {% include 'client/includes/banners/detail_inner_3.html' %}

    <div class="e-cat look-also">
        <div class="sect-title">{% trans 'Смотрите также:' %}</div>
        <a href="{{ event.catalog }}city/{{ event.city.url }}/">{% trans "Конференции" %} {% if request.LANGUAGE_CODE == 'ru' and event.city.inflect %}{{ event.city.inflect }}{% else %}{% trans 'in' %} {{ event.city.name }}{% endif %}</a>
        <a href="{{ event.catalog }}country/{{ event.country.url }}/">{% trans "Конференции" %} {% if request.LANGUAGE_CODE == 'ru'  and event.country.inflect %}{{ event.country.inflect }}{% else %}{% trans 'in' %} {{ event.country.name }}{% endif %}</a>
        {% if event.theme.all %}
            <a href="{{ event.catalog }}theme/{{ event.theme.all.0.url }}/country/{{ event.country.url }}/">{% trans "Конференции по тематике " %}&laquo;{{ event.theme.all.0.name|capfirst }}&raquo; {% if request.LANGUAGE_CODE == 'ru' and event.country.inflect %}{{ event.country.inflect }}{% else %}{% trans 'in' %} {{ event.country.name }}{% endif %}</a>
            <a href="{{ event.catalog }}theme/{{ event.theme.all.0.url }}/city/{{ event.city.url }}/">{% trans "Конференции по тематике " %}&laquo;{{ event.theme.all.0.name|capfirst }}&raquo; {% if request.LANGUAGE_CODE == 'ru' and event.city.inflect %}{{ event.city.inflect }}{% else %}{% trans 'in' %} {{ event.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(){
            $('.speakers_slider').slick({
                slidesToShow: 4,
                slidesToScroll: 1,
            });


            $('.last_photos_slider').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                // arrows: false,
                fade: true,
                asNavFor: '.last_photos_thumbs'
            });

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

        var $comment_form = $('#comment_form');

        $('.reply_comment').on('click', function (e) {
            e.preventDefault();
            console.log($(this).data('parent'));

            var $parent = $('<input type="hidden" name="parent" value="' + $(this).data('parent') + '">');
            $comment_form.append($parent);
        });

        $comment_form.on('submit', function (e) {
            e.preventDefault();

            $comment_form.find('.error').removeClass('error');

            $.ajax({
                url: $comment_form.attr('action'),
                type: $comment_form.attr('method'),
                data: $comment_form.serializeArray(),
                beforeSend: function () {
                    $comment_form.find('button').attr('disabled', true);
                },
                success: function (response) {
                    console.log(response);

                    if (response.success){
                        $comment_form.find('[name="parent"]').remove();
                        $comment_form[0].reset();
                    }

                    if (response.errors){
                        $.each(response.errors, function (i, err) {
                            $comment_form.find('#id_' + i).addClass('error');
                        });
                    }
                },
                complete: function () {
                    $comment_form.find('button').attr('disabled', false);
                }
            });
        });
    </script>
{% endblock %}