{% if ymap %}
{% load staticfiles i18n djeymtags djeymfilters %}

{% with request.LANGUAGE_CODE as language_code %}
<!DOCTYPE html>
<html lang="{{ language_code }}">

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <meta name="robots" content="none">

    <title>{{ ymap.title }}</title>

    <!-- START FAVICONS -->
    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'djeym/img/favicons/favicon-32x32.png' %}">
    <link rel="icon" type="image/png" sizes="96x96" href="{% static 'djeym/img/favicons/favicon-96x96.png' %}">
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'djeym/img/favicons/favicon-16x16.png' %}">
    <link rel="shortcut icon" href="{% static 'djeym/img/favicons/favicon.ico' %}" type="image/x-icon">
    <link rel="icon" href="{% static 'djeym/img/favicons/favicon.ico' %}" type="image/x-icon">
    <!-- END FAVICONS -->

    <!-- START CSS -->
    {% for url_css in category_icons_css %}<link rel="stylesheet" type="text/css" href="{{ url_css }}">{% endfor %}
    <link rel="stylesheet" type="text/css" href="{% static "djeym/plugins/really-simple-color-picker/css/colorPicker.min.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "djeym/plugins/fontawesome/css/all.min.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "djeym/plugins/sweetalert2/sweetalert2.min.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "djeym/plugins/boxiOS/boxios.min.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "djeym/css/ymeditor.min.css" %}">

    {% if selected_load_indicator %}
    {% widthratio load_indicator_size 2 1 as margin_offset %}
    <style type="text/css">
        #djeymModalLock { display: block; }
        #djeymLoadIndicator {
            width: {{ load_indicator_size }}px;
            height: {{ load_indicator_size }}px;
            margin: -{{ margin_offset }}px 0 0 -{{ margin_offset }}px;
            content: url('{{ selected_load_indicator.svg.url }}');
            {% if not ymap.disable_indicator_animation %}animation: djeym-spin {{ ymap.animation_speed }}s infinite linear;{% endif %}
        }
    </style>
    {% endif %}
    <!-- END CSS -->

    <!--Support es6 for older browsers-->
    <script src="//unpkg.com/@babel/polyfill@latest/dist/polyfill.min.js" nomodule></script>
</head>

