{% load static %}
{% load i18n %}
{% load l10n %}
{% load humanize %}
{% load mastodon %}
{% load thumb %}
{% load duration %}
<dialog open
        _="on close_dialog add .closing then wait for animationend then remove me">
  <article>
    <header>
      <link to="#"
            aria-label="Close"
            class="close"
            _="on click trigger close_dialog" />
      <strong>{% trans "Share Annual Summary" %}</strong>
    </header>
    <div>
      <form method="post" action="{% url 'journal:wrapped_share' year %}">
        {% csrf_token %}
        <input type="hidden" name="img" id="img" value="">
        <div style="display: flex;">
          <div style="width:6em; margin:1em;">
            <img id="preview" alt="preview" style="width:6em;" />
          </div>
          <div style="width:100%;">
            <textarea type="text"
                      name="comment"
                      placeholder="{% trans "note" %}"
                      style="width:100%;
                             height:100%"> {% blocktrans %}#{{year}}_report{% endblocktrans %}</textarea>
          </div>
        </div>
        <div style="margin:0.5em">
          <fieldset>
            {% trans "Visibility" %}
            <input type="radio"
                   name="visibility"
                   value="0"
                   required
                   id="id_visibility_0"
                   checked />
            <label for="id_visibility_0">{% trans "Public" %}</label>
            <input type="radio"
                   name="visibility"
                   value="1"
                   required
                   id="id_visibility_1">
            <label for="id_visibility_1">{% trans "Followers Only" %}</label>
            <input type="radio"
                   name="visibility"
                   value="2"
                   required=""
                   id="id_visibility_2">
            <label for="id_visibility_2">{% trans "Mentioned Only" %}</label>
          </fieldset>
        </div>
        <div>
          <input type="submit" value="{% trans 'Share' %}">
        </div>
      </form>
    </div>
  </article>
  <script type="text/javascript">
    function share(uri){
      const pfx = 'data:image/png;base64,';
      $('#preview').attr('src', uri);
      if (uri.startsWith(pfx)) {
        $('#img').val(uri.substring(pfx.length));
      } else {
        alert('Error occured');
      }
    }
    svgAsPngUri($('#viz0').children('svg')[0]).then(share);
  </script>
</dialog>
