neiam /fieri-forever

{% extends "root.html" %}

{% block content %}
<div class="space-y-6">
  <h2 class="text-2xl font-bold text-accent">Friends</h2>

  {% if notice %}
  {% set messages = {
    "requested": ["success", "Request sent."],
    "friends": ["success", "You're friends now."],
    "no-such-user": ["warning", "Nobody has that username."],
    "self": ["info", "You're already on good terms with yourself."],
  } %}
  {% if messages[notice] %}<div class="alert alert-{{ messages[notice][0] }} text-sm">{{ messages[notice][1] }}</div>{% endif %}
  {% endif %}

  <p class="text-sm opacity-70">
    Friends come first when picking who's going to lunch, alongside people you've
    actually eaten with in that area.
  </p>

  <form method="post" action="/friends" class="join">
    <input class="input input-bordered input-sm join-item" type="text" name="username" placeholder="username" required aria-label="Username"/>
    <button class="btn btn-sm btn-primary join-item" type="submit"><i class="fas fa-user-plus"></i> Add friend</button>
  </form>

  {% if incoming %}
  <section class="space-y-2">
    <h3 class="font-semibold">Asking to be your friend</h3>
    <ul class="space-y-1">
      {% for p in incoming %}
      <li class="flex items-center gap-2">
        <span class="flex-1">{{ p.username }}</span>
        <form method="post" action="/friends/{{ p.id }}/accept"><button class="btn btn-xs btn-primary" type="submit">Accept</button></form>
        <form method="post" action="/friends/{{ p.id }}/remove"><button class="btn btn-xs btn-ghost" type="submit">Decline</button></form>
      </li>
      {% endfor %}
    </ul>
  </section>
  {% endif %}

  <section class="space-y-2">
    <h3 class="font-semibold">Your friends</h3>
    {% if friends %}
    <ul class="space-y-1">
      {% for p in friends %}
      <li class="flex items-center gap-2">
        <span class="flex-1">{{ p.username }}</span>
        <form method="post" action="/friends/{{ p.id }}/remove">
          <button class="btn btn-xs btn-ghost" type="submit" hx-confirm="Unfriend {{ p.username }}?">Unfriend</button>
        </form>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="text-sm opacity-70">None yet.</p>
    {% endif %}
  </section>

  {% if outgoing %}
  <section class="space-y-2">
    <h3 class="font-semibold">Waiting on them</h3>
    <ul class="space-y-1">
      {% for p in outgoing %}
      <li class="flex items-center gap-2">
        <span class="flex-1">{{ p.username }}</span>
        <form method="post" action="/friends/{{ p.id }}/remove"><button class="btn btn-xs btn-ghost" type="submit">Cancel</button></form>
      </li>
      {% endfor %}
    </ul>
  </section>
  {% endif %}

  {% if suggestions %}
  <section class="space-y-2">
    <h3 class="font-semibold">People in your areas</h3>
    <ul class="space-y-1">
      {% for p in suggestions %}
      <li class="flex items-center gap-2">
        <span class="flex-1">{{ p.username }} <span class="text-xs opacity-60">· {{ p.shared_areas }} shared area{{ "" if p.shared_areas == 1 else "s" }}</span></span>
        <form method="post" action="/friends">
          <input type="hidden" name="user_id" value="{{ p.id }}"/>
          <button class="btn btn-xs btn-outline" type="submit"><i class="fas fa-user-plus"></i> Add</button>
        </form>
      </li>
      {% endfor %}
    </ul>
  </section>
  {% endif %}
</div>
{% endblock %}