<body>
    <!--[if lte IE 10]>
    <div class="browserupgrade"><div><span>upgrade</span>
        {% blocktrans %}You are using an <strong>outdated</strong> browser.<br>
 Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.{% endblocktrans %}
    </div></div>
    <![endif]-->

    <noscript>
        <div class="noscript">
            <div><span>js</span>
{% blocktrans %}For full functionality of this site it is necessary to enable JavaScript.<br>
Here are the <a href="http://www.enable-javascript.com/" target="_blank">
 instructions how to enable JavaScript in your web browser</a>.{% endblocktrans %}</div></div>
    </noscript>

    <!-- EDITOR PANEL (Панель редактора) -->
    <div id="id_djeym_sidenav" class="djeym-sidenav">
        <div class="djeym-sidenav__wrapper">
            <div class="djeym-sidenav-header">
                <img src="{% static 'djeym/img/logo.svg' %}" class="djeym-logo">
                <div class="djeym-closebtn"></div>
            </div>
            <!-- Editor menu (Меню редактора) -->
            <div id="id_djeym_links_tabs" class="djeym-sidenav-item">
                <fieldset>
                    <legend class="legend_btn_style"><i class="fas fa-th m-r-5"></i>{% trans 'Editor menu' %}</legend>
                    <table class="djeym-matrix-menu block-center">
                        <tr>
                            <td class="djeym-matrix-menu__btn djeym_tab_active"
                                data-id_name="id_djeym_tab_icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </td>
                            <td class="djeym-matrix-menu__btn"
                                data-id_name="id_djeym_tab_category">
                                <i class="fas fa-tasks"></i>
                            </td>
                            <td class="djeym-matrix-menu__btn"
                                data-id_name="id_djeym_tab_tile">
                                <i class="fas fa-paint-roller"></i>
                            </td>
                            <td class="djeym-matrix-menu__btn"
                                data-id_name="id_djeym_tab_controls">
                                <i class="fas fa-cogs"></i>
                            </td>
                            <td class="djeym-matrix-menu__btn"
                                data-id_name="id_djeym_tab_heatmap">
                                <i class="fas fa-fire"></i>
                            </td>
                            <td class="djeym-matrix-menu__btn"
                                data-id_name="id_djeym_tab_about">
                                <i class="fas fa-question"></i>
                            </td>
                        </tr>
                        <tr>
                            <td class="djeym-matrix-menu__btn"
                                data-id_name="id_djeym_tab_presets">
                                <i class="fas fa-code"></i>
                            </td>
                            <td class="djeym-matrix-menu__btn"
                                data-id_name="id_djeym_tab_load_indicators">
                                <i class="fas fa-spinner"></i>
                            </td>
                            <td class="djeym-matrix-menu__btn-empty"></td>
                            <td class="djeym-matrix-menu__btn-empty"></td>
                            <td class="djeym-matrix-menu__btn-empty"></td>
                            <td class="djeym-matrix-menu__btn-empty"></td>
                        </tr>
                    </table>
                </fieldset>
            </div>
            <div class="djeym-sidenav__content">
                <!-- Table for a collection of icons.
                     (Таблица для коллекции иконок.) -->
                <div id="id_djeym_tab_icon" class="djeym-sidenav-item djeym-tab-item">
                    <fieldset>
                        <legend class="legend_btn_style"><i class="fas fa-map-marker-alt m-r-5"></i>{% trans 'Icons' %}</legend>
                        <table id="id_djeym_matrix_icons" class="djeym_content_matrix_icons">
                            {% for icon in icons %}
                                {% if forloop.first %}<tr>{% endif %}
                                    <td style="background-image: url({{ icon.svg.url }}); background-size: auto {{ icon.size_height }}px;"
                                         data-icon_name="{{ icon.slug }}"
                                         data-icon_size="{{ icon.get_size }}"
                                         data-icon_offset="{{ icon.get_offset }}"
                                         data-icon_url="{{ icon.svg.url }}"></td>
                                {% if forloop.counter|divisibleby:'4' %}</tr><tr>{% endif %}
                                {% if forloop.last %}</tr>{% endif %}
                            {% endfor %}
                        </table>
                    </fieldset>
                </div>
                <!-- Filter geo-objects by category.
                     (Фильтр геообъектов по коллекциям.) -->
                <div id="id_djeym_tab_category" class="djeym-sidenav-item djeym-tab-item">
                    <fieldset class="p-b-14">
                        <legend class="legend_btn_style">
                            <i class="fas fa-tasks m-r-5"></i>{% trans 'Filters by categories' %}
                        </legend>
                        <fieldset id="idCategoriesPlacemarks" class="djeym_content_category m-t-20">
                            <legend class="legend_btn_style">
                                <i class="fas fa-map-marker-alt m-r-5"></i>
                                {% trans 'Categories of placemarks' %}</legend>
                            {% for item in category_placemarks %}
                                <p>
                                    <label class="boxios-ios-label">
                                        {% if item.category_icon %}<span class="boxios-ios-icon-display">{{ item.category_icon|safe }}</span>{% endif %}
                                        <span class="boxios-ios-checkbox">
                                            <input type="checkbox" class="filter-by-category-placemarks" checked
                                                   value="{{ item.pk }}" data-jack_color="{{ item.category_color }}">
                                            <span class="boxios-ios-checkbox__value" aria-hidden="true"></span>
                                        </span>
                                        <span class="boxios-ios-label-text">{{ item.title }}</span>
                                    </label>
                                </p>
                            {% endfor %}
                        </fieldset>
                        <fieldset id="idSubcategoriesPlacemarks" class="m-t-20">
                            <legend class="legend_btn_style">
                                <i class="fas fa-map-marker-alt m-r-5"></i>
                                {% trans 'Subcategories of placemarks' %}</legend>
                            {% for item in category_submarks %}
                                <p>
                                    <label class="boxios-ios-label">
                                        {% if item.category_icon %}<span class="boxios-ios-icon-display">{{ item.category_icon|safe }}</span>{% endif %}
                                        <span class="boxios-ios-checkbox">
                                            <input type="checkbox" class="filter-by-category-submarks"
                                                   value="{{ item.pk }}" data-jack_color="{{ item.category_color }}">
                                            <span class="boxios-ios-checkbox__value" aria-hidden="true"></span>
                                        </span>
                                        <span class="boxios-ios-label-text">{{ item.title }}</span>
                                    </label>
                                </p>
                            {% endfor %}
                        </fieldset>
                        <fieldset id="idCategoriesRoutes" class="m-t-20">
                            <legend class="legend_btn_style">
                                <i class="fas fa-project-diagram m-r-5"></i>
                                {% trans 'Categories of routes' %}</legend>
                            {% for item in category_polylines %}
                                <p>
                                    <label class="boxios-ios-label">
                                        {% if item.category_icon %}<span class="boxios-ios-icon-display">{{ item.category_icon|safe }}</span>{% endif %}
                                        <span class="boxios-ios-checkbox">
                                            <input type="checkbox" class="filter-by-category-polylines" checked
                                                   value="{{ item.pk }}" data-jack_color="{{ item.category_color }}">
                                            <span class="boxios-ios-checkbox__value" aria-hidden="true"></span>
                                        </span>
                                        <span class="boxios-ios-label-text">{{ item.title }}</span>
                                    </label>
                                </p>
                            {% endfor %}
                        </fieldset>
                        <fieldset id="idCategoriesTerritories" class="m-t-20">
                            <legend class="legend_btn_style">
                                <i class="fas fa-shapes m-r-5"></i>
                                {% trans 'Categories of territories' %}</legend>
                            {% for item in category_polygons %}
                                <p>
                                    <label class="boxios-ios-label">
                                        {% if item.category_icon %}<span class="boxios-ios-icon-display">{{ item.category_icon|safe }}</span>{% endif %}
                                        <span class="boxios-ios-checkbox">
                                            <input type="checkbox" class="filter-by-category-polygons" checked
                                                   value="{{ item.pk }}" data-jack_color="{{ item.category_color }}">
                                            <span class="boxios-ios-checkbox__value" aria-hidden="true"></span>
                                        </span>
                                        <span class="boxios-ios-label-text">{{ item.title }}</span>
                                    </label>
                                </p>
                            {% endfor %}
                        </fieldset>
                    </fieldset>
                </div>
                <!-- Table for tile sources.
                     (Таблица для источников тайлов.) -->
                <div id="id_djeym_tab_tile" class="djeym-sidenav-item djeym-tab-item">
                    <fieldset>
                        <legend class="legend_btn_style"><i class="fas fa-paint-roller m-r-5"></i>{% trans 'Tile Sources' %}</legend>
                        <table id="id_djeym_tile_sources" class="djeym_content_tile_sources font-14">
                            <caption class="font-gray-999 font-12 p-t-5 p-b-15">
                                <table>
                                    <tr>
                                        <td valign="top"><i class="fas fa-info-circle font-dark-blue m-r-5"></i></td>
                                        <td valign="top">{% trans 'If you need to add an api key, go to the admin panel - YANDEX MAPS / Tile Sources.' %}</td>
                                    </tr>
                                </table>
                            </caption>
                            <tr>
                                <td height="60" width="45%" style="background: url({% static 'djeym/img/default_tile.png' %}) 
                                    no-repeat center; background-size: cover;"></td>
                                <td width="55%"class="border-line-ddd">
                                    <label class="boxios-ios-label">
                                        <span class="boxios-ios-radio">
                                            <input type="radio" name="tile" {% if not ymap.tile %}checked {% endif %}
                                                data-tile-id="0" class="djeym_select_tile_sources">
                                            <span class="boxios-ios-radio__value" aria-hidden="true"></span>
                                        </span>
                                        <span class="boxios-ios-label-text">{% trans 'Default' %}<br><small>max zoom 23</small></span>
                                    </label>
                                </td>
                            </tr>
                            {% for item in tile_sources %}
                                <tr>
                                    <td height="60" width="45%" style="background: url({{ item.screenshot.url }}) 
                                        no-repeat center; background-size: cover;"></td>
                                    <td width="55%"{% if not forloop.last %} class="border-line-ddd"{% endif %}>
                                        <label class="boxios-ios-label">
                                            <span class="boxios-ios-radio">
                                                <input type="radio" name="tile" {% if item.pk == tile.pk %}checked {% endif %}
                                                    data-tile-id="{{ item.pk }}" class="djeym_select_tile_sources">
                                                <span class="boxios-ios-radio__value" aria-hidden="true"></span>
                                            </span>
                                            <span class="boxios-ios-label-text">{{ item.title }}<br><small>max zoom {{ item.maxzoom }}</small></span>
                                        </label>
                                    </td>
                                </tr>
                            {% endfor %}
                        </table>
                    </fieldset>
                </div>
                <!-- General settings and map controls.
                     (Общие настройки и элементы управления картой.) -->
                <div id="id_djeym_tab_controls" class="djeym-sidenav-item djeym-tab-item">
                    <!-- General settings.
                        (Общие настройки.) -->
                    <fieldset class="djeym_content_map_controls p-t-10">
                        <legend class="legend_btn_style"><i class="fas fa-cogs m-r-5"></i>{% trans 'General settings' %}</legend>
                        <form id="djeymGeneralSettingsForm" action="{% url 'djeym:ajax_general_settings' %}" method="post">{% csrf_token %}
                            <input type="hidden" name="ymap" value="{{ ymap.pk }}">
                            <div class="m-t-20 border-line-ddd p-b-10">
                                <label class="boxios-ios-label">
                                    <span class="boxios-ios-icon-display">
                                        <i class="far fa-check-circle"></i></span>
                                    <span class="boxios-ios-checkbox">
                                        <input class="boxios-checkbox_map_controls" name="roundtheme" 
                                            type="checkbox" {% if external_modules.roundtheme %}checked {% endif %}>
                                        <span class="boxios-ios-checkbox__value" aria-hidden="true"></span>
                                    </span>
                                    <span class="boxios-ios-label-text">{% trans 'Activate round theme' %}</span>
                                </label>
                            </div>
                            <div class="m-t-10 border-line-ddd p-b-10">
                                <label class="boxios-ios-label">
                                    <span class="boxios-ios-icon-display">
                                        <i class="fab fa-cloudsmith"></i></span>
                                    <span class="boxios-ios-checkbox">
                                        <input class="boxios-checkbox_map_controls" name="clustering_edit"
                                            type="checkbox"{% if general_settings.clustering_edit %} checked{% endif %}>
                                        <span class="boxios-ios-checkbox__value" aria-hidden="true"></span>
                                    </span>
                                    <span class="boxios-ios-label-text">{% trans 'Сlustering in editor' %}</span>
                                </label>
                            </div>
                            <div class="m-t-10 border-line-ddd p-b-10">
                                <label class="boxios-ios-label">
                                    <span class="boxios-ios-icon-display">
                                        <i class="fab fa-cloudsmith"></i></span>
                                    <span class="boxios-ios-checkbox">
                                        <input class="boxios-checkbox_map_controls" name="clustering_site"
                                            type="checkbox"{% if general_settings.clustering_site %} checked{% endif %}>
                                        <span class="boxios-ios-checkbox__value" aria-hidden="true"></span>
                                    </span>
                                    <span class="boxios-ios-label-text">{% trans 'Сlustering on site' %}</span>
                                </label>
                            </div>
                            <table class="m-t-10 border-line-ddd p-b-10">
                                <tr><td width="25" valign="top" class="font-14"><i class="far fa-comment-alt font-gray-666"></i></td>
                                    <td valign="top" class="font-14">{% trans 'Layout for the cluster information window' %}</td></tr>
                                <tr>
                                    <td width="25" valign="top"></td>
                                    <td valign="top">
                                        <div>
                                            <label class="boxios-ios-label">
                                                <span class="boxios-ios-radio">
                                                    <input class="boxios-radio_cluster_balloon_layout" type="radio" 
                                                        name="cluster_layout" value="cluster#balloonTwoColumns"
                                                        {% if general_settings.cluster_layout == 'cluster#balloonTwoColumns' %} checked{% endif %}>
                                                    <span class="boxios-ios-radio__value" aria-hidden="true"></span>
                                                </span>
                                                <span class="boxios-ios-label-text">{% trans 'Two Columns' %}</span>
                                            </label>
                                        </div>
                                        <div class="m-t-5">
                                            <label class="boxios-ios-label">
                                                <span class="boxios-ios-radio">
                                                    <input class="boxios-radio_cluster_balloon_layout" type="radio" 
                                                        name="cluster_layout" value="cluster#balloonCarousel"
                                                        {% if general_settings.cluster_layout == 'cluster#balloonCarousel' %} checked{% endif %}>
                                                    <span class="boxios-ios-radio__value" aria-hidden="true"></span>
                                                </span>
                                                <span class="boxios-ios-label-text">{% trans 'Carousel' %}</span>
                                            </label>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                            <div class="m-t-10">
                                <label class="boxios-ios-label">
                                    <span class="boxios-ios-icon-display">
                                        <i class="fas fa-bullseye"></i></span>
                                    <span class="boxios-ios-checkbox">
                                        <input class="boxios-checkbox_map_controls" name="cluster_icon_content"
                                            type="checkbox"{% if general_settings.cluster_icon_content %} checked{% endif %}>
                                        <span class="boxios-ios-checkbox__value" aria-hidden="true"></span>
                                    </span>
                                    <span class="boxios-ios-label-text">{% trans 'Display the number of objects in the cluster icon' %}</span>
                                </label>
                            </div>
                            <table class="width-100 m-t-10 border-line-ddd p-b-10">
                                <tr>
                                    <td><input type="text" name="cluster_icon_content_bg_color" 
                                        class="djeym-general-settings-color" 
                                        value="{{ general_settings.cluster_icon_content_bg_color }}"></td>
                                    <td class="font-14">{% trans 'Background color' %}</td>
                                    <td><input type="text" name="cluster_icon_content_txt_color" 
                                        class="djeym-general-settings-color" 
                                        value="{{ general_settings.cluster_icon_content_txt_color }}"></td>
                                    <td class="font-14">{% trans 'Text color' %}</td>
                                </tr>
                            </table>
                            <div class="text-center m-t-15 p-b-0">
                                <button type="submit" class="djeym-button"><i class="fas fa-save"></i></button></div>
                        </form>
                    </fieldset>
                    <!-- Map controls.
                        (Элементы управления картой.) -->
                    <fieldset class="m-t-20">
                        <legend class="legend_btn_style"><i class="fas fa-cogs m-r-5"></i>{% trans 'Map Controls' %}</legend>
                        <form id="djeymMapControlsForm" action="{% url 'djeym:ajax_map_controls' %}" method="post">{% csrf_token %}
                            <table id="id_djeym_map_controls" class="djeym_map_controls">
                                {% for field in form_controls %}
                                    {% if field.html_name != 'ymap' and field.html_name != 'maptype' %}
                                        <tr>
                                            <td{% if field.html_name == 'typeselector' %} class="border-none"{% endif %}>
                                                <img src="/static/djeym/img/map_controls/{{ field.html_name }}.png" 
                                                    height="{% if field.html_name  == 'provider' %}111{% elif field.html_name  == 'zoom' %}68{% else %}33{% endif %}" 
                                                    alt="{% trans 'Screenshot' %}"></td>
                                            <td{% if field.html_name == 'typeselector' %} class="border-none"{% endif %}>
                                                <label class="boxios-ios-label">
                                                    <span class="boxios-ios-checkbox">
                                                        <input class="boxios-checkbox_map_controls" id="{{ field.id_for_label }}" 
                                                            type="checkbox" {% if field.value %}checked {% endif %}
                                                            name="{{ field.html_name }}">
                                                        <span class="boxios-ios-checkbox__value" aria-hidden="true"></span>
                                                    </span>
                                                    <span class="boxios-ios-label-text">{{ field.label }}</span>
                                                </label>
                                            </td>
                                        </tr>
                                        {% if field.html_name == 'typeselector' %}
                                            <tr><td colspan="2">
                                                <div>{{ form_controls.maptype.label }}</div>
                                                <div>{{ form_controls.maptype }}</div></td></tr>
                                        {% endif %}
                                    {% elif field.html_name != 'maptype' %}
                                        <tr><td colspan="2" class="border-none">{{ field }}</td></tr>
                                    {% endif %}
                                {% endfor %}
                                <tr><td align="center" colspan="2" class="p-t-15 border-none p-b-0">
                                        <button type="submit" class="djeym-button"><i class="fas fa-save"></i></button></td></tr>
                            </table>
                        </form>
                    </fieldset>
                </div>
                <!-- Form to settings the heatmap.
                     (Форма для настройки тепловой карты.) -->
                <div id="id_djeym_tab_heatmap" class="djeym-sidenav-item djeym-tab-item">
                    <fieldset class="p-t-10">
                        <div><label class="boxios-ios-label">
                                <span class="boxios-ios-icon-display">
                                    <i class="far fa-check-circle"></i></span>
                                <span class="boxios-ios-checkbox">
                                    <input class="boxios-checkbox_heatmap" id="id_djeym_activate_heatmap" 
                                        type="checkbox" {% if external_modules.heatmap %}checked {% endif %}name="heatmap">
                                    <span class="boxios-ios-checkbox__value" aria-hidden="true"></span>
                                </span>
                                <span class="boxios-ios-label-text">{% trans 'Activate Heatmap' %}</span>
                            </label></div>
                        {% if external_modules.heatmap %}
                        <div class="text-center m-t-15"><button id="id_djeym_heatmap_undo_settings" type="button" class="djeym-button">
                            <div class="font-12"><i class="fas fa-undo-alt m-r-5"></i>{% trans 'Reset to default settings' %}
                            </div></button></div>
                        {% endif %}
                    </fieldset>
                    <fieldset class="m-t-20"{% if not external_modules.heatmap %} disabled{% endif %}>
                        <legend class="legend_btn_style"><i class="fas fa-fire m-r-5"></i>
                            {% trans 'Heatmap settings' %}</legend>
                        <form id="heatmapSettingsForm" class="djeym_content_heatmap" 
                            action="{% url 'djeym:ajax_heatmap_settings' %}" method="post">
                            {% csrf_token %}
                            {{ heat_form.ymap }}
                            <table id="id_djeym_heatmap_color_table" class="width-100">
                                <tr><td colspan="4" class="border-none font-14">{% trans 'Gradient' %}</td></tr>
                                <tr>
                                    <td align="center">{{ heat_form.gradient_color1 }}</td>
                                    <td align="center">{{ heat_form.gradient_color2 }}</td>
                                    <td align="center">{{ heat_form.gradient_color3 }}</td>
                                    <td align="center">{{ heat_form.gradient_color4 }}</td>
                                </tr>
                            </table>
                            <table id="id_djeym_heatmap_settings_table" class="width-100">
                                <tr><td colspan="2">
                                    <label for="id_djeym_heatmap_radius">{{ heat_form.radius.label }}</label> {{ heat_form.radius }}</td></tr>
                                {% for field in heat_form %}
                                    {% if field.html_name == 'dissipating' %}
                                        <tr>
                                            <td colspan="2">
                                                <label class="boxios-ios-label">
                                                    <span class="boxios-ios-checkbox">
                                                        <input class="boxios-checkbox_heatmap" id="{{ field.id_for_label }}" 
                                                            type="checkbox" {% if field.value %}checked {% endif %}
                                                            name="{{ field.html_name }}">
                                                        <span class="boxios-ios-checkbox__value" aria-hidden="true"></span>
                                                    </span>
                                                    <span class="boxios-ios-label-text">{{ field.label }}</span>
                                                </label>
                                            </td>
                                        </tr>
                                    {% elif field.html_name == 'opacity' %}
                                        <tr>
                                            <td width="10%">
                                                <div id="id_djeym_heatmap_opacity_value">0</div></td>
                                            <td>
                                                <div class="boxios-ios-range-slider">
                                                    <label for="id_djeym_heatmap_opacity">{{ field.label }}</label>
                                                    <input id="id_djeym_heatmap_opacity" type="range" name="{{ field.html_name }}"
                                                        class="boxios-ios-range-slider__range m-t-20" value="{{ field.value }}" 
                                                        min="0" max="1" step="0.1" data-redirect_value_to="#id_djeym_heatmap_opacity_value">
                                                </div>
                                            </td>
                                        </tr>
                                    {% elif field.html_name == 'intensity' %}
                                        <tr>
                                            <td width="10%">
                                                <div id="id_djeym_heatmap_intensity_value">0</div></td>
                                            <td>
                                                <div class="boxios-ios-range-slider">
                                                    <label for="id_djeym_heatmap_intensity">{{ field.label }}</label>
                                                    <input id="id_djeym_heatmap_intensity" type="range" name="{{ field.html_name }}"
                                                        class="boxios-ios-range-slider__range m-t-20" value="{{ field.value }}" 
                                                        min="0" max="1" step="0.1" data-redirect_value_to="#id_djeym_heatmap_intensity_value">
                                                </div>
                                            </td>
                                        </tr>
                                    {% endif %}
                                {% endfor %}
                                <tr><td colspan="2" align="center" class="p-t-20 border-none p-b-0">
                                        <button type="submit" class="djeym-button"><i class="fas fa-save"></i></button></td></tr>
                            </table>
                        </form>
                    </fieldset>
                </div>
                <!-- About editor -->
                <div id="id_djeym_tab_about" class="djeym-sidenav-item djeym-tab-item">
                    <fieldset>
                        <legend class="legend_btn_style"><i class="fas fa-question m-r-5"></i>
                            {% trans 'About editor' %}</legend>
                        <div class="djeym_content_about">
                            <div class="font-22 font-bold font-gray-333 m-t-10">django-editor-ymaps</div>
                            <div class="font-gray-333 font-14 m-t-10">
                                {% trans 'Convenient use of the Yandex map service for web development on the popular and free Django framework.' %}
                            </div>
                            <div class="m-t-30">
                                <div><span class="font-gray-333 font-bold">Version: </span>
                                    <span class="djeym-badge-yellow">{{ djeym_version }}</span></div>
                                <div class="m-t-10"><span class="font-gray-333 font-bold">Requirements:</span><br>
                                    <span class="djeym-badge-yellow">Python >= 3.5</span>
                                    <span class="djeym-badge-yellow m-r-5">Django >= 2.0</span></div></div>
                            <div class="m-t-20">
                                <i class="fab fa-python font-blue"></i>
                                <span class="font-gray-333 font-bold"> PyPI: </span>
                                <a href="https://pypi.org/project/django-editor-ymaps/" 
                                    class="font-16" target="_blank" rel="nofollow">django-editor-ymaps</a></div>
                            <div class="m-t-5">
                                <i class="fab fa-github font-blue"></i><span class="font-gray-333 font-bold"> GitHub: </span>
                                <a href="https://github.com/kebasyaty/django-editor-ymaps" 
                                    class="font-16" target="_blank" rel="nofollow">django-editor-ymaps</a></div>
                            <div class="m-t-5">
                                <i class="fas fa-at font-blue"></i>
                                <span class="font-gray-333 font-bold"> Feedback: </span>
                                <a href="mailto:kebasyaty@gmail.com?subject=DjEYM"
                                class="font-16" rel="nofollow">kebasyaty@gmail.com</a></div>
                            <div class="m-t-5">
                                <i class="fas fa-certificate font-blue"></i>
                                <span class="font-gray-333 font-bold"> License: </span>
                                <a href="https://github.com/kebasyaty/django-editor-ymaps/blob/master/LICENSE"
                                class="font-16" target="_blank" rel="nofollow">MIT License</a></div>
                            <div class="m-t-20 font-light-yellow font-72 text-center">
                                <i class="fas fa-map-marked-alt"></i></div>
                        </div>
                    </fieldset>
                </div>
                <!-- Table for Presets.
                     (Таблица для Пресетов.) -->
                <div id="id_djeym_tab_presets" class="djeym-sidenav-item djeym-tab-item">
                    <fieldset>
                        <legend class="legend_btn_style"><i class="fas fa-code m-r-5"></i>{% trans 'Presets' %}</legend>
                        <table id="id_djeym_presets" class="djeym_content_presets font-14 width-100">
                            {% include 'djeym/includes/presets.html' %}
                        </table>
                    </fieldset>
                </div>
                <!-- Table of icons for loading indicators.
                     (Таблица иконок для индикаторов загрузки.) -->
                <div id="id_djeym_tab_load_indicators" class="djeym-sidenav-item djeym-tab-item">
                    <fieldset>
                        <legend class="legend_btn_style"><i class="fas fa-spinner m-r-5"></i>{% trans 'Load indicators' %}</legend>
                        <table id="id_djeym_load_indicators" class="djeym_content_load_indicators font-14 width-100">
                            <tr>
                                <td width="48"></td>
                                <td colspan="2">
                                    <label class="boxios-ios-label">
                                        <span class="boxios-ios-radio">
                                            <input class="boxios-radio-load_indicator" 
                                                type="radio"{% if not selected_load_indicator %} checked{% endif %} name="load_indicator" 
                                                value="default">
                                            <span class="boxios-ios-radio__value" aria-hidden="true"></span>
                                        </span>Default
                                    </label>
                                </td>
                            </tr>
                            {% for indicator in load_indicators  %}
                                <tr>
                                    <td width="48"{% if forloop.last %} class="border-line-ddd p-b-15"{% endif %}>
                                        <img src="{{ indicator.svg.url }}" width="32" alt="Icon"></td>
                                    <td colspan="2"{% if forloop.last %} class="border-line-ddd p-b-15"{% endif %}>
                                        <label class="boxios-ios-label">
                                            <span class="boxios-ios-radio">
                                                <input class="boxios-radio-load_indicator" 
                                                    type="radio"{% if selected_load_indicator == indicator %} checked{% endif %} name="load_indicator" 
                                                    value="{{ indicator.slug }}">
                                                <span class="boxios-ios-radio__value" aria-hidden="true"></span>
                                            </span>{{ indicator.title }}
                                        </label>
                                    </td>
                                </tr>
                            {% endfor %}
                            {% if load_indicators %}
                                <tr>
                                    <td colspan="3" class="p-t-15">{% trans 'Size' %}</td>
                                </tr>
                                <tr>
                                    <td width="33%" class="border-line-ddd p-b-15">
                                        <label class="boxios-ios-label">
                                            <span class="boxios-ios-radio">
                                                <input class="boxios-radio-load_indicator_size" 
                                                    type="radio"{% if load_indicator_size == 64 %} checked{% endif %} name="load_indicator_size" 
                                                    value="64">
                                                <span class="boxios-ios-radio__value" aria-hidden="true"></span>
                                            </span>64
                                        </label>
                                    </td>
                                    <td width="33%" class="border-line-ddd p-b-15">
                                        <label class="boxios-ios-label">
                                            <span class="boxios-ios-radio">
                                                <input class="boxios-radio-load_indicator_size" 
                                                    type="radio"{% if load_indicator_size == 96 %} checked{% endif %} name="load_indicator_size" 
                                                    value="96">
                                                <span class="boxios-ios-radio__value" aria-hidden="true"></span>
                                            </span>96
                                        </label>
                                    </td>
                                    <td width="33%" class="border-line-ddd p-b-15">
                                        <label class="boxios-ios-label">
                                            <span class="boxios-ios-radio">
                                                <input class="boxios-radio-load_indicator_size" 
                                                    type="radio"{% if load_indicator_size == 128 %} checked{% endif %} name="load_indicator_size" 
                                                    value="128">
                                                <span class="boxios-ios-radio__value" aria-hidden="true"></span>
                                            </span>128
                                        </label>
                                    </td>
                                </tr>
                                    <tr>
                                        <td colspan="3" class="border-line-ddd p-t-15 p-b-15">
                                            <div class="boxios-ios-range-slider">
                                                <label for="id_djeym_animation_speed"><div>{% trans 'Animation speed' %}:</div>
                                                    <div class="font-gray-999">{% trans 'One turn per' %}
                                                    <span id="id_djeym_animation_speed_value" class="font-gray-333">{{ ymap.animation_speed }}</span>
                                                    {% trans 'sec.' %}</div>
                                                </label>
                                                <input id="id_djeym_animation_speed" type="range" name="animation_speed" 
                                                    class="boxios-ios-range-slider__range m-t-20" value="{{ ymap.animation_speed }}" 
                                                    min="0.3" max="1.8" step="0.1" data-redirect_value_to="#id_djeym_animation_speed_value">
                                            </div>
                                        </td>
                                    </tr>
                                </tr>
                                <tr>
                                    <td colspan="3" class="border-line-ddd p-t-15 p-b-15">
                                        <label class="boxios-ios-label">
                                            <span class="boxios-ios-icon-display">
                                                <i class="fas fa-ban"></i></span>
                                            <span class="boxios-ios-checkbox">
                                                <input class="boxios-checkbox_disable_loading_indicator_animation"
                                                    {% if ymap.disable_indicator_animation %} checked{% endif %} type="checkbox">
                                                <span class="boxios-ios-checkbox__value" aria-hidden="true"></span>
                                            </span>
                                            <span class="boxios-ios-label-text">{% trans 'Disable animation' %}</span>
                                        </label>
                                    </td>
                                </tr>
                                <tr><td colspan="3" align="center" class="p-t-20">
                                        <button type="button" class="djeym-button" id="id_djeym_button_change_load_indicator">
                                            <i class="fas fa-save"></i></button></td></tr>
                            {% endif %}
                        </table>
                    </fieldset>
                </div>
            </div>
            <div class="djeym-sidenav__footer font-14 bg-gray-eee font-gray-999">
                <i class="far fa-copyright font-12"></i> {{ '2014'|year_copyright }} DjEYM
            </div>
        </div>
    </div>

    <!-- MAP -->
    <div id="djeymYMapsID" class="djeym-ymap"></div>

    <!-- CKEditor - Get config -->
    <div class="hidden">{{ form_cke.ckeditor_textarea }}</div>

    <!-- CKEditor_- Resize image -->
    <canvas id="cke_temp_canvas" class="hidden"></canvas>

    <!-- GEO-OBJECTS TRANSFER FORM. (Форма передачи геообъектов.) -->
    <form id="id_form_geoobjects" class="hidden" 
        action="{% url 'djeym:ajax_save_geo_object' %}" method="post">{% csrf_token %}
        {% for field in form_geo %}{{ field }}{% endfor %}
    </form>

    <!-- ACTION MENU (Меню действий) -->
    <div id="id_hidden_action_menu__content" class="hidden">
        <table class="djeym__table_balloon_context djeym-matrix-menu block-center">
            <tr>
                <td class="djeym_add_placemark djeym-matrix-menu__btn">
                    <i class="fas fa-map-marker-alt"></i></td>
                <td class="djeym_add_polyline djeym-matrix-menu__btn">
                    <i class="fas fa-project-diagram"></i></td>
                <td class="djeym_add_polygon djeym-matrix-menu__btn">
                    <i class="fas fa-shapes"></i></td>
                {% if external_modules.heatmap %}
                    <td class="djeym_add_heat_point djeym-matrix-menu__btn">
                        <i class="fas fa-fire"></i></td>
                {% endif %}
            </tr>
        </table>
    </div>

    <!-- Action menu - Footer -->
    <div id="id_hidden_action_menu__footer" class="hidden">
        <table>
            <tr>
                <td valign="top"><i class="fas fa-info-circle m-r-10 font-dark-blue font-12"></i></td>
                <td>{% trans 'Button assignment' %}:<br>
                    <table>
                        <tr>
                            <td valign="top"><i class="fas fa-map-marker-alt"></i></td>
                            <td>{% trans 'Add New Marker' %}</td></tr>
                        <tr>
                            <td valign="top"><i class="fas fa-project-diagram"></i></td>
                            <td>{% trans 'Add a new Route' %}</td></tr>
                        <tr>
                            <td valign="top"><i class="fas fa-shapes"></i></td>
                            <td>{% trans 'Add new Territory' %}</td></tr>
                        {% if external_modules.heatmap %}
                            <tr>
                                <td valign="top"><i class="fas fa-fire"></i></td>
                                <td>{% trans 'Add new Heat Point' %}</td></tr>
                        {% endif %}
                    </table>
                </td>
            </tr>
        </table>
    </div>

    <!-- CREATE NEW HEAT POINT (Создать новую тепловую точку.) -->
    <!-- CONTEXT MENU FOR HEAT POINT (Контекстное меню для тепловой точки.) -->
    <div id="id_hidden_heatpoint__content" class="hidden">
        <table class="djeym__table_balloon_context block-center m-t-10">
            <tr><td class="p-t-10">
                <input id="id_djeym_heatpoint_title" type="text" value="" maxlength="60" 
                    placeholder="{% trans 'Place name' %}">
                <div class="small">( {% trans 'Optional field.' %} )</div></td></tr>
            <tr><td class="p-t-20">
                <input id="id_djeym_heatpoint_weight" type="number" value="0" min="0" 
                    placeholder="{% trans 'Weight' %}">
                <div class="small">{% trans 'The quantitative significance of the point.' %}</div>
                <div class="small" style="margin-top:-5px;">( {% trans 'Optional field.' %} )</div></td></tr>
            <tr class="buttons-create-new-heatpoint">
                <td class="p-t-20">
                    <table class="djeym-matrix-menu block-center">
                        <tr>
                            <td class="saveHeatPoint djeym-matrix-menu__btn font-green">
                                <i class="fas fa-plus"></i></td>
                            <td class="cancelHeatPoint djeym-matrix-menu__btn font-light-red">
                                <i class="fas fa-ban"></i></td>
                            <td class="helpHeatPoint djeym-matrix-menu__btn">
                                <i class="fas fa-question"></i></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <!-- Footer - Create new Heat Point -->
    <div id="id_hidden_heatpoint__create__footer" class="hidden"></div>
    <!-- Footer - Context menu for Heat Point -->
    <div id="id_hidden_heatpoint__context__footer" class="hidden"></div>

    <!-- CREATE NEW PLACEMARK (Создать новый указатель) -->
    <!-- CONTEXT MENU FOR PLACEMARK (Контекстное меню для указателей.) -->
    <div id="id_hidden_placemark__content" class="hidden">
        <table class="djeym__table_balloon_context">
            <tr>
                <td>
                    <table class="djeym-matrix-menu block-center">
                        <tr>
                            <td class="djeym-matrix-menu__btn djeym_text_content"
                                data-target_var_name="balloonContentHeader">
                                <i class="fas fa-heading"></i></td>
                            <td class="djeym-matrix-menu__btn djeym_text_content"
                                data-target_var_name="balloonContentBody">
                                <i class="far fa-file-image"></i></td>
                            <td class="djeym-matrix-menu__btn djeym_text_content"
                                data-target_var_name="balloonContentFooter">
                                <i class="fas fa-arrow-down"></i></td>
                            <td class="djeym-matrix-menu__btn" id="id_select_category">
                                <i class="fas fa-tasks"></i></td>
                            <td class="djeym-matrix-menu__btn" id="id_djeym_help">
                                <i class="fas fa-question"></i></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td class="text-center">
                    <img src="{% static 'djeym/img/hat.svg' %}" class="djeym_hat_decor" alt="Hat">
                </td>
            </tr>
            <tr>
                <td class="text-center">
                    <img src="" id="id_icon" class="djeym_marker_icon" alt="Icon">
                </td>
            </tr>
            <tr class="buttons-create-new-placemark">
                <td>
                    <table class="djeym-matrix-menu block-center">
                        <tr>
                            <td class="savePlacemark djeym-matrix-menu__btn font-green">
                                <i class="fas fa-plus"></i></td>
                            <td class="cancelPlacemark djeym-matrix-menu__btn font-light-red">
                                <i class="fas fa-ban"></i></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr class="buttons-context-menu-placemark">
                <td>
                    <table class="djeym-matrix-menu block-center">
                        <tr>
                            <td class="savePlacemark djeym-matrix-menu__btn font-dark-blue">
                                <i class="far fa-save"></i></td>
                            <td class="cancelPlacemark djeym-matrix-menu__btn font-light-red">
                                <i class="fas fa-ban"></i></td>
                            <td class="delPlacemark djeym-matrix-menu__btn">
                                <i class="far fa-trash-alt font-red"></i></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <!-- Footer - Create new Placemark -->
    <div id="id_hidden_placemark__create__footer" class="hidden"></div>
    <!-- Footer - Context menu for Placemark -->
    <div id="id_hidden_placemark__context__footer" class="hidden"></div>

    <!-- CREATE NEW POLYLINE (Создать новый маршрут) -->
    <!-- CONTEXT MENU FOR POLYLINE (Контекстное меню для маршрутов) -->
    <div id="id_hidden_polyline__content" class="hidden">
        <table class="djeym__table_balloon_context">
            <tr>
                <td colspan="2">
                    <table class="djeym-matrix-menu block-center">
                        <tr>
                            <td class="djeym-matrix-menu__btn djeym_text_content"
                                data-target_var_name="balloonContentHeader">
                                <i class="fas fa-heading"></i></td>
                            <td class="djeym-matrix-menu__btn djeym_text_content"
                                data-target_var_name="balloonContentBody">
                                <i class="far fa-file-image"></i></td>
                            <td class="djeym-matrix-menu__btn djeym_text_content"
                                data-target_var_name="balloonContentFooter">
                                <i class="fas fa-arrow-down"></i></td>
                            <td class="djeym-matrix-menu__btn djeym" id="id_select_category">
                                <i class="fas fa-tasks"></i></td>
                            <td class="djeym-matrix-menu__btn" id="id_djeym_help">
                                <i class="fas fa-question"></i></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td width="120" class="font-14 p-t-10">
                    <i class="fas fa-paint-roller font-blue m-r-5"></i>{% trans 'Line color' %}:</td>
                <td class="p-t-10"><input id="id_color_line" type="text" value=""></td>
            </tr>
            <tr>
                <td colspan="2" class="font-14 p-t-15">
                    <i class="fas fa-exchange-alt font-blue m-r-5"></i>
                    {% trans 'Stroke width' %}: <span id="id_handle_width_line" class="slider-handle">0</span></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="boxios-ios-range-slider">
                        <input id="id_slider_width_line" type="range" class="boxios-ios-range-slider__range"
                               data-redirect_value_to=".djeym__balloon__content-body #id_handle_width_line">
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="font-14 p-t-10">
                    <i class="fas fa-exchange-alt font-blue m-r-5"></i>
                    {% trans 'Opacity line' %}: <span id="id_handle_opacity_line" class="slider-handle">0</span></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="boxios-ios-range-slider">
                        <input id="id_slider_opacity_line" type="range" class="boxios-ios-range-slider__range"
                               data-redirect_value_to=".djeym__balloon__content-body #id_handle_opacity_line">
                    </div>
                </td>
            </tr>
            <tr class="buttons-create-new-polyline">
                <td colspan="2" class="p-t-15">
                    <table class="djeym-matrix-menu block-center">
                        <tr>
                            <td class="editPolyline djeym-matrix-menu__btn font-green">
                                <i class="fas fa-plus"></i></td>
                            <td class="cancelPolyline djeym-matrix-menu__btn font-light-red">
                                <i class="fas fa-ban"></i></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr class="buttons-context-menu-polyline">
                <td colspan="2" class="p-t-15">
                    <table class="djeym-matrix-menu block-center">
                        <tr>
                            <td class="editPolyline djeym-matrix-menu__btn font-green">
                                <i class="fas fa-edit"></i></td>
                            <td class="savePolyline djeym-matrix-menu__btn font-dark-blue">
                                <i class="far fa-save"></i></td>
                            <td class="cancelPolyline djeym-matrix-menu__btn font-light-red">
                                <i class="fas fa-ban"></i></td>
                            <td class="delPolyline djeym-matrix-menu__btn">
                                <i class="far fa-trash-alt font-red"></i></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <!-- Footer - Create new Polyline -->
    <div id="id_hidden_polyline__create__footer" class="hidden"></div>
    <!-- Footer - Context menu for Polyline -->
    <div id="id_hidden_polyline__context__footer" class="hidden"></div>

    <!-- CREATE A NEW POLYGON (Создать новую территорию) -->
    <!-- CONTEXT MENU FOR POLYGON (Контекстное меню для территорий) -->
    <div id="id_hidden_polygon__content" class="hidden">
        <table class="djeym__table_balloon_context">
            <tr>
                <td colspan="2">
                    <table class="djeym-matrix-menu block-center">
                        <tr>
                            <td class="djeym-matrix-menu__btn djeym_text_content"
                                data-target_var_name="balloonContentHeader">
                                <i class="fas fa-heading"></i></td>
                            <td class="djeym-matrix-menu__btn djeym_text_content"
                                data-target_var_name="balloonContentBody">
                                <i class="far fa-file-image"></i></td>
                            <td class="djeym-matrix-menu__btn djeym_text_content"
                                data-target_var_name="balloonContentFooter">
                                <i class="fas fa-arrow-down"></i></td>
                            <td class="djeym-matrix-menu__btn djeym"
                                id="id_select_category">
                                <i class="fas fa-tasks"></i></td>
                            <td class="djeym-matrix-menu__btn" id="id_djeym_help">
                                <i class="fas fa-question"></i></td>
                        </tr>
                    </table>
                </td>
            </tr>
            {% if external_modules.areacalculation %}
            <tr>
                <td colspan="2" align="center" id="id_djeym_result_calculate_area" 
                    class="djeym_result_calculate_area">0 м²</td>
            </tr>
            {% endif %}
            <tr>
                <td width="120" class="font-14 p-t-10">
                    <i class="fas fa-paint-roller font-blue m-r-5"></i>{% trans 'Line color' %}:</td>
                <td class="p-t-10"><input id="id_color_line" type="text" value=""></td>
            </tr>
            <tr>
                <td width="120" class="font-14 p-t-10">
                    <i class="fas fa-paint-roller font-blue m-r-5"></i>{% trans 'Fill color' %}:</td>
                <td class="p-t-10"><input id="id_color_fill" type="text" value=""></td>
            </tr>
            <tr>
                <td colspan="2" class="font-14 p-t-15">
                    <i class="fas fa-exchange-alt font-blue m-r-5"></i>
                    {% trans 'Stroke width' %}: <span id="id_handle_width_line" class="slider-handle">0</span></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="boxios-ios-range-slider">
                        <input id="id_slider_width_line" type="range" class="boxios-ios-range-slider__range"
                               data-redirect_value_to=".djeym__balloon__content-body #id_handle_width_line">
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="font-14 p-t-10">
                    <i class="fas fa-exchange-alt font-blue m-r-5"></i>
                    {% trans 'Opacity line' %}: <span id="id_handle_opacity_line" class="slider-handle">0</span></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="boxios-ios-range-slider">
                        <input id="id_slider_opacity_line" type="range" class="boxios-ios-range-slider__range"
                               data-redirect_value_to=".djeym__balloon__content-body #id_handle_opacity_line">
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="font-14 p-t-10">
                    <i class="fas fa-exchange-alt font-blue m-r-5"></i>
                    {% trans 'Fill opacity' %}: <span id="id_handle_opacity_fill" class="slider-handle">0</span></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="boxios-ios-range-slider">
                        <input id="id_slider_opacity_fill" type="range" class="boxios-ios-range-slider__range"
                               data-redirect_value_to=".djeym__balloon__content-body #id_handle_opacity_fill">
                    </div>
                </td>
            </tr>
            <tr class="buttons-create-new-polygon">
                <td colspan="2" class="p-t-15">
                    <table class="djeym-matrix-menu block-center">
                        <tr>
                            <td class="editPolygon djeym-matrix-menu__btn font-green">
                                <i class="fas fa-plus"></i></td>
                            <td class="cancelPolygon djeym-matrix-menu__btn font-light-red">
                                <i class="fas fa-ban"></i></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr class="buttons-context-menu-polygon">
                <td colspan="2" class="p-t-15">
                    <table class="djeym-matrix-menu block-center">
                        <tr>
                            <td class="editPolygon djeym-matrix-menu__btn font-green">
                                <i class="fas fa-edit"></i></td>
                            <td class="savePolygon djeym-matrix-menu__btn font-dark-blue">
                                <i class="far fa-save"></i></td>
                            <td class="cancelPolygon djeym-matrix-menu__btn font-light-red">
                                <i class="fas fa-ban"></i></td>
                            <td class="delPolygon djeym-matrix-menu__btn">
                                <i class="far fa-trash-alt font-red"></i></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <!-- Footer - Create a new Polygon -->
    <div id="id_hidden_polygon__create__footer" class="hidden"></div>
    <!-- Footer - Context menu for Polygon -->
    <div id="id_hidden_polygon__context__footer" class="hidden"></div>

    <!-- INCLUDE - SELECTION CATEGORY -->
    <div id="id_hidden_buttons_category" class="hidden">
        <p>
            <label class="boxios-ios-label">
                <span class="boxios-ios-icon-display"></span>
                <span class="boxios-ios-radio">
                    <input type="radio" class="radio_buttons_category" name="category" value="">
                    <span class="boxios-ios-radio__value" aria-hidden="true"></span>
                </span>
                <span class="boxios-ios-label-text"></span>
            </label>
        </p>
    </div>

    <!-- INCLUDE - SELECTION SUBCATEGORY -->
    <div id="id_hidden_buttons_subcategory" class="hidden">
        <p>
            <label class="boxios-ios-label">
                <span class="boxios-ios-icon-display"></span>
                <span class="boxios-ios-checkbox">
                    <input type="checkbox" class="checkbox_buttons_subcategory" value="">
                    <span class="boxios-ios-checkbox__value" aria-hidden="true"></span>
                </span>
                <span class="boxios-ios-label-text"></span>
            </label>
        </p>
    </div>

    <!-- HELP - "ADD GEO-OBJECT NAME"-->
    <div class="djeym-warning-add-geo-object-name hidden">
        <table class="djeym-matrix-menu block-center">
            <tr>
                <td class="djeym-matrix-menu__btn-empty"></td>
                <td class="djeym-matrix-menu__btn cursor-default"><i class="fas fa-heading"></i></td>
                <td class="djeym-matrix-menu__btn-empty"></td>
            </tr>
        </table>
    </div>

    <!-- HELP - "SELECT A CATEGORY"-->
    <div class="djeym-warning-select-category hidden">
        <table class="djeym-matrix-menu block-center">
            <tr>
                <td class="djeym-matrix-menu__btn-empty"></td>
                <td class="djeym-matrix-menu__btn cursor-default"><i class="fas fa-tasks"></i></td>
                <td class="djeym-matrix-menu__btn-empty"></td>
            </tr>
        </table>
    </div>

    <!-- START JS -->
    <script type="text/javascript" src="{% static "djeym/js/jquery-3.3.1.min.js" %}"></script>
    {% for url_js in category_icons_js %}<script type="text/javascript" src="{{ url_js }}"></script>{% endfor %}
    <script type="text/javascript" src="{% static "djeym/plugins/really-simple-color-picker/js/jquery.colorPicker.min.js" %}"></script>
    <script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>
    <script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
    <script type="text/javascript" src="{% static "ckeditor/ckeditor/adapters/jquery.js" %}"></script>
    <script type="text/javascript" src="{% static "djeym/plugins/fontawesome/js/all.min.js" %}"></script>
    <script type="text/javascript" src="{% static "djeym/plugins/sweetalert2/sweetalert2.min.js" %}"></script>
    <script type="text/javascript" src="{% static "djeym/plugins/boxiOS/boxios.min.js" %}"></script>
    <script type="text/javascript" src="{% static "djeym/js/ckeditor_resize_image.min.js" %}"></script>
    <script type="text/javascript" src="{% url 'djeym:javascript-catalog' %}"></script>
    <script type="text/javascript">
        window.CKEDITOR_BASEPATH = "/static/ckeditor/ckeditor/";
        var djeymMapID = {{ ymap.pk }},
            djeymCenterMap = [{{ ymap.latitude }},{{ ymap.longitude }}],
            djeymZoomMap = {{ ymap.zoom }},
            djeymCluster = ["{{ cluster.svg.url }}",{{ cluster.get_size }},{{ cluster.get_offset }}],
            djeymControls = {{ controls.get_control_list|safe }},
            djeymSearchProvider = {{ controls.provider|lower }},
            {% if tile %}
                djeymTile = {
                    maxZoom: {{ tile.maxzoom }},
                    minZoom: {{ tile.minzoom }},
                    copyrights: "{{ tile.copyrights|safe|escape_double_brackets }}"
                },
                djeymSource = function () { return "{% random_domain tile.source|safe tile.apikey %}"; },
            {% endif %}
            djeymRoundTheme = {{ external_modules.roundtheme|lower }},
            djeymHeatmap = {{ external_modules.heatmap|lower }},
            djeymAreaCalculation = {{ external_modules.areacalculation|lower }},
            djeymClusteringEdit = {{ general_settings.clustering_edit|lower }},
            djeymClusterLayout = "{{ general_settings.cluster_layout }}",
            djeymClusterIconContent = {{ general_settings.cluster_icon_content|lower }},
            djeymClusterIconContentBgColor = "{{ general_settings.cluster_icon_content_bg_color }}",
            djeymClusterIconContentTxtColor = "{{ general_settings.cluster_icon_content_txt_color }}",
            djeymMapType = "{{ controls.maptype }}",
            djeymBalloonMinHeight = {% if selected_load_indicator %}{{ load_indicator_size }} + 40{% else %}60{% endif %},
            djeymCategories = {
                placemarks: {},
                submarks: {},
                polylines: {},
                polygons: {}
            };
            {% for item in category_placemarks %}
                djeymCategories.placemarks[{{ item.pk }}] = ["{{ item.title|escape_double_brackets }}", "{{ item.category_icon|safe|escape_double_brackets }}"];
            {% endfor %}
            {% for item in category_submarks %}
                djeymCategories.submarks[{{ item.pk }}] = ["{{ item.title|escape_double_brackets }}", "{{ item.category_icon|safe|escape_double_brackets }}"];
            {% endfor %}
            {% for item in category_polylines %}
                djeymCategories.polylines[{{ item.pk }}] = ["{{ item.title|escape_double_brackets }}", "{{ item.category_icon|safe|escape_double_brackets }}"];
            {% endfor %}
            {% for item in category_polygons %}
                djeymCategories.polygons[{{ item.pk }}] = ["{{ item.title|escape_double_brackets }}", "{{ item.category_icon|safe|escape_double_brackets }}"];
            {% endfor %}
    </script>
    {% get_api_ymap lang=language_code %}
    <script type="text/javascript" src="{% static "djeym/js/ymeditor.min.js" %}"></script>
    <!-- END JS -->
</body>
</html>
{% endwith %}
{% else %}
    <h2>404 - {% trans 'Page not found' %}</h2>
    <div style="color: #607D8B; font-size: 22px; font-weight: bold;">
        {% trans "We're sorry, but the requested map could not be found." %}</div>
    <div style="color: #E91E63; font-size: 18px; font-weight: bold;">
        ( {% trans "Maybe the map is not active or just missing." %} )</div>
{% endif %}
