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" hx-get="/content/{{ text_content.id }}/read" hx-target="#modal"
    hx-swap="innerHTML">
    {% if text_content.url_info %}
    <figure>
      <img src="/file/{{text_content.url_info.image_id}}" alt="website screenshot" />
    </figure>
    {% endif %}
    <div class="card-body">
      <div class="flex justify-between space-x-2">
        <h2 class="card-title truncate">
          {% if text_content.url_info %}
          {{text_content.url_info.title}}
          {% elif text_content.file_info %}
          {{text_content.file_info.file_name}}
          {% else %}
          {{text_content.text}}
          {% endif %}
        </h2>
      </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">
          {% if text_content.url_info %}
          <button class="btn-btn-square btn-ghost btn-sm">
            <a href="{{text_content.url_info.url}}">
              {% include "icons/globe_icon.html" %}
            </a>
          </button>
          {% endif %}
          <button hx-get="/content/{{ text_content.id }}/read" hx-target="#modal" hx-swap="innerHTML"
            class="btn btn-square btn-ghost btn-sm">
            {% include "icons/read_icon.html" %}
          </button>
          <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>