{% extends "base.html" %}

{% block title %}Subscribe{% endblock %}

{% block content %}
<section class="rounded-3xl border border-slate-200/80 bg-white/80 p-6 shadow-sm backdrop-blur">
  <h1 class="text-3xl font-bold tracking-tight">Subscribe</h1>
  <p class="mt-3 text-sm text-slate-600">Enter a friend's username to subscribe. No user search is provided.</p>

  {% if !page.error.is_empty() %}
  <p class="mt-4 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">{{ page.error }}</p>
  {% endif %}
  {% if !page.message.is_empty() %}
  <p class="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">{{ page.message }}</p>
  {% endif %}

  <form method="post" action="/subscribe" class="mt-5 flex max-w-lg flex-wrap items-center gap-2">
    <input
      type="text"
      name="username"
      placeholder="Friend username"
      required
      class="flex-1 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 focus:border-teal-500 focus:outline-none"
    />
    <button type="submit" class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-700">Subscribe</button>
  </form>

  <div class="mt-6">
    <h2 class="text-lg font-bold tracking-tight text-slate-900">Subscribed Users</h2>
    {% if page.subscriptions.is_empty() %}
    <p class="mt-2 text-sm text-slate-600">No subscriptions yet.</p>
    {% else %}
    <div class="mt-3 grid gap-2">
      {% for username in page.subscriptions %}
      <div class="flex flex-wrap items-center gap-2">
        <a
          href="/u/{{ username }}"
          class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-semibold text-slate-800 hover:bg-slate-100"
        >
          @{{ username }}
        </a>
        <form method="post" action="/subscribe/unsubscribe">
          <input type="hidden" name="username" value="{{ username }}" />
          <button
            type="submit"
            class="rounded-lg border border-rose-300 bg-rose-50 px-3 py-2 text-sm font-semibold text-rose-700 hover:bg-rose-100"
          >
            Unsubscribe
          </button>
        </form>
      </div>
      {% endfor %}
    </div>
    {% endif %}
  </div>
</section>
{% endblock %}