minne/html-router/templates/content/content_list.html

<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4" id="text_content_cards">
  {% for text_content in text_contents %}
  <div class="card min-w-72 bg-base-100 shadow">
    <img class="rounded-t-md overflow-clip" src="/file/{{text_content.url_info.image_id}}" />
    <div class="card-body">
      <div class="flex justify-between space-x-2">
        <h2 class="card-title truncate">
          {% if text_content.url %}
          <a href="{{ text_content.url}}">{{text_content.url}}</a>
          {% elif text_content.file_info %}
          {{text_content.file_info.file_name}}
          {% else %}
          {{text_content.text}}
          {% endif %}
        </h2>
        <div class="flex-shrink-0">
          {% if text_content.url %}
          {% include "icons/globe_icon.html" %}
          {% elif text_content.file_info %}
          {% include "icons/document_icon.html" %}
          {% else %}
          {% include "icons/chat_icon.html" %}
          {% endif %}
        </div>
      </div>
      <div class="flex items-center justify-between">
        <p class="text-xs opacity-60">
          {{ text_content.created_at | datetimeformat(format="short", tz=user.timezone) }}
        </p>
        <div class="badge badge-soft badge-secondary mr-2">{{ text_content.category }}</div>
        <div class="flex gap-2">
          <button hx-get="/content/{{ text_content.id }}" hx-target="#modal" hx-swap="innerHTML"
            class="btn btn-square btn-ghost btn-sm">
            {% include "icons/edit_icon.html" %}
          </button>
          <button hx-delete="/content/{{ text_content.id }}" hx-target="#text_content_cards" hx-swap="outerHTML"
            class="btn btn-square btn-ghost btn-sm">
            {% include "icons/delete_icon.html" %}
          </button>
        </div>
      </div>
      <p class="mt-2">
        {{ text_content.instructions }}
      </p>
    </div>
  </div>
  {% endfor %}
</div>