{% load i18n static %}

{% autoescape off %}
<style type="text/css">
    @import "{% static 'umap/js/components/alerts/alert.css' %}";
</style>
{% endautoescape %}
<template id="umap-alert-template">
  <div role="dialog" class="dark window umap-alert">
    <div>
      <p role="alert">
      </p>
    </div>
    <ul class="buttons">
      <li>
        <button class="icon icon-16 icon-close"
                aria-label="{% translate "Close" %}"
                data-close>
        </button>
      </li>
    </ul>
  </div>
</template>
<umap-alert></umap-alert>
<template id="umap-alert-creation-template">
  <div role="dialog" class="dark window umap-alert">
    <div>
      <h3 role="alert">
      </h3>
      {% url "login" as login_url %}
      <p class="aplat">
        {% blocktranslate %}Oops, I didn't mean it, I want to <a href="{{ login_url }}" class="login">create an account</a> or <a href="{{ login_url }}" class="login">log in</a> (no worry, we'll attach the map to your account).{% endblocktranslate %}
      </p>
      <div class="anonymous soft-rounded aplat">
        <h4><i class="icon icon-16 icon-anonymous"></i> {% trans "Yes, I want to continue editing anonymously, I will save the secret edit link to be able to edit this map later or on another device" %}</h4>
        <div id="link-wrapper">
          <form>
            <label for="url">
              {% translate "Here is your secret link to edit the map, please keep it safe:" %}
            </label>
            <fieldset role="group">
              <input type="url" name="url" id="url">
              <input type="button" value="{% translate "Copy link" %}">
            </fieldset>
          </form>
        </div>
        <div id="form-wrapper" hidden>
          <form>
            <label for="email">
              {% translate "Enter your email address to receive the secret link:" %}
            </label>
            <fieldset role="group">
              <input type="email"
                     name="email"
                     id="email"
                     placeholder="{% translate "Email" %}"
                     required>
              <input type="submit"
                     value="{% translate "Send me the link" %}"
                     class="umap-action">
            </fieldset>
          </form>
        </div>
      </div>
    </div>
    <ul class="buttons">
      <li>
        <button class="icon icon-16 icon-close"
                aria-label="{% translate "Close" %}"
                data-close>
        </button>
      </li>
    </ul>
  </div>
</template>
<umap-alert-creation></umap-alert-creation>
<template id="umap-alert-conflict-template">
  <div role="dialog" class="dark window umap-alert">
    <div>
      <p role="alert">
      </p>
      <div id="conflict-wrapper">
        <form>
          <a href="#" onclick="document.url" target="_blank">{% translate "See their edits in another tab" %}</a>
          <input id="your-changes"
                 type="submit"
                 value="{% translate "Keep your changes and loose theirs" %}">
          <input id="their-changes"
                 type="submit"
                 value="{% translate "Keep their changes and loose yours" %}">
        </form>
      </div>
    </div>
    <ul class="buttons">
      <li>
        <button class="icon icon-16 icon-close"
                aria-label="{% translate "Close" %}"
                data-close>
        </button>
      </li>
    </ul>
  </div>
</template>
<umap-alert-conflict></umap-alert-conflict>
{% autoescape off %}
<script type="module">
  import { register } from '{% static 'umap/js/components/base.js' %}'
  import {
    uMapAlert,
    uMapAlertCreation,
    uMapAlertConflict
  } from '{% static 'umap/js/components/alerts/alert.js' %}'
  register(uMapAlert, 'umap-alert')
  register(uMapAlertCreation, 'umap-alert-creation')
  register(uMapAlertConflict, 'umap-alert-conflict')
</script>
{% endautoescape %}
