{% load i18n %}
<script id="map-layout-template" type="text/template">
    <aside id="map-toolbar"></aside>
    <div id="map">
        <div id="map-js"></div>
        <div id="legend-js"></div>
        <div id="map-panels"></div>
        <div id="add-node-step1" tabindex="-1" role="dialog" aria-labelledby="add-node-step1-label" aria-hidden="true"
            class="modal-dialog modal-content modal-body modal-x-slim autocenter bottom">
            <span class="message">{% trans 'Click on the map to indicate the location' %}</span>
            <button type="button" class="btn btn-default">{% trans 'cancel' %}</button>
        </div>
        <div id="add-node-step2" tabindex="-1" role="dialog" aria-labelledby="add-node-step2-label" aria-hidden="true"
            class="modal-dialog modal-content modal-body modal-x-slim autocenter bottom">
            <span class="message">{% trans 'Drag to adjust' %}</span>
            <button type="button" class="btn btn-success">{% trans 'confirm' %}</button>
            <button type="button" class="btn btn-default">{% trans 'cancel' %}</button>
        </div>
    </div>
    <div id="map-add-node-js" class="map-overlay animate-width content"></div>
    <div id="map-details-js"></div>
</script>

<script id="map-legend-template" type="text/template">
    <h5>{% trans 'Legend' %}</h5>
    <ul>
        <% _.each(items, function(item){ %>
        <li id="legend-item-<%= item.slug %>" <% if(!item.visible) { %>class="disabled"<% } %>>
            <a href="#" data-status="<%= item.slug %>" title="<%= item.description %>">
                <span class="circle" style="background-color:<%= item.fill_color %>"></span><span class="text"><%= item.name %></span>
            </a>
            <span class="stats"><%= item.count %></span>
        </li>
        <% }) %>
    </ul>
    <a class="icon-close" href="#" title="{% trans 'Hide legend' %}"></a>
</script>

<script id="map-toolbar-template" type="text/template">
    <a href="#" class="icon-layer-2" data-panel="fn-map-layers" title="{% trans 'Control map data' %}" data-placement="left" data-delay="200"></a>
    <a href="#" class="icon-pin-add" data-toggle="tooltip" title="{% trans 'Add new node' %}" data-placement="left" data-delay="200"></a>
    <% if (Ns.settings.map3d) { %>
        <a href="#" id="btn-map-mode" class="icon-3d smaller" title="{% trans 'Toggle 3D view' %}" data-placement="left" data-delay="200"></a>
    <% } %>
    <% if (Ns.settings.mapTools) { %>
        <a href="#" class="icon-tools" data-panel="fn-map-tools" title="{% trans 'Map tools' %}" data-placement="left" data-delay="200"></a>
    <% } %>
    <% if (Ns.settings.mapPreferences) { %>
        <a href="#" class="icon-config" data-panel="fn-map-preferences" title="{% trans 'Map preferences' %}" data-placement="left" data-delay="200"></a>
    <% } %>
    <a id="btn-legend" href="#" class="icon-list" title="{% trans 'Toggle legend' %}" data-placement="left" data-delay="200"></a>
</script>

