{% extends 'base_catalog.html' %}
{% load static %}
{% load i18n %}
{% load template_filters %}



{% block bread_scrumbs %}
   <div class="bread-crumbs">
        <a href="/">{% trans 'Главная страница' %}</a>
       <a href="/profile/">{% trans 'Личный кабинет' %}</a>
        <strong>{% trans 'Компания' %}</strong>
   </div>
{% endblock %}

{% block page_title %}
{% endblock %}

{% block content_list %}
<form method="post" enctype="multipart/form-data" class="clearfix" action="#">{% csrf_token %}
<div class="m-article">
    <div class="item-wrap clearfix">

        <aside>
            <div class="i-pict">
                <a class="add_pic_block" title="">
                    <span></span>
                    <i>Добавить лого</i>
                    <b>+20</b>
                </a>
            </div>
            <div class="i-rating" title="Рейтинг: 551">551</div>
        </aside>

        <div class="i-info">
            <header>
                <div class="i-place p-editable add_link_text add_link_text_medium">
                    <div class="edit-wrap e-left">
                        <a class="e-btn" href="#" title="">Указать</a>
                        <div class="add_link_text_text">свой город <b>+5</b></div>
                        <div class="e-form">


                                <div class="ef-body">

                                    <div class="epfl">
                                        <label>{{ form.country.label }}</label>
                                        <div class="epf-field">
                                            {{ form.country }}
                                        </div>
                                    </div>

                                    <div class="epfl">
                                        <label>{{ form.city.label }}</label>
                                        <div class="epf-field">
                                            {{ form.city }}
                                        </div>
                                    </div>

                                </div>

                                <div class="ef-buttons">
                                    <button class="lnk icon-save">Сохранить</button>
                                </div>

                            <a class="ef-close" href="#">закрыть</a>
                        </div>
                    </div>
                </div>
                <div class="site_link"><a href="#" title="">expomap.ru/annapetrova</a></div>

                <div class="i-title p-editable p-editable">
                    Q.Art Media Solution

                    <div class="edit-wrap">
                        <a class="e-btn" href="#">редактировать</a>
                        <div class="e-form">
                            <form class="clearfix" action="#">

                                <div class="ef-body">

                                    <div class="epfl">
                                        <label>{{ form.name.label }}</label>
                                        <div class="epf-field">
                                            {{ form.name }}
                                        </div>
                                    </div>

                                </div>

                                <div class="ef-buttons">
                                    <button type="submit" class="lnk icon-save">Сохранить</button>
                                </div>
                            </form>

                            <a class="ef-close" href="#">закрыть</a>
                        </div>
                    </div>
                </div>
            </header>


            <div class="i-descr p-editable add_link_text add_link_text_top">

                <div class="edit-wrap">
                    <a class="e-btn" href="#" title="">Добавить</a>
                    <div class="add_link_text_text">краткое описание компании <b>+20</b></div>

                    <br>

                    <div class="e-form">

                            <div class="ef-body">

                                <div class="epfl">
                                    <label>{{ form.specialization.label }}</label>
                                    <div class="epf-field">
                                        {{ form.specialization }}
                                    </div>
                                </div>

                            </div>

                            <div class="ef-buttons">
                                <button type="submit" class="lnk icon-save">Сохранить</button>
                            </div>

                        <a class="ef-close" href="#">закрыть</a>
                    </div>
                </div>

            </div>

            <div class="i-area"><a href="#">Дизайн и брендинг, PR и консалтинг</a></div>

            <hr />

            <div class="ic-links p-editable add_link_text add_link_text_medium">

                <div class="edit-wrap">
                    <a class="e-btn" href="#" title="">Добавить</a>
                    <div class="add_link_text_text">адрес компании <b>+15</b></div>
                        <div class="e-form">

                            <div class="ef-body">

                                <div class="epfl">
                                    <label>{{ form.address_inf.label }}</label>
                                    <div class="epf-field">
                                        {{ form.address_inf }}
                                    </div>
                                </div>
                            </div>
                            <div class="ef-buttons">
                                <button type="submit" class="lnk icon-save">Сохранить</button>
                            </div>

                        <a class="ef-close" href="#">закрыть</a>
                    </div>
                </div>

            </div>


            <hr />

            <div class="add_link_teg">
                {{ form.theme }}<br/>
                {{ form.tag }}<br/>
                <b>+5</b>
            </div>

            <div class="clear"></div>

            <hr />

            <div class="i-contacts clearfix">
                <div class="ic-buttons ic-buttons_pos dd_width_4">
                    <a class="button icon-edit icb-edit-profile" href="#">редактировать профиль</a>
                    <a class="button orange icon-edit icb-exit-edit" href="#">завершить редактирование</a>

                    <div class="ic-buttons_text">Добавить профили в соц.сетях:</div>

                    <div class="p-editable add_link_text add_link_text_medium soc-media-indent">

                        <div class="edit-wrap">
                            <a class="e-btn" href="#" title="">Добавить</a>

                            <ul class="soc-media-buttons soc-media-buttons1">
                                <li><img src="img/soc-medias/icon-fb_hover.png" alt=""></li>
                                <li><img src="img/soc-medias/icon-lin_hover.png" alt=""></li>
                                <li><img src="img/soc-medias/sm-icon-vk_hover.png" alt=""></li>
                                <li><img src="img/soc-medias/sm-icon-twit_hover.png" alt=""></li>
                            </ul>

                            <div class="add_link_text_text"><b>+5 за каждый</b></div>
                                <div class="e-form">


                                    <div class="ef-body">

                                        <div class="epfl">
                                            <label><img src="img/soc-medias/sm-icon-fb-w.png" title="Facebook" alt="Facebook" /> {{ form.facebook.label }}</label>
                                            <div class="epf-field">
                                                {{ form.facebook }}
                                            </div>
                                        </div>

                                        <div class="epfl">
                                            <label><img src="img/soc-medias/sm-icon-lin-w.png" title="LinkedIn" alt="LinkedIn" /> {{ form.vk.label }}</label>
                                            <div class="epf-field">
                                                {{ form.linkedin }}
                                            </div>
                                        </div>

                                        <div class="epfl">
                                            <label><img src="img/soc-medias/sm-icon-vk-w.png" title="В контакте" alt="В контакте" /> {{ form.vk.label }}</label>
                                            <div class="epf-field">
                                                {{ form.vk }}
                                            </div>
                                        </div>

                                        <div class="epfl">
                                            <label><img src="img/soc-medias/sm-icon-twit-w.png" title="Twitter" alt="Twitter" /> {{ form.twitter.label }}</label>
                                            <div class="epf-field">
                                                {{ form.twitter }}
                                            </div>
                                        </div>

                                    </div>

                                    <div class="ef-buttons">
                                        <button type="submit" class="lnk icon-save">Сохранить</button>
                                    </div>


                                <a class="ef-close" href="#">закрыть</a>
                            </div>
                        </div>

                    </div>

                </div>

                <div class="ic-links ic-links_indent dd_width_5">

                    <div class="p-editable add_link_text add_link_text_medium">
                        <div class="edit-wrap">
                            <a class="e-btn" href="#" title="">Добавить</a>
                            <div class="add_link_text_text">номер телефона <b>+15</b></div>
                                <div class="e-form">

                                    <div class="ef-body">

                                        <div class="epfl">
                                            <label>{{ form.phone.label }}</label>
                                            <div class="epf-field">
                                                {{ form.phone }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ef-buttons">
                                        <button type="submit" class="lnk icon-save">Сохранить</button>
                                    </div>

                                <a class="ef-close" href="#">закрыть</a>
                            </div>
                        </div>
                    </div>

                    <div class="ic-mail add_indent">
                        <a class="icon-mail" href="mailto:info@qartmedia.ru">info@qartmedia.ru</a>
                    </div>

                    <div class="ic-site p-editable add_link_text add_link_text_medium">
                        <div class="edit-wrap">
                            <a class="e-btn" href="#" title="">Добавить</a>
                            <div class="add_link_text_text">сайт <b>+5</b></div>
                                <div class="e-form">

                                    <div class="ef-body">

                                        <div class="epfl">
                                            <label>{{ form.web_page.label }}</label>
                                            <div class="epf-field">
                                                {{ form.web_page }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ef-buttons">
                                        <button type="submit" class="lnk icon-save">Сохранить</button>
                                    </div>

                                <a class="ef-close" href="#">закрыть</a>
                            </div>
                        </div>
                    </div>


                </div>
            </div>

            <hr />

            <div class="i-additional">
                <div class="ia-title">Дополнительная информация</div>

                <div class="ic-links p-editable add_link_text add_link_text_medium">
                    <div class="edit-wrap">
                        <a class="e-btn" href="#" title="">Добавить</a>
                        <div class="add_link_text_text">год основания <b>+15</b></div>
                            <div class="e-form">

                                <div class="ef-body">

                                    <div class="epfl">
                                        <label>{{ form.foundation.label }}</label>
                                        <div class="epf-field">
                                            {{ form.foundation }}
                                        </div>
                                    </div>
                                </div>
                                <div class="ef-buttons">
                                    <button type="submit" class="lnk icon-save">Сохранить</button>
                                </div>

                            <a class="ef-close" href="#">закрыть</a>
                        </div>
                    </div>
                </div>

                <div class="ic-links p-editable add_link_text add_link_text_medium">
                    <div class="edit-wrap">
                        <a class="e-btn" href="#" title="">Добавить</a>
                        <div class="add_link_text_text">к-во сотрудников <b>+15</b></div>
                            <div class="e-form">

                                <div class="ef-body">

                                    <div class="epfl">
                                        <label>{{ form.staff_number.label }}</label>
                                        <div class="epf-field">
                                            {{ form.staff_number }}
                                        </div>
                                    </div>
                                </div>
                                <div class="ef-buttons">
                                    <button type="submit" class="lnk icon-save">Сохранить</button>
                                </div>

                            <a class="ef-close" href="#">закрыть</a>
                        </div>
                    </div>
                </div>

                <div class="p-editable add_link_text add_link_text_medium">
                    <div class="edit-wrap">
                        <a class="e-btn" href="#" title="">Добавить</a>
                        <div class="add_link_text_text">подробное описание компании<b>+15</b></div>
                            <div class="e-form">

                                <div class="ef-body">

                                    <div class="epfl">
                                        <label>{{ form.description.label }}</label>
                                        <div class="epf-field">
                                            {{ form.description }}
                                        </div>
                                    </div>
                                </div>
                                <div class="ef-buttons">
                                    <button type="button" class="lnk icon-save">Сохранить</button>
                                </div>

                            <a class="ef-close" href="#">закрыть</a>
                        </div>
                    </div>
                </div>


            </div>

        </div>
    </div>
</div>
</form>

{% endblock %}
{% block style %}
<link href="{% static 'js/select/select2.css' %}" rel="stylesheet"/>
<style>
.select2-container-multi .select2-choices {
    background-image:

    border:1px solid #bdbdbd;
    outline:none;
    background:#fff;
    padding:3px;
    font-family:'dindisplay_pro', sans-serif;
    font-size:15px;
    line-height:19px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:inset 0 2px 2px -2px #aaa;
    -moz-box-shadow:inset 0 2px 2px -2px #aaa;
    box-shadow:inset 0 2px 2px -2px #aaa;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

/*
{position:relative;
    border:1px solid #bdbdbd;
    outline:none;
    background:#fff;
    width:100%;
    padding:3px;
    font-family:'dindisplay_pro', sans-serif;
    font-size:15px;
    line-height:19px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:inset 0 2px 2px -2px #aaa;
    -moz-box-shadow:inset 0 2px 2px -2px #aaa;
    box-shadow:inset 0 2px 2px -2px #aaa;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;}
*/
</style>
{% endblock %}

{% block scripts %}

    <script src="{% static 'js/select/select2.js' %}"></script>
    <script>

    $(document).ready(function(){
        $('button .lnk .icon-save').on('click', function(e){
            e.preventDefault();
            console.log(123);
        })
        $('#id_theme').select2({
            width: 'element',
            placeholder: "Выберите ключевые тематики",
            //adaptContainerCssClass: 'test-container',
            //adaptDropdownCssClass: 'TEST-DROP'
            formatSelectionCssClass: function (data, container) { return "csb-selected show"; }
            //formatResultCssClass: function (data, container) { return "TEST"; },
            //formatContainerCssClass: function (data, container) { return "CONT____"; },
            //formatDropdownCssClass: function (data, container) { return "DROP"; }
        });
        $('#id_tag').select2({
        placeholder: "Выберите ключевые теги",
        width: 'element',
        multiple: true,
        ajax: {

            url: "/admin/theme/tag/search/",
            dataType: "json",
            quietMillis: 200,
            multiple: true,

            data: function(term, page, theme){
                var theme = $('#id_theme').serialize();
                return {term: term,
                        page: page,
                        theme: theme};
            },

            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);

        }

    });

    $('#id_country').select2({
        placeholder: "Выберите страну",
        width: 'element'
    });

    $('#id_city').select2({
        placeholder: "Выберите город",
        width: 'element',
        ajax: {

            url: "/admin/city/search/",
            dataType: "json",
            quietMillis: 200,

            data: function(term, page, country){
                var country = $('#id_country').val()
                return {term: term,
                        page: page,
                        country: country};
            },

            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 id=	$(element).val();
            var text = $(element).attr('data-init-text');
            callback({id: id, text:text});

        }

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