{% extends 'site/base.html' %}
{% load static %}
{% load compress %}
{% load i18n %}

{% block content %}
    <main class="map" data-state="{{ state }}"{% if embed %} data-embed{% endif %} data-last-site-update="{{ last_site_update }}"{% if ssids %} data-ssids="{{ ssids }}"{% endif %} data-primary-color="{{ primary_color }}">
        {% if not request.mobileclient %}
        <section id="attributions">
            {% if not embed %}
                {% get_current_language as CURRENT_LANGUAGE %}
                <a href="{% url 'site.language' %}" id="choose-language">{{ CURRENT_LANGUAGE | language_name_local }}</a> –
            {% endif %}
            {% if editor %}
                <a href="{% url 'editor.index' %}" target="_blank">{% trans 'Editor' %}</a> //
            {% endif %}
            <a href="/api/" target="_blank">{% trans 'API' %}</a> //
            <a href="https://twitter.com/c3nav/" rel="external" target="_blank">Twitter</a> //
            <a href="https://github.com/c3nav/c3nav/" rel="external" target="_blank">GitHub</a> //
            <a href="{% url 'site.about' %}" id="about-link">{% trans 'about c3nav' %}</a>
        </section>
        {% endif %}
        <section id="map" data-bounds="{{ bounds }}"
                 data-levels="{{ levels }}"
                 {% if tile_cache_server %}data-tile-server="{{ tile_cache_server }}"{% endif %}
                 {% if initial_level %}data-initial-level="{{ initial_level }}"{% endif %}
                 {% if initial_bounds %}data-initial-bounds="{{ initial_bounds }}"{% endif %}
                 {% if grid %}data-grid="{{ grid }}"{% endif %}>
        </section>
        {% if not embed %}
            <section id="messages">{% include 'site/fragment_messages.html' %}</section>
            <section id="popup-buttons">
                <button class="button-clear as-location">{% trans 'Select this location' %}</button>
                <button class="button-clear as-destination">{% trans 'Route to here' %}</button>
                <button class="button-clear as-origin">{% trans 'Route from here' %}</button>
            </section>
            <section class="share-ui">
                <h3>{% trans 'Share' %}</h3>
                <img src="">
                <input type="text" readonly>
                <p>
                    <button class="mobileclient-share">{% trans 'share' %}</button>
                    <button class="mobileclient-shortcut">{% trans 'create shortcut' %}</button>
                </p>
            </section>
            <section id="app-ad">
                <h3>{% trans 'Wifi-based location' %}</h3>
                <p>{% trans 'Get the c3nav app for Android to see your location on the map.' %}</p>
                <p class="app-download-buttons">
                    <a class="button" href="https://play.google.com/store/apps/details?id=de.c3nav.droid" target="_blank">Google Play</a>
                    <a class="button" href="https://github.com/c3nav/c3nav-android/releases" target="_blank">{% trans 'Download APK' %}</a>
                </p>
            </section>
            <section id="reload-msg">
                <img src="{% static 'img/loader.gif' %}">
            </section>
            <section id="sidebar">
                <section id="search" class="loading">
                    <div class="location locationinput empty" id="origin-input">
                        <i class="icon material-icons">place</i>
                        <input type="text" autocomplete="off" spellcheck="false" placeholder="{% trans 'Search any location…' %}">
                        <small></small>
                        <button class="button-clear locate material-icons">location_disabled</button>
                        <button class="button-clear clear material-icons">clear</button>
                    </div>
                    <div class="location locationinput empty" id="destination-input">
                        <i class="icon material-icons">place</i>
                        <input type="text" autocomplete="off" spellcheck="false" placeholder="{% trans 'Search any location…' %}">
                        <small></small>
                        <button class="button-clear locate material-icons">location_disabled</button>
                        <button class="button-clear clear material-icons">clear</button>
                    </div>
                    <i class="material-icons" id="route-dots">more_vert</i>
                    <div class="buttons" id="location-buttons">
                        <button class="button-clear details">
                            <i class="material-icons">expand_more</i>
                            {% trans 'Details' %}
                        </button>
                        <button class="button-clear share">
                            <i class="material-icons">share</i>
                            {% trans 'Share' %}
                        </button>
                        <button class="button-clear route">
                            <i class="material-icons">directions</i>
                            {% trans 'Route' %}
                        </button>
                    </div>
                    <div id="route-summary">
                        <i class="icon material-icons">directions</i>
                        <span></span>
                        <small><em></em></small>
                        <button class="button-clear options material-icons">settings</button>
                    </div>
                    <div class="buttons" id="route-search-buttons">
                        <button class="button-clear swap">
                            <i class="material-icons">swap_vert</i>
                            {% trans 'Swap' %}
                        </button>
                        <button class="button-clear close">
                            <i class="material-icons">close</i>
                            {% trans 'Close' %}
                        </button>
                    </div>
                    <div class="buttons" id="route-result-buttons">
                        <button class="button-clear swap">
                            <i class="material-icons">swap_vert</i>
                            {% trans 'Swap' %}
                        </button>
                        <button class="button-clear details">
                            <i class="material-icons">arrow_downward</i>
                            {% trans 'Details' %}
                        </button>
                    </div>
                </section>
                <div id="resultswrapper">
                    <section id="autocomplete"></section>
                    <section id="location-details" class="details">
                        <div class="details-head">
                            <a class="button button-clear editor float-right" target="_blank">
                                <i class="material-icons">edit</i>
                                {% trans 'Open in Editor' %}
                            </a>
                            <h2>{% trans 'Details' %}</h2>
                        </div>
                        <div class="details-body"></div>
                    </section>
                    <section id="route-details" class="details">
                        <div class="details-head">
                            <h2>{% trans 'Details' %}</h2>
                        </div>
                        <div class="details-body"></div>
                    </section>
                    <section id="route-options" class="details">
                        <div class="details-head">
                            <button class="button close button-clear material-icons float-right">close</button>
                            <h2>{% trans 'Route options' %}</h2>
                        </div>
                        <div class="details-body">
                            <div class="route-options-fields"></div>
                            <div class="route-options-buttons">
                                <button class="save">{% trans 'Save and reroute' %}</button>
                                <button class="button-outline">{% trans 'Just reroute' %}</button>
                            </div>
                        </div>
                    </section>
                </div>
            </section>
            <div class="app-ads">
                <div id="android-app-ad">
                    <a href="#" class="close"><i class="material-icons">close</i></a>
                    {% blocktrans with play_url="https://play.google.com/store/apps/details?id=de.c3nav.droid" apk_url="https://github.com/c3nav/c3nav-android/releases" %}Get the c3nav Android app on <a href="{{ play_url }}" target="_blank">Google Play</a> or <a href="{{ apk_url }}" target="_blank">download the APK!</a>{% endblocktrans %}
                </div>
            </div>
        {% else %}
            <a id="embed-logo" class="embed-link" target="_blank">{% if header_logo %}<img src="{% static header_logo %}">{% else %}<span>c3nav</span>{% endif %}</a>
            <a id="embed-open" class="embed-link" target="_blank">{% trans 'open in c3nav' %}</a>
            <section id="popup-buttons"></section>
            <section id="search">
                <input type="hidden" id="origin-input">
                <input type="hidden" id="destination-input">
            </section>
        {% endif %}
    </main>
    {% if not embed %}
        <div id="modal" class="loading">
            <div id="modal-content"></div>
        </div>
    {% endif %}
    {% include 'site/fragment_fakemobileclient.html' %}
    {% compress js %}
        <script type="text/javascript" src="{% static 'jquery/jquery.js' %}"></script>
        <script type="text/javascript" src="{% static 'leaflet/leaflet.js' %}"></script>
        <script type="text/javascript" src="{% static 'site/js/c3nav.js' %}"></script>
    {% endcompress %}
{% endblock %}
