{% load i18n static %}

<style type="text/css">
  @import "{% static 'umap/js/components/alerts/alert.css' %}";
</style>

<umap-alert hidden>
  <div role="dialog">
    <div>
      <p role="alert"></p>
    </div>
    <button class="umap-close-link dark button" aria-label="{% translate "Close" %}" data-close>
      <i class="icon icon-16 icon-close"></i>
    </button>
  </div>
</umap-alert>

<umap-alert-creation hidden>
  <div role="dialog">
    <div>
      <p role="alert"></p>
      <div id="link-wrapper">
        <form>
          <input type="url" name="url">
          <input type="button" value="{% translate "Copy link" %}">
        </form>
      </div>
      <div id="form-wrapper" hidden>
        <p>{% translate "You can also receive that URL by email:" %}</p>
        <form>
          <input type="email" name="email" class="umap-alert-input" required>
          <input type="submit" value="{% translate "Send me the link" %}" class="umap-action">
        </form>
      </div>
    </div>
    <button class="umap-close-link dark button" aria-label="{% translate "Close" %}" data-close>
      <i class="icon icon-16 icon-close"></i>
    </button>
  </div>
</umap-alert-creation>

<umap-alert-choice hidden>
  <div role="dialog">
    <div>
      <p role="alert"></p>
      <div id="choice-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>
    <button class="umap-close-link dark button" aria-label="{% translate "Close" %}" data-close>
      <i class="icon icon-16 icon-close"></i>
    </button>
  </div>
</umap-alert-choice>

<script type="module">
  import {
    uMapAlert,
    uMapAlertCreation,
    uMapAlertChoice
  } from '{% static 'umap/js/components/alerts/alert.js' %}'
  customElements.define('umap-alert', uMapAlert)
  customElements.define('umap-alert-creation', uMapAlertCreation)
  customElements.define('umap-alert-choice', uMapAlertChoice)
</script>