{% import "_icons.html" as icons %}
<div class="panel link-card {% if link.needs_review %}needs-review{% endif %}" id="link-{{ link.id }}">
  <div class="card-head">
    <span class="card-avatar" style="--h: {{ link.url | hue }};">
      {{ (link.url | domain)[:1] | upper or '?' }}
    </span>

    <div class="card-badges">
      {% if link.category %}
      <span class="badge badge-cat">{{ link.category }}</span>
      {% endif %}
      {% if link.manufacturer %}
      <span class="badge badge-man">{{ link.manufacturer }}</span>
      {% endif %}
    </div>

    <div class="card-actions">
      <button class="ghost icon-btn review-toggle {% if link.needs_review %}icon-bookmark-active{% endif %}"
              title="{% if link.needs_review %}Nicht mehr zur Durchsicht{% else %}Zur Durchsicht markieren{% endif %}"
              hx-post="/links/{{ link.id }}/toggle-review"
              hx-target="#link-{{ link.id }}"
              hx-swap="outerHTML">{{ icons.bookmark(filled=link.needs_review) }}</button>
      <button class="ghost icon-btn"
              title="Bearbeiten"
              hx-get="/links/{{ link.id }}/edit"
              hx-target="#link-{{ link.id }}"
              hx-swap="outerHTML">{{ icons.edit() }}</button>
      <button class="danger icon-btn"
              title="Löschen"
              hx-delete="/links/{{ link.id }}"
              hx-target="#link-{{ link.id }}"
              hx-swap="outerHTML"
              hx-confirm="Diesen Link wirklich löschen?">{{ icons.trash() }}</button>
    </div>
  </div>

  <a href="{{ link.url }}" target="_blank" rel="noopener" class="card-title">
    {{ link.title or link.url }}
  </a>

  <p class="card-summary">
    {%- if link.summary -%}
      {{ link.summary }}
    {%- elif link.status == 'no_content' -%}
      Inhalt konnte nicht abgerufen werden – Kategorisierung anhand der URL.
    {%- endif -%}
  </p>

  <div class="card-spacer"></div>

  {% if link.tag_list %}
  <div class="card-tags">
    {% for tag in link.tag_list %}
    <span class="badge badge-tag">#{{ tag }}</span>
    {% endfor %}
  </div>
  {% endif %}

  <div class="card-foot">
    <span class="card-domain" title="{{ link.url }}">{{ link.url | domain }}</span>
    <span title="hinzugefügt am {{ link.created_at | datum }}">
      {{ icons.clock(size=13) }} {{ link.created_at | datum }}
    </span>
  </div>
</div>