58 lines
2.2 KiB
HTML
58 lines
2.2 KiB
HTML
{% 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 %}
|