{% load static %}
{% load i18n %}
{% load mastodon %}
{% load thumb %}
<!DOCTYPE html>
<html lang="zh" class="content-page">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ site_name }} - {% trans 'Review' %} - {{ item.display_title }}</title>
    {% include "common_libs.html" %}
    <style type="text/css">#id_visibility, #id_visibility li {padding-left:0; margin-bottom:0; display: inline-block !important;}</style>
  </head>
  <body>
    {% include "_header.html" %}
    <main>
      <div>
        <article>
          <form method="post" class="review-form">
            {% csrf_token %}
            {{ form.item }}
            <div>{{ form.title.label }}</div>
            {{ form.title }}
            <div class="clearfix">
              <span class="float-left">{{ form.body.label }}</span>
            </div>
            <div class="markdown-content">{{ form.body }}</div>
            <hr>
            <div class="grid">
              <div>
                <label for="leading_space" style="display: inline">
                  <input type="checkbox" name="leading_space" value="1" id="leading_space">
                  {% trans "When saving, replace leading spaces with full-width spaces" %}
                </label>
              </div>
              <div>{{ form.visibility }}</div>
              <div>{{ form.share_to_mastodon }}{{ form.share_to_mastodon.label }}</div>
            </div>
            <input class="button float-right" type="submit" value="{% trans 'Save' %}">
            <div>
              <label for="mark_anotherday">
                {% trans "change review date" %}
                <input type="checkbox" name="mark_anotherday" value="1" id="mark_anotherday">
                <input type="date"
                       name="mark_date"
                       id="mark_date"
                       min="1900-01-01"
                       max="{{ date_today }}"
                       value="{{ date_today }}"
                       style="display: none">
              </label>
            </div>
            <script type="text/javascript">
                  $("#mark_anotherday").on('click', ()=>{
                    if ($("#mark_anotherday:checked").val() == '1') {
                      $("#mark_date").show()
                    } else {
                      $("#mark_date").hide()
                    }
                  });
            </script>
            {{ form.media }}
          </form>
          <hr>
          {% include "markdown.html" %}
        </article>
      </div>
      <aside>
        {% include "_sidebar_item.html" with item=item %}
      </aside>
    </main>
    <script>
          $(".spoiler").on('click', function(){
            $(this).toggleClass('revealed');
          })
    </script>
    {% include "_footer.html" %}
  </body>
</html>
