{% load static %}
{% load i18n %}
{% load l10n %}
{% load humanize %}
{% load admin_url %}
{% load mastodon %}
{% load oauth_token %}
{% load truncate %}
{% load highlight %}
{% load thumb %}

<div id="modal" _="on closeModal add .closing then wait for animationend then remove me">
  <div class="modal-underlay" _="on click trigger closeModal"></div>
  <div class="modal-content">
    <div class="add-to-list-modal__head">
      <span class="add-to-list-modal__title">{% trans '标记' %} {{ item.title }}</span>
      <span class="add-to-list-modal__close-button modal-close" _="on click trigger closeModal">
        <i class="fa-solid fa-xmark"></i>
      </span>
    </div>
  <div class="add-to-list-modal__body">
    <form action="{% url 'journal:mark' item.uuid  %}" method="post">
      {% csrf_token %}

      <div id="statusSelection" class="mark-modal__status-radio float-right">
        <ul id="id_status">
          {% for k, v in shelf_types %}
          {% if v %}
          <li><label for="id_status_{{ k }}"><input type="radio" name="status" value="{{ k }}" required="" id="id_status_{{ k }}" {% if shelf_type == k %}checked=""{% endif %}> {{ v }}</label></li>
          {% endif %}
          {% endfor %}
        </ul>
      </div>

      <div class="mark-modal__rating-star rating-star-edit"></div>
      <input type="hidden" name="rating" id="id_rating" value="{{ mark.rating|floatformat:0 }}">

      <div class="mark-modal__clear"></div>

      <textarea name="text" cols="40" rows="10" placeholder="超过360字部分实例可能无法显示" maxlength="360" id="id_text">{% if mark.text %}{{ mark.text }}{% endif %}</textarea>

      <div class="mark-modal__tag">
        <label>标签</label>
        <div class="tag-input">
          <input name="tags" type="text" placeholder="回车增加标签" id="id_tags" value="">
        </div>
      </div>

      <div class="mark-modal__share-checkbox float-right">
        <label for="id_share_to_mastodon"><input type="checkbox" name="share_to_mastodon" id="id_share_to_mastodon" value="1" {%if not request.user.preference.default_no_share %}checked{% endif %}>分享到联邦网络</label>
      </div>

      <div class="mark-modal__option">
        <div class="mark-modal__visibility-radio">
          <span>可见性:
            <ul id="id_visibility">
              <li><label for="id_visibility_0"><input type="radio" name="visibility" value="0" required="" id="id_visibility_0" {% if mark.visibility == 0 %}checked{% endif %}> 公开</label> </li>
              <li><label for="id_visibility_1"><input type="radio" name="visibility" value="1" required="" id="id_visibility_1" {% if mark.visibility == 1 %}checked{% endif %}> 仅关注者</label> </li>
              <li><label for="id_visibility_2"><input type="radio" name="visibility" value="2" required="" id="id_visibility_2" {% if mark.visibility == 2 %}checked{% endif %}> 仅自己</label> </li>
            </ul>
          </span>
        </div>
      </div>

      <div class="mark-modal__confirm-button">
        <input type="submit" class="button float-right" value="保存">
      </div>
      <div class="mark-modal__option">
        <div class="mark-modal__visibility-radio">
          <span>更改标记日期:
            <label for="mark_anotherday"><input type="checkbox" name="mark_anotherday" value="1" id="mark_anotherday"> </label>
            <input type="date" name="mark_date" id="mark_date" min="1900-01-01" max="{{date_today}}" value="{{date_today}}" style="display: none;">
          </span>
        </div>
      </div>

    </form>
  </div>
  <script>
    (function(){
      new inputTags({
        container: document.getElementsByClassName("tag-input")[0],
        tags : "{{ tags }}".split(","),
        allowDuplicateTags : false,
        duplicateTime: 300,
        onTagRemove : function (tag) {},
      });
      // editable rating star in modal
      ratingLabels = $("#modal .rating-star-edit");
      $(ratingLabels).each( function(index, value) {
        let ratingScore = $("input[type='hidden'][name='rating']").val() / 2;
        let label = $(this);
        label.starRating({
          initialRating: ratingScore,
          starSize: 20,
          onHover: function(currentIndex, currentRating, $el){
            $("input[type='hidden'][name='rating']").val(currentIndex);
          },
          onLeave: function(currentIndex, currentRating, $el){
            $("input[type='hidden'][name='rating']").val(currentRating * 2);
          }
        });
      });

      //show date picker if mark yesterday
      $("#modal #mark_anotherday").on('click', function(e) {
        if ($("#modal #mark_anotherday:checked").val() == '1') {
          $("#modal #mark_date").show()
        } else {
          $("#modal #mark_date").hide()
        }
      });

      // hide rating star when select wish
      const WISH_CODE = "wishlist";
      if ($("#statusSelection input[type='radio']:checked").val() == WISH_CODE) {
        $("#modal .rating-star-edit").hide();
      }
      $("#statusSelection input[type='radio']").on('click', function() {
        if ($(this).val() == WISH_CODE) {
          $("#modal .rating-star-edit").hide();
        } else {
          $("#modal .rating-star-edit").show();
        }

      });

    // show confirm modal
      $("#modal a.delete").on('click', function(e) {
        e.preventDefault();
        $(".confirm-modal").show();
        $(".bg-mask").show();
      });

    // confirm modal
      $(".confirm-modal input[type='submit']").on('click', function(e) {
        e.preventDefault();
        $("#modal form").submit();
      });
    })();
  </script>
</div>