{% block latest_content_section %}
<ul id="latest_content_section" class="list">
  <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Recently added content</li>
  {% for item in latest_text_contents %}
  <li class="list-row">
    <div class="bg-accent rounded-box size-10 flex justify-center items-center text-accent-content">
      {% if item.url %}
      {% include "icons/globe_icon.html" %}
      {% elif item.file_info %}
      {% include "icons/document_icon.html" %}
      {% else %}
      {% include "icons/chat_icon.html" %}
      {% endif %}
    </div>
    <div>
      <div class="truncate max-w-[160px]">
        {% if item.url %}
        {{item.url}}
        {% elif item.file_info%}
        {{item.file_info.file_name}}
        {% else %}
        {{item.text}}
        {% endif %}
      </div>
      <div class="text-xs font-semibold opacity-60">
        {{item.created_at|datetimeformat(format="short", tz=user.timezone)}} </div>
    </div>
    <p class="list-col-wrap text-xs [&:before]:content-['Instructions:_']  [&:before]:opacity-60">
      {{item.instructions}}
    </p>
    <!-- <button class="btn disabled btn-square btn-ghost"> -->
    <!-- <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> -->
    <!-- <g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"> -->
    <!-- <path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75z"></path> -->
    <!-- <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"></path> -->
    <!-- </g> -->
    <!-- </svg> -->
    <!-- </button> -->
    <button hx-delete="/text-content/{{item.id}}" hx-target="#latest_content_section" hx-swap="outerHTML"
      class="btn btn-square btn-ghost">
      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor">
          <path d="M3 6h18"></path>
          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
        </g>
      </svg>
    </button>
  </li>
  {% endfor %}
</ul>
{% endblock %}