{% load i18n %}
<form action="." method="post" id="mailing_settings_form">
    {% csrf_token %}
    <div class="themes_block">
        <div class="container">
            <h2>{% trans 'Какие события включать в ваше письмо?' %}</h2>

            <div class="columns">
                <div class="column">
                    <h3>{% trans 'Ваши темы:' %}</h3>

                    <ul id="selected_themes" class="selected selected_themes">
                        {% for theme in object.themes.all %}
                            <li data-id="{{ theme.pk }}" data-type="th" class="theme_{{ theme.pk }}">
                                <input type="hidden" name="th" value="{{ theme.pk }}">
                                {{ theme }}
                                <a href="#">&times;</a>
                            </li>
                        {% endfor %}

                        {% for tag in object.tags.all %}
                            <li data-id="{{ tag.pk }}" data-type="tg" data-parent="{{ tag.theme.pk }}" class="tag_{{ tag.pk }}">
                                <input type="hidden" name="tg" value="{{ tag.pk }}">
                                {{ tag }}
                                <a href="#">&times;</a>
                            </li>
                        {% endfor %}
                    </ul>
                    <a href="#search-modal" class="modal_trigger themes_trigger">{% trans 'Уточнить темы' %}</a>
                </div>

                <div class="column">
                    <h3>{% trans 'Ваши гео-фильтры:' %}</h3>

                    <ul class="geo_filters">
                        <li>
                            <label>
                                {{ form.moscow }}
                                <span class="label moscow">
                                    <i class="fa fa-map-marker"></i>
                                    {{ form.moscow.label }}
                                </span>
                                <span class="geo_checkbox"></span>
                            </label>
                        </li>

                        <li>
                            <label>
                                {{ form.russia }}
                                <span class="label rf">
                                    <i class="fa fa-map-marker"></i>
                                    {{ form.russia.label }}
                                </span>
                                <span class="geo_checkbox"></span>
                            </label>
                            <a href="#cities-modal" class="modal_trigger">{% trans 'Выбрать города' %}</a>
                            <ul id="selected_cities" class="selected"></ul>
                            {{ form.r_cities }}
                        </li>

                        <li>
                            <label>
                                {{ form.foreign }}
                                <span class="label foreign">
                                    <i class="fa fa-map-marker"></i>
                                    {{ form.foreign.label }}
                                </span>
                                <span class="geo_checkbox"></span>
                            </label>
                            <a href="#countries_modal" class="modal_trigger">{% trans 'Выбрать страны' %}</a>
                            <ul id="selected_areas" class="selected"></ul>
                            <ul id="selected_countries" class="selected"></ul>
                            {{ form.area }}
                            {{ form.co }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="subjects_block">
        <div class="container">
            <h2>{% trans 'Включать ли новости / обзоры / статьи в письмо?' %}</h2>

            <div class="columns">
                <div class="column">
                    {{ form.content_news }}
                    {{ form.content_news.label_tag }}
                    <p>{% trans "Получайте новости выставок и конференций по выбранным тематикам" %}</p>
                </div>

                <div class="column">
                    {{ form.content_overview }}
                    {{ form.content_overview.label_tag }}
                    <p>{% trans "Практические материалы, интервью, кейсы, которые помогут эффективно участвовать в выставках" %}</p>
                </div>

                <div class="column">
                    {{ form.content_articles }}
                    {{ form.content_articles.label_tag }}
                    <p>{% trans "Блог о том, как создавать и продвигать крутые event`ы" %}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="period_block">
        <div class="container">
            <h2>{% trans 'Регулярность получения писем' %}</h2>

            <div class="columns">
                <div class="column periodic">
                    <ul>
                        {% for field in form.periodic %}
                            <li>
                                <label>
                                    {{ field.tag }}
                                    <span class="radio">
                                        {{ field.choice_label }}
                                    </span>
                                </label>
                            </li>
                        {% endfor %}
                    </ul>
                </div>

                <div class="column mailing_day">
                    {% for field in form.periodic_day %}
                        <label>
                            {{ field.tag }}
                            <span class="radio">
                                {{ field.choice_label }}
                            </span>
                        </label>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="button_block">
        <div class="container">
            <button type="submit">{% trans "Сохранить" %}</button>
            <a href="{% url 'accounts-mailing_settings' %}?unsibscribe=1">{% trans 'Не хочу быть в курсе событий (отписаться от всего)' %}</a>
        </div>
    </div>
</form>