{% extends "base_app.html" %} {% set active_page = 'friends' %} {% block title
%}Friends{% endblock %} {% block content %}
<h1>Friends</h1>

<section class="panel friends-search-panel">
  <h2>Find people</h2>
  <form method="GET" action="{{ url_for('main.friends') }}" class="search-form">
    <input
      type="search"
      name="q"
      minlength="2"
      value="{{ search_query }}"
      placeholder="Search by username"
    />
    <button type="submit" class="btn btn-primary">Search</button>
  </form>

  {% if search_query %}
  <div class="friends-list">
    {% if search_results %} {% for person in search_results %}
    <div class="friend-card">
      <div class="friend-main">
        <div class="friend-username">{{ person.username }}</div>
        <div class="friend-status">{{ person.relation|capitalize }}</div>
      </div>
      <div class="friend-actions">
        {% if person.relation == 'none' %}
        <form
          method="POST"
          action="{{ url_for('friends.request_page_action') }}"
        >
          <input type="hidden" name="addressee_id" value="{{ person.id }}" />
          <input type="hidden" name="q" value="{{ search_query }}" />
          <button class="btn btn-secondary" type="submit">Add Friend</button>
        </form>
        {% elif person.relation == 'incoming' %}
        <form
          method="POST"
          action="{{ url_for('friends.accept_page_action', requester_id=person.id) }}"
        >
          <input type="hidden" name="q" value="{{ search_query }}" />
          <button class="btn btn-primary" type="submit">Accept</button>
        </form>
        <form
          method="POST"
          action="{{ url_for('friends.decline_page_action', requester_id=person.id) }}"
        >
          <input type="hidden" name="q" value="{{ search_query }}" />
          <button class="btn btn-secondary" type="submit">Decline</button>
        </form>
        {% elif person.relation == 'outgoing' %}
        <form
          method="POST"
          action="{{ url_for('friends.cancel_page_action', addressee_id=person.id) }}"
        >
          <input type="hidden" name="q" value="{{ search_query }}" />
          <button class="btn btn-secondary" type="submit">
            Cancel Request
          </button>
        </form>
        {% else %}
        <span class="friend-note">No action available</span>
        {% endif %}
      </div>
    </div>
    {% endfor %} {% else %}
    <p class="muted">No users found for "{{ search_query }}".</p>
    {% endif %}
  </div>
  {% endif %}
</section>

<section class="panel friends-section">
  <!-- todo: update presence -->
  <h2>Your friends</h2>
  {% if friends %}
  <div class="friends-list">
    {% for friend in friends %}
    <div class="friend-card">
      <div class="friend-main">
        <div class="friend-username">{{ friend.username }}</div>
        <div
          class="friend-status {{ 'status-online' if friend.is_online else 'status-offline' }}"
        >
          {{ 'Online' if friend.is_online else 'Offline' }}
        </div>
      </div>
      <!-- todo: implement button -->
      <button class="btn btn-secondary" type="button">Challenge</button>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="muted">No friends yet.</p>
  {% endif %}
</section>

<section class="panel friends-section">
  <h2>Requests</h2>

  <h3>Incoming</h3>
  {% if incoming_requests %}
  <div class="friends-list">
    {% for req in incoming_requests %}
    <div class="friend-card">
      <div class="friend-main">
        <div class="friend-username">{{ req.username }}</div>
        <div class="friend-status">Pending</div>
      </div>
      <div class="friend-actions">
        <form
          method="POST"
          action="{{ url_for('friends.accept_page_action', requester_id=req.id) }}"
        >
          <button class="btn btn-primary" type="submit">Accept</button>
        </form>
        <form
          method="POST"
          action="{{ url_for('friends.decline_page_action', requester_id=req.id) }}"
        >
          <button class="btn btn-secondary" type="submit">Decline</button>
        </form>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="muted">No incoming requests.</p>
  {% endif %}

  <h3>Outgoing</h3>
  {% if outgoing_requests %}
  <div class="friends-list">
    {% for req in outgoing_requests %}
    <div class="friend-card">
      <div class="friend-main">
        <div class="friend-username">{{ req.username }}</div>
        <div class="friend-status">Pending</div>
      </div>
      <form
        method="POST"
        action="{{ url_for('friends.cancel_page_action', addressee_id=req.id) }}"
      >
        <button class="btn btn-secondary" type="submit">Cancel Request</button>
      </form>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="muted">No outgoing requests.</p>
  {% endif %}
</section>
{% endblock %}