{% extends "base.html" %}
{% load umap_tags compress i18n %}
{% block body_class %}
  content
{% endblock body_class %}
{% block extra_head %}
  {% compress css %}
    {% umap_css %}
  {% endcompress css %}
  {% umap_js %}
{% endblock extra_head %}
{% block header %}
  <header class="wrapper row">
    {% include "umap/navigation.html" with title=SITE_NAME %}
  </header>
  {% include "umap/messages.html" with title=SITE_NAME %}
{% endblock header %}
{% block content %}
  {% if UMAP_READONLY %}
    <div class="wrapper demo-instance-warning">
      <div class="row">
        <p>
          {% blocktrans %}This instance of uMap is currently in read only mode, no creation/edit is allowed.{% endblocktrans %}
        </p>
      </div>
    </div>
  {% endif %}
  {% if UMAP_DEMO_SITE %}
    <div class="wrapper demo-instance-warning">
      <div class="row">
        {% blocktrans with repo_url="https://github.com/umap-project/umap" stable_url="http://umap.openstreetmap.fr" %}This is a demo instance, used for tests and pre-rolling releases. If you need a stable instance, please use <a href="{{ stable_url }}">{{ stable_url }}</a>. You can also host your own instance, it's <a href="{{ repo_url }}">open source</a>!{% endblocktrans %}
      </div>
    </div>
  {% endif %}
  {% block maincontent %}
  {% endblock maincontent %}
{% endblock content %}
{% block bottom_js %}
  {{ block.super }}
  <script type="text/javascript">
    !(function () {
      const ui = new L.U.UI(document.querySelector('header'))
      const xhr = new L.U.Xhr(ui)
      const login = document.querySelector('a.login')
      if (login) {
        L.DomEvent.on(login, 'click', function (e) {
          L.DomEvent.stop(e)
          xhr.login({
            login_required: this.getAttribute('href'),
            redirect: '/',
          })
        })
      }
      const logout = document.querySelector('a.logout')
      if (logout) {
        L.DomEvent.on(logout, 'click', function (e) {
          L.DomEvent.stop(e)
          xhr.logout(this.getAttribute('href'))
        })
      }
      const getMore = function (e) {
        L.DomEvent.stop(e)
        xhr._ajax({
          uri: this.href,
          verb: 'GET',
          callback: function (data) {
            const container = this.parentNode
            container.innerHTML = data
            Array.prototype.forEach.call(
              container.querySelectorAll('script'),
              function (item) {
                eval(item.firstChild.textContent)
              }
            )
            const more = document.querySelector('.more_button')
            if (more) {
              L.DomEvent.on(more, 'click', getMore, more)
            }
          },
          context: this,
        })
      }
      const more = document.querySelector('.more_button')
      if (more) {
        L.DomEvent.on(more, 'click', getMore, more)
      }
    })(this)
  </script>
{% endblock bottom_js %}
{% block footer %}
  {{ block.super }}
  {% include "umap/content_footer.html" %}
{% endblock footer %}
