{% load static %}
{% load i18n %}
{% load l10n %}
{% load humanize %}
{% load mastodon %}
{% load thumb %}
<dialog open
        class="mark-editor"
        _="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 'Comment' %} - {{ item.parent_item.title }}: {{ item.title }}</strong>
    </header>
    <div>
      <form action="{% url 'journal:comment' item.uuid %}" method="post">
        {% csrf_token %}
        <textarea name="text"
                  cols="40"
                  rows="10"
                  placeholder="{% trans "Tips: use &gt;!text!&lt; for spoilers; some instances may not be able to show posts longer than 360 charactors." %}"
                  id="id_text">{% if comment.text %}{{ comment.text }}{% endif %}</textarea>
        <div class="grid">
          <div>
            <fieldset>
              <input type="radio"
                     name="visibility"
                     value="0"
                     required=""
                     id="id_visibility_0"
                     {% if comment.visibility == 0 or not comment %}checked{% endif %}>
              <label for="id_visibility_0">{% trans "Public" %}</label>
              <input type="radio"
                     name="visibility"
                     value="1"
                     required=""
                     id="id_visibility_1"
                     {% if comment.visibility == 1 %}checked{% endif %}>
              <label for="id_visibility_1">{% trans "Followers Only" %}</label>
              <input type="radio"
                     name="visibility"
                     value="2"
                     required=""
                     id="id_visibility_2"
                     {% if comment.visibility == 2 %}checked{% endif %}>
              <label for="id_visibility_2">{% trans "Mentioned Only" %}</label>
            </fieldset>
          </div>
          <div>
            <fieldset>
              {% if request.user.mastodon_acct %}
                <label for="id_share_to_mastodon">
                  <input role="switch"
                         type="checkbox"
                         name="share_to_mastodon"
                         id="id_share_to_mastodon"
                         value="1"
                         {% if request.user.preference.mastodon_default_repost %}checked{% endif %}>
                  {% trans "Crosspost to timeline" %}
                </label>
              {% endif %}
            </fieldset>
          </div>
        </div>
        <div>
          <input type="submit" class="button float-right" value="{% trans "Save" %}">
        </div>
        <div {% if item.class_name != "podcastepisode" %}style="display:none;"{% endif %}>
          <div role="group">
            <div>
              <input type="checkbox" name="share_position" value="1" id="share_position">
              <label for="share_position">{% trans "share with playback position" %}</label>
            </div>
            <div>
              <input type="input"
                     name="position"
                     id="position"
                     value="00:00:00"
                     class="html-duration-picker"
                     pattern="[0-9]{2}:[0-9]{2}:[0-9]{2}"
                     title="hh:mm:ss"
                     style="display: none;
                            padding: 0px 2px;
                            height: unset">
            </div>
          </div>
        </div>
      </form>
    </div>
  </article>
</dialog>
<script type="text/javascript">
if (window.player && window.current_item_uuid == "{{ focus_item.uuid }}"){
  $('#share_position').prop('checked', true);
  $("#position").show()
  var t = ~~ window.player.currentTime;
  $('#position').val(('0' + ~~(t/3600)).substr(-2) + ':' + ('0' + ~~(t%3600/60)).substr(-2) + ':' + ("0" + t%60).substr(-2))
}
$('#share_position').on('click', ()=>{
  if ($('#share_position').prop('checked')) {
    $("#position").show()
  } else {
    $("#position").hide()
  }
})
</script>