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

<div class="columns-1 md:columns-2 2xl:columns-3 gap-4" id="text_content_cards">
  {% for text_content in text_contents %}
  <div class="card cursor-pointer mb-4 bg-base-100 shadow break-inside-avoid-column"
    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 %}
    {% if text_content.file_info.mime_type == "image/png" or text_content.file_info.mime_type == "image/jpeg" %}
    <figure>
      <img src="/file/{{text_content.file_info.id}}" alt="{{text_content.file_info.file_name}}" />
    </figure>
    {% endif %}
    <div class="card-body max-w-[95vw]">
      <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 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" hx-on:click="event.stopPropagation()">
          {% if text_content.url_info %}
          <button class="btn-btn-square btn-ghost btn-sm">
            <a href="{{text_content.url_info.url}}" target="_blank" rel="noopener noreferrer">
              {% include "icons/link_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>