{% extends "document.njk" %}

{% block content %}
<link rel="stylesheet" href="/assets/@rmdes-indiekit-endpoint-comments/styles.css">

<div class="s-flow">
  {% if error %}
  {{ badge({ color: "red", text: error }) }}
  {% endif %}

  {# === Stats bar === #}
  <div class="comments-stats">
    <div class="comments-stats__item">
      {{ badge({ color: "purple", text: totalComments, size: "small" }) }}
      <span class="comments-stats__label">{{ __("comments.dashboard.totalComments") if __ else "Total comments" }}</span>
    </div>
    <div class="comments-stats__item">
      {{ badge({ color: "green", text: thisWeek, size: "small" }) }}
      <span class="comments-stats__label">{{ __("comments.dashboard.thisWeek") if __ else "This week" }}</span>
    </div>
    <div class="comments-stats__item">
      {{ badge({ color: "offset", text: uniqueCommenters, size: "small" }) }}
      <span class="comments-stats__label">{{ __("comments.dashboard.uniqueCommenters") if __ else "Unique commenters" }}</span>
    </div>
    <div class="comments-stats__item">
      {{ badge({ color: "red", text: hiddenComments, size: "small" }) }}
      <span class="comments-stats__label">{{ __("comments.dashboard.hiddenComments") if __ else "Hidden comments" }}</span>
    </div>
  </div>

  {# === Filters === #}
  <div class="comments-filters">
    <a href="{{ baseUrl }}?status=all"
       class="button button--small {{ '' if statusFilter == 'all' else 'button--secondary' }}">
      {{ __("comments.dashboard.filterAll") if __ else "All" }}
    </a>
    <a href="{{ baseUrl }}?status=public"
       class="button button--small {{ '' if statusFilter == 'public' else 'button--secondary' }}">
      {{ __("comments.dashboard.filterPublic") if __ else "Public" }}
    </a>
    <a href="{{ baseUrl }}?status=deleted"
       class="button button--small {{ '' if statusFilter == 'deleted' else 'button--secondary' }}">
      {{ __("comments.dashboard.filterHidden") if __ else "Hidden" }}
    </a>
  </div>

  {# === Comment list === #}
  {% if comments.length %}
  <ul class="comments-list" role="list">
    {% for comment in comments %}
    <li>
      <article class="comments-card {{ 'comments-card--hidden' if comment.status == 'deleted' }}">
        {# Avatar with CSS stacking fallback #}
        <div class="comments-avatar-wrap" data-avatar-fallback>
          {% if comment.author.photo %}
          <img src="{{ comment.author.photo }}" alt="" loading="lazy">
          {% endif %}
          <span class="comments-avatar--default" aria-hidden="true">
            {{ comment.author.name[0] | upper if comment.author.name else "?" }}
          </span>
        </div>

        <div class="comments-card__body">
          {# Author + status + timestamp #}
          <div class="comments-card__header">
            <span class="comments-card__author">
              <a href="{{ comment.author.url }}" target="_blank" rel="noopener">
                {{ comment.author.name or comment.author.url }}
              </a>
            </span>
            {% if comment.status == "deleted" %}
            {{ badge({ color: "red", text: "Hidden", size: "small" }) }}
            {% endif %}
            {% if comment.published %}
            <time class="comments-card__time" datetime="{{ comment.published }}">
              {{ comment.published | date("PPp") }}
            </time>
            {% endif %}
          </div>

          {# Content #}
          <div class="comments-card__content">
            {{ comment.content.html | safe if comment.content.html else comment.content.text }}
          </div>

          {# Target + Actions on same row #}
          <div class="comments-card__footer">
            <a href="{{ comment.target }}" class="comments-card__target" target="_blank" rel="noopener">
              {{ comment.target | replace("https://", "") | truncate(50) }}
            </a>
            <div class="comments-card__actions">
              {% if comment.status == "deleted" %}
              <form method="post" action="{{ baseUrl }}/hide">
                <input type="hidden" name="id" value="{{ comment._id }}">
                <input type="hidden" name="action" value="restore">
                <button type="submit" class="button button--secondary button--small">
                  {{ __("comments.dashboard.restore") if __ else "Restore" }}
                </button>
              </form>
              {% else %}
              <form method="post" action="{{ baseUrl }}/hide">
                <input type="hidden" name="id" value="{{ comment._id }}">
                <button type="submit" class="button button--secondary button--small">
                  {{ __("comments.dashboard.hide") if __ else "Hide" }}
                </button>
              </form>
              {% endif %}

              <form method="post" action="{{ baseUrl }}/purge" x-data="{ confirm: false }">
                <input type="hidden" name="id" value="{{ comment._id }}">
                <button type="button"
                        x-on:click="confirm ? $el.closest('form').submit() : confirm = true"
                        x-text="confirm ? '{{ __("comments.dashboard.purgeConfirm") if __ else "Are you sure?" }}' : '{{ __("comments.dashboard.purge") if __ else "Purge" }}'"
                        class="button button--warning button--small">
                </button>
              </form>
            </div>
          </div>
        </div>
      </article>
    </li>
    {% endfor %}
  </ul>

  {# === Pagination === #}
  {% if totalPages > 1 %}
  {{ pagination({
    previous: {
      text: __("comments.dashboard.previous") if __ else "Previous",
      href: baseUrl + "?page=" + (page - 1) + "&status=" + statusFilter
    } if page > 1,
    items: [],
    next: {
      text: __("comments.dashboard.next") if __ else "Next",
      href: baseUrl + "?page=" + (page + 1) + "&status=" + statusFilter
    } if page < totalPages,
    results: {
      from: ((page - 1) * 20) + 1,
      to: page * 20 if page < totalPages else totalComments,
      count: totalComments
    }
  }) }}
  {% endif %}

  {% else %}
  {{ prose({ text: __("comments.dashboard.noComments") if __ else "No comments yet." }) }}
  {% endif %}
</div>

<script>document.addEventListener("error",function(e){var t=e.target;if(t.tagName==="IMG"&&t.closest("[data-avatar-fallback]"))t.remove()},true)</script>
{% endblock %}