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

{% block title %}{% if meta.title %}{{ meta.title }}{% else %}{{ block.super }}{% endif %}{% endblock %}

{% block head %}
    {% if meta %}
        <meta property="twitter:card" content="summary_large_image"/>
        <meta property="og:type" content="website"/>
        <meta property="og:site_name" content="{{ branding }}"/>
    {% endif %}
    {% if meta.title %}
        <meta name="title" content="{{ meta.title }}"/>
        <meta property="og:title" content="{{ meta.title }}"/>
        <meta property="twitter:title" content="{{ meta.title }}"/>
    {% endif %}
    {% if meta.description %}
        <meta name="description" content="{{ meta.description }}"/>
        <meta property="og:description" content="{{ meta.description }}"/>
        <meta property="twitter:description" content="{{ meta.description }}"/>
    {% endif %}
    {% if meta.preview_img_url %}
        <meta property="og:image" content="{{ meta.preview_img_url }}"/>
        <meta property="twitter:image" content="{{ meta.preview_img_url }}"/>
    {% endif %}
    {% if meta.canonical_url %}
        <meta property="og:url" content="{{ meta.canonical_url }}"/>
        <meta property="twitter:url" content="{{ meta.canonical_url }}"/>
    {% endif %}
{% endblock %}

{% 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 %} {% if random_location_groups %} data-random-location-groups="{{ random_location_groups }}"{% endif %}>
        <div class="loader"></div>
        {% 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://chaos.social/@c3nav/" rel="external" target="_blank">Fediverse</a> //
            <a href="https://github.com/c3nav/c3nav/" rel="external" target="_blank">GitHub</a> //
            <a href="{% url 'site.about' %}" id="about-link">{% blocktrans with branding=branding %}about {{ branding }}{% endblocktrans %}</a>
            {% if imprint %}
                // <a href="{{ imprint }}" target="_blank">{% trans 'Legal notice' %}</a>
            {% endif %}
        </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="location-popup-buttons">
                <div class="buttons">
                    <button class="button-clear as-location">
                        <i class="material-symbols">arrow_upward</i>
                        {% trans 'Select' %}
                    </button>
                    <button class="button-clear show-nearby">
                        <i class="material-symbols">search</i>
                        {% trans 'Nearby' %}
                    </button>
                </div>
                <div class="buttons">
                    <button class="button-clear as-origin"><i class="material-symbols">directions</i> {% trans 'from here' %}</button>
                    <button class="button-clear as-destination"><i class="material-symbols">directions</i> {% trans 'to here' %}</button>
                </div>
                <div class="buttons">
                    <button class="button-clear share">
                        <i class="material-symbols">share</i>
                        {% trans 'Share' %}
                    </button>
                    <a class="button button-clear report report-missing">
                        <i class="material-symbols">feedback</i>
                        {% trans 'Report issue' %}
                    </a>
                </div>
                <div class="buttons position-buttons">
                    <a class="button button-clear set-position">
                        <i class="material-symbols">my_location</i>
                        {% trans 'Set my position' %}
                    </a>
                </div>
            </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>
            {% if app_enabled %}
            <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://f-droid.c3nav.de/fdroid/repo/" target="_blank">F-Droid Repo</a>
                    <a class="button" href="https://github.com/c3nav/c3nav-android/releases" target="_blank">{% trans 'APK' %}</a>
                </p>
            </section>
            {% endif %}
            <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-symbols">place</i>
                        <input type="text" autocomplete="off" spellcheck="false" placeholder="{% trans 'Search any location…' %}">
                        <small></small>
                        <button class="button-clear locate material-symbols">location_disabled</button>
                        <button class="button-clear clear material-symbols">clear</button>
                    </div>
                    <div class="location locationinput empty" id="destination-input">
                        <i class="icon material-symbols">place</i>
                        <input type="text" autocomplete="off" spellcheck="false" placeholder="{% trans 'Search any location…' %}">
                        <small></small>
                        <button class="button-clear random material-symbols" href="/random/">casino</button>
                        <button class="button-clear locate material-symbols">location_disabled</button>
                        <button class="button-clear clear material-symbols">clear</button>
                    </div>
                    <i class="material-symbols" id="route-dots">more_vert</i>
                    <div class="buttons" id="location-buttons">
                        <button class="button-clear details">
                            <i class="material-symbols">expand_more</i>
                            {% trans 'Details' %}
                        </button>
                        <button class="button-clear share">
                            <i class="material-symbols">share</i>
                            {% trans 'Share' %}
                        </button>
                        <button class="button-clear route">
                            <i class="material-symbols">directions</i>
                            {% trans 'Route' %}
                        </button>
                    </div>
                    <div id="route-summary">
                        <i class="icon material-symbols">directions</i>
                        <span></span>
                        <small><em></em></small>
                        <button class="button-clear options material-symbols">settings</button>
                        <div class="loader"></div>
                    </div>
                    <div class="buttons" id="route-search-buttons">
                        <button class="button-clear swap">
                            <i class="material-symbols">swap_vert</i>
                            {% trans 'Swap' %}
                        </button>
                        <button class="button-clear close">
                            <i class="material-symbols">close</i>
                            {% trans 'Close' %}
                        </button>
                    </div>
                    <div class="buttons" id="route-result-buttons">
                        <button class="button-clear swap">
                            <i class="material-symbols">swap_vert</i>
                            {% trans 'Swap' %}
                        </button>
                        <button class="button-clear details">
                            <i class="material-symbols">arrow_downward</i>
                            {% trans 'Details' %}
                        </button>
                    </div>
                    <div class="loader"></div>
                </section>
                <div id="resultswrapper">
                    <section id="autocomplete"></section>
                    <section id="location-details" class="details">
                        <div class="details-head">
                            <button class="button close button-clear material-symbols float-right">close</button>
                            <h2>{% trans 'Details' %}</h2>
                        </div>
                        <div class="details-buttons buttons external-url-button">
                            <a class="button button-clear external-url" target="_blank">
                                <i class="material-symbols">open_in_new</i>
                                <span></span>
                            </a>
                        </div>
                        <div class="details-body"></div>
                        <div class="details-buttons buttons">
                            <a class="button button-clear report report-issue">
                                <i class="material-symbols">feedback</i>
                                {% trans 'Report issue' %}
                            </a>
                            <a class="button button-clear editor" target="_blank">
                                <i class="material-symbols">edit</i>
                                {% trans 'Open in Editor' %}
                            </a>
                        </div>
                        <div class="loader"></div>
                    </section>
                    <section id="route-details" class="details">
                        <div class="details-head">
                            <button class="button close button-clear material-symbols float-right">close</button>
                            <h2>{% trans 'Details' %}</h2>
                        </div>
                        <div class="details-body"></div>
                        <div class="details-buttons buttons">
                            <a class="button button-clear report report-issue">
                                <i class="material-symbols">feedback</i>
                                {% trans 'Report issue' %}
                            </a>
                        </div>
                    </section>
                    <section id="route-options" class="details">
                        <div class="details-head">
                            <button class="button close button-clear material-symbols 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>
            {% if app_enabled %}
            <div class="app-ads">
                <div id="android-app-ad">
                    <a href="#" class="close"><i class="material-symbols">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>
            {% endif %}
            <div class="theme-selection">
                <h2>{% trans 'Select theme' %}</h2>
                <p>
                    <label for="id_theme">Theme:</label>
                    <select name="theme" required="" id="id_theme">
                    </select>
                </p>
                <button>Save theme</button>
            </div>
        {% else %}
            <a id="embed-logo" class="embed-link" target="_blank">{% if header_logo %}<img src="{% static header_logo %}" alt="{{ branding }}">{% else %}<span>{{ branding }}</span>{% endif %}</a>
            <a id="embed-open" class="embed-link" target="_blank">{% blocktrans with branding=branding %}open in {{ branding }}{% endblocktrans %}</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 'leaflet-layergroup-collision/rbush.js' %}"></script>
        <script type="text/javascript" src="{% static 'leaflet-layergroup-collision/Leaflet.LayerGroup.Collision.js' %}"></script>
        <script type="text/javascript" src="{% static 'c3nav/js/api.js' %}"></script>
        <script type="text/javascript" src="{% static 'site/js/c3nav.js' %}"></script>
    {% endcompress %}
{% endblock %}
