{% extends 'client/base_catalog.html' %}
{% load static %}
{% load i18n %}


{% block page_title %}
       <div class="page-title">
           <h1>{% trans 'Отписаться' %}</h1>
       </div>
{% endblock %}

{% block content_list %}

    <div class="set-sect subscribe">
        <header>{% trans 'настройка подписки' %}</header>
        <div class="set-sect-body">
            <form action="{% url 'newsletter_mailinglist_unsubscribe_handle' %}" method="post">{% csrf_token %}

                <ul class="tabs clearfix">
                    <li class="active"><a class="icon-big-email" href="#">{% trans 'по e-mail' %}</a></li>
                </ul>
                <ul class="tabs-content">

                    <li class="active">

                        <div class="mf-announces clearfix">
                            <div class="mf-subj-checks-title">
                                <label class="check">
                                    {{ subscribe.get_announce }}
                                    {{ subscribe.get_announce.label }}</label>
                            </div>

                            <div class="mf-announces-body">


                                <div class="mf-line mail" style="display: none;">
                                    <div class="mf-field">{{ subscribe.email }}</div>
                                    <div class="mf-msg"></div>
                                </div>

                                <div class="mf-line country">
                                    <div class="mf-field">
                                        {{ subscribe.country }}
                                    </div>
                                    <div class="mf-msg"></div>
                                </div>

                                <div class="mf-line city">
                                    <div class="mf-field">
                                        {{ subscribe.city }}
                                    </div>
                                    <div class="mf-msg"></div>
                                </div>

                                <div class="mf-line subj">
                                    <div class="mf-field">
                                        {{ subscribe.theme }}
                                    </div>
                                    <div class="mf-msg"></div>
                                </div>

                                <div class="mf-line period">
                                    <div class="mf-field">
                                        {{ subscribe.periodic }}
                                    </div>
                                    <div class="mf-msg"></div>
                                </div>
                            </div>
                        </div>


                        <hr />

                        <div class="mf-line">
                            <label class="check">{{ subscribe.exponent_practicum }}{% trans '«Практикум экспонента»' %}<i>({% trans 'учимся эффективно участвовать в выставках и грамотно пиарить свою компанию на событиях' %})</i></label>
                        </div>

                        <div class="mf-line">
                            <label class="check">{{ subscribe.organiser_practicum }}{% trans '«Практикум организатора событий»' %} <i>({% trans 'Создаем, наполняем и продвигаем собственные ивэнты' %})</i></label>
                        </div>

                    </li>

                </ul>

                <div class="mf-buttons-line">
                    <button type="submit" class="icon-save">{% trans 'сохранить' %}</button>
                </div>
            </form>
        </div>
    </div>

    {% block scripts %}
        <script>
            $(function(){
               $('#id_sub_set_country, #id_sub_set_theme')
                .select2({
                    placeholder: $(this).attr('placeholder'),
                    width: '100%'
                });

            $('#id_sub_set_city').select2({
                placeholder: $(this).attr('placeholder'),
                multiple: true,
                width: '100%',
                ajax: {

                    url: "/city/get-city/",
                    dataType: "json",
                    quietMillis: 200,

                    data: function(term, page){
                        return {term: term,
                            page: page};
                    },

                    results: function (data) {
                        var results = [];
                        $.each(data, function(index, item){
                            results.push({
                                id: item.id,
                                text: item.label
                            });
                        });
                        return {results: results};
                    }
                },
                initSelection : function(element, callback) {
                    var data = [];
                    $(element.val().split(",")).each(function(i) {
                        var item = this.split(':');
                        data.push({
                                id: item[0],
                                text: item[1]
                            });
                    });
                    callback(data);
                }

            });
            });
	    </script>
    {% endblock %}
{% endblock %}