<script id="map-panels-template" type="text/template">
    <a id="toggle-toolbar" href="#" class="glyphicon glyphicon-chevron-up"></a>

    <div id="fn-map-layers" class="side-panel adjust-height">
        <div class="panel-inner scroller">
            <h2>{% trans 'Map base' %}</h2>
            <% _.each(baseLayers, function (baseLayer, i) { %>
            <p>
                <span class="custom-radio js-base-layers">
                    <input type="radio"
                           name="base-layers"
                           id="base-layers-<%= i %>"
                           <% if(baseLayer.checked){ %>checked<% } %>
                           data-name="<%= baseLayer.name %>" />
                    <label for="base-layers-<%= i %>"></label>
                </span>
                <label for="base-layers-<%= i %>" class="inline h18"><%= baseLayer.name %></label>
            </p>
            <% }) %>
            <div class="line"></div>
            <h2>{% trans 'Layers' %}</h2>
            <% _.each(layers, function(layer){ %>
                <p>
                    <label for="map-control-layer-<%= layer.slug %>" class="inline">
                        <%= layer.name %>
                    </label>
                    <input type="checkbox" <% if (layer.visible) { %>checked<% } %>
                           class="switch toggle-layer-data"
                           id="map-control-layer-<%= layer.slug %>"
                           data-slug="<%= layer.slug %>">
                </p>
            <% }); %>
            <div class="line"></div>
            <h2>{% trans 'Legend' %}</h2>
            <% _.each(legend, function(legend){ %>
                <p>
                    <label for="map-control-layer-<%= legend.slug %>" class="inline">
                        <%= legend.name %>
                    </label>
                    <input type="checkbox" <% if (legend.visible) { %>checked<% } %>
                           class="switch toggle-legend-data"
                           id="map-control-legend-<%= legend.slug %>"
                           data-slug="<%= legend.slug %>">
                </p>
            <% }); %>
        </div>
    </div>

    {% if MAP_TOOLS_ENABLED %}
    <div id="fn-map-tools" class="side-panel">
        <p>
            <button href="#"
                    class="icon-ruler tool hastip"
                    title="{% trans 'measure distance' %}"
                    data-toggle="tooltip"
                    data-placement="top"
                    data-delay="300">
            </button>
            <button href="#"
                    class="icon-select-area tool hastip"
                    title="{% trans 'measure area' %}"
                    data-toggle="tooltip"
                    data-placement="top"
                    data-delay="300">
            </button>
        </p>
        <p>
            <button href="#"
                    class="icon-elevation-profile tool hastip"
                    title="{% trans 'elevation profile' %}"
                    data-toggle="tooltip"
                    data-placement="bottom"
                    data-delay="300">
            </button>
            <button href="#"
                    class="icon-placeholder tool hastip notImplemented"
                    data-toggle="tooltip"
                    title="{% trans 'drop placeholder' %}"
                    data-placement="bottom"
                    data-delay="300">
            </button>
        </p>
    </div>
    {% endif %}

    {% if MAP_PREFERENCES_ENABLED %}
    <div id="fn-map-preferences" class="side-panel adjust-height">
        <div class="panel-inner scroller">
            <h2>map preferences</h2>
            <p>
                <label for="switch1" class="inline">Cool setting 1</label>
                <input type="checkbox" checked class="switch" id="switch1">
            </p>
            <p>
                <label for="switch2" class="inline">Cool setting 2</label>
                <input type="checkbox" checked class="switch" id="switch2">
            </p>
            <p>
                <label for="switch3" class="inline">Advanced thing</label>
                <input type="checkbox" class="switch" id="switch3">
            </p>
            <div class="line"></div>
            <p>Setting chooser</p>
            <select class="selectpicker">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
            <p>Slider</p>
            <p>
                <span class="slider">
                    <input type = "range" min="0" max="100" onchange="rangevalue.value=value"/>
                    <output id="rangevalue">50</output>
                </span>
            </p>
            <div class="line"></div>
            <p>
                <label for="switch4" class="inline">Moaar stuff</label>
                <input type="checkbox" checked class="switch" id="switch4">
            </p>
            <p>
                <label for="switch5" class="inline">Too advanced</label>
                <input type="checkbox"  class="switch" id="switch5">
            </p>
            <p>
                <label for="switch6" class="inline">Turn me on</label>
                <input type="checkbox" class="switch" id="switch6">
            </p>
            <div class="line"></div>
            <p>Is getting very long!</p>
            <select class="selectpicker">
                <option>Scroll me down</option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
            <div class="line"></div>
            <p>
                <label for="switch5" class="inline">Not advanced</label>
                <input type="checkbox" checked class="switch" id="switch5">
            </p>
            <p>
                <label for="switch6" class="inline">Turn me off</label>
                <input type="checkbox" checked class="switch" id="switch6">
            </p>
        </div>
    </div>
    {% endif %}
</script>

<script id="map-popup-node-template" type="text/template">
    <h4><%= name %></h4>
    <% if(description){ %><%= description %><% } %>
    <p class="details"><a href="#nodes/<%= slug %>" class="btn btn-primary">{% trans 'Details' %}</a></p>
</script>

<script id="map-popup-link-template" type="text/template">
    <h4><%= node_a_name %> &laquo;&raquo; <%= node_b_name %></h4>
    <p><strong>{% trans 'Metric type' %}:</strong> <%= metric_type %></p>
    <p><strong>{% trans 'Metric value' %}:</strong> <%= metric_value %></p>
    <p><strong>{% trans 'Layer' %}:</strong> <a href="#layers/<%= layer %>"><%= Ns.db.layers.get(layer) %></a></p>
</script>

<script id="map-add-node-template" type="text/template">
    <h1 class="title">{% trans 'Add new node' %}</h1>
    <ul class="error-list"></ul>
    <div id="add-node-form-container"></div>
</script>
