{% extends "base.html" %}

{% block content %}
  <div class="flex items-baseline justify-between gap-3">
    <div>
      <div class="text-sm text-gray-500">총 <span class="font-semibold text-gray-800">{{ total }}</span>개</div>
      {% if q %}
        <div class="text-xs text-gray-500 mt-1">검색어: <span class="font-semibold text-gray-700">{{ q }}</span></div>
      {% endif %}
    </div>
    <a href="/" class="text-sm text-gray-600 hover:text-gray-900 underline">전체 보기</a>
  </div>

  <div class="mt-4 flex flex-wrap gap-2">
    <a
      href="{% if q %}/search?q={{ q|urlencode }}{% else %}/{% endif %}"
      class="px-3 py-1 rounded-full text-sm border {% if not category_id %}bg-gray-900 text-white border-gray-900{% else %}bg-white hover:bg-gray-50{% endif %}"
    >
      전체
    </a>
    {% for c in categories %}
      <a
        href="{% if q %}/search?q={{ q|urlencode }}&category={{ c.id }}{% else %}/?category={{ c.id }}{% endif %}"
        class="px-3 py-1 rounded-full text-sm border {% if category_id==c.id %}bg-gray-900 text-white border-gray-900{% else %}bg-white hover:bg-gray-50{% endif %}"
      >
        {{ c.name }}
      </a>
    {% endfor %}
  </div>

  <div class="mt-6 space-y-3">
    {% if prompts|length == 0 %}
      <div class="p-6 bg-white border rounded text-sm text-gray-600">
        아직 프롬프트가 없습니다. <a class="underline" href="/new">첫 프롬프트를 등록</a>해보세요.
      </div>
    {% endif %}

    {% for p in prompts %}
      <div class="p-4 bg-white border rounded">
        <div class="flex items-start gap-3">
          <div class="min-w-0 flex-1">
            <a href="/prompt/{{ p.id }}" class="text-lg font-semibold leading-snug hover:underline">
              {{ p.title }}
            </a>
            <div class="mt-1 text-xs text-gray-500 flex flex-wrap items-center gap-2">
              <span class="px-2 py-0.5 rounded bg-gray-100 text-gray-700">
                {% for c in categories %}
                  {% if c.id == p.category_id %}{{ c.name }}{% endif %}
                {% endfor %}
              </span>
              <span>작성자: <span class="font-semibold text-gray-700">{{ p.author_nickname }}</span></span>
              <span>복사 <span class="font-semibold text-gray-700">{{ p.copy_count }}</span></span>
            </div>
            {% if p.description %}
              <div class="mt-2 text-sm text-gray-700">{{ p.description }}</div>
            {% endif %}
          </div>

          <div class="shrink-0">
            <div id="like-{{ p.id }}">
              {% set liked = (p.id in liked_ids) %}
              {% set cnt = like_counts.get(p.id, 0) %}
              <button
                class="px-3 py-1 rounded border text-sm {% if liked %}bg-gray-100 text-gray-500 cursor-not-allowed{% else %}bg-white hover:bg-gray-50{% endif %}"
                hx-post="/like/{{ p.id }}"
                hx-target="#like-{{ p.id }}"
                hx-swap="outerHTML"
                {% if liked %}disabled{% endif %}
              >
                {% if liked %}좋아요✓{% else %}좋아요{% endif %}
                <span class="font-semibold">({{ cnt }})</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  {% set has_prev = page > 1 %}
  {% set has_next = (page * page_size) < total %}
  {% if has_prev or has_next %}
    <div class="mt-6 flex items-center justify-between text-sm">
      <div>
        {% if has_prev %}
          {% if q %}
            <a class="underline" href="/search?q={{ q|urlencode }}&page={{ page-1 }}{% if category_id %}&category={{ category_id }}{% endif %}">← 이전</a>
          {% else %}
            <a class="underline" href="/?page={{ page-1 }}{% if category_id %}&category={{ category_id }}{% endif %}">← 이전</a>
          {% endif %}
        {% endif %}
      </div>
      <div class="text-gray-500">페이지 {{ page }}</div>
      <div>
        {% if has_next %}
          {% if q %}
            <a class="underline" href="/search?q={{ q|urlencode }}&page={{ page+1 }}{% if category_id %}&category={{ category_id }}{% endif %}">다음 →</a>
          {% else %}
            <a class="underline" href="/?page={{ page+1 }}{% if category_id %}&category={{ category_id }}{% endif %}">다음 →</a>
          {% endif %}
        {% endif %}
      </div>
    </div>
  {% endif %}
{% endblock %}