{% load user_actions %}
{% load i18n %}
<section>
  <h5>
    {% trans "my comment and tags" %}
    <small>
      <span class="action inline">
        <a href="#"
           hx-get="{% url 'journal:mark' item.uuid %}"
           hx-target="body"
           hx-swap="beforeend">
          {% if mark.comment or mark.tags %}
            <i class="fa-regular fa-pen-to-square"></i>
          {% else %}
            <i class="fa-regular fa-square-plus"></i>
          {% endif %}
        </a>
      </span>
    </small>
  </h5>
  <div class="tag-list">
    {% for tag in mark.tags %}
      <span>
        <a href="{% url 'journal:user_tag_member_list' request.user.username tag %}">{{ tag }}</a>
      </span>
    {% endfor %}
  </div>
  {% if mark.comment %}
    <span class="action">
      {% if mark.comment.latest_post %}
        {% include "action_like_post.html" with post=mark.comment.latest_post %}
        {% include "action_boost_post.html" with post=mark.comment.latest_post %}
        {% include "action_open_post.html" with post=mark.comment.latest_post %}
      {% endif %}
      {% comment %}
      <span class="timestamp">{{ mark.comment.created_time|date }}</span>
      {% endcomment %}
    </span>
    <p>{{ mark.comment.html|safe }}</p>
  {% endif %}
  <script>window.cil=[];</script>
  {% for comment in child_item_comments %}
    <script>window.cil.push('{{ comment.item.uuid }}');</script>
    <span class="action">
      <span>
        <a href="#"
           hx-get="{% url 'journal:comment' comment.item.uuid %}"
           hx-target="body"
           hx-swap="beforeend"><i class="fa-regular fa-pen-to-square"></i></a>
      </span>
      {% if comment.latest_post %}
        {% include "action_like_post.html" with post=comment.latest_post %}
        {% include "action_boost_post.html" with post=comment.latest_post %}
        {% include "action_open_post.html" with post=comment.latest_post %}
      {% endif %}
      {% comment %} <span class="timestamp">{{ comment.created_time|date }}</span> {% endcomment %}
    </span>
    <p>
      <a href="{{ comment.item.url }}">{{ comment.item.display_title }}</a>: {{ comment.html|safe }}
    </p>
  {% endfor %}
</section>
<section>
  <h5>
    {% trans "my notes" %}
    {% if mark.shelf %}
      <small>
        <span class="action inline">
          <a href="#"
             hx-get="{% url 'journal:note' item.uuid %}"
             hx-target="body"
             hx-swap="beforeend">
            <i class="fa-regular fa-square-plus"></i>
          </a>
        </span>
      </small>
    {% endif %}
  </h5>
  {% for note in mark.notes %}
    <span class="action">
      <span>
        <a href="#"
           hx-get="{% url 'journal:note' note.item.uuid note.uuid %}"
           hx-target="body"
           hx-swap="beforeend"><i class="fa-regular fa-pen-to-square"></i></a>
      </span>
      {% if note.latest_post %}
        {% include "action_like_post.html" with post=note.latest_post %}
        {% include "action_boost_post.html" with post=note.latest_post %}
        {% include "action_open_post.html" with post=note.latest_post %}
      {% endif %}
    </span>
    {% if note.title %}<h6>{{ note.title|default:'' }}</h6>{% endif %}
    <p>
      {% if note.progress_value %}<span class="tag-list"><span><a>{{ note.progress_display }}</a></span></span>{% endif %}
      {{ note.content|linebreaksbr }}
      <div class="attachments">
        {% for attachment in note.attachments %}
          {% if attachment.type == 'image' %}
            <a href="#img_{{ note.uuid }}_{{ loop.index }}">
              <img src="{{ attachment.preview_url }}"
                   alt="image attachment"
                   class="preview">
            </a>
            <a href="#" class="lightbox" id="img_{{ note.uuid }}_{{ loop.index }}">
              <span style="background-image: url('{{ attachment.url }}')"></span>
            </a>
          {% endif %}
        {% endfor %}
      </div>
    </p>
  {% endfor %}
</section>
<section>
  <h5>
    {% trans "my review" %}
    {% if not review %}
      <small>
        <span class="action inline">
          <a href="{% url 'journal:review_create' item.uuid %}"
             class="item-mark-icon">
            <i class="fa-regular fa-square-plus"></i>
          </a>
        </span>
      </small>
    {% endif %}
  </h5>
  {% if review %}
    <span class="action">
      <span>
        <a href="{% url 'journal:review_edit' item.uuid review.uuid %}"
           class="item-mark-icon">
          <i class="fa-regular fa-pen-to-square"></i>
        </a>
      </span>
      {% if review.latest_post %}
        {% include "action_like_post.html" with post=review.latest_post %}
        {% include "action_boost_post.html" with post=review.latest_post %}
        {% include "action_open_post.html" with post=review.latest_post %}
      {% endif %}
      {% comment %}
      <span class="timestamp">{{ mark.review.created_time|date }}</span>
      {% endcomment %}
    </span>
    <p>
      <a href="{% url 'journal:review_retrieve' review.uuid %}">{{ review.title }}</a>
    </p>
  {% else %}
    {% comment %}
      <span class="empty">{% trans "nothing so far." %}</span>
    {% endcomment %}
  {% endif %}
</section>
<section>
  <h5>
    {% trans "my collection" %}
    <small>
      <span class="action inline item-mark-icon">
        <a href="#"
           hx-get="{% url 'journal:add_to_collection' item.uuid %}"
           class="edit"
           hx-target="body"
           hx-swap="beforeend">
          <i class="fa-regular fa-square-plus"></i>
        </a>
      </span>
    </small>
  </h5>
  <div>
    {% for c in my_collections %}
      <p>
        <a href="{{ c.url }}">{{ c.title }}</a>
        {% if c.visibility > 0 %}<i class="fa-solid fa-lock"></i>{% endif %}
      </p>
    {% empty %}
      {% comment %}
      <span class="empty">{% trans "nothing so far." %}</span>
      {% endcomment %}
    {% endfor %}
  </div>
</section>
{% if mark.logs %}
  <section id="mark-history">
    <h5>
      {% trans "mark history" %}
      <small>
        <span class="action inline">
          <a _="on click toggle .hide-action on #log-list then toggle .activated"><i class="fa-regular fa-pen-to-square"></i></a>
        </span>
      </small>
    </h5>
    <div id="log-list" class="hide-action">{% include '_item_user_mark_history.html' %}</div>
  </section>
{% endif %}
