{% extends "base.html" %}
{% block content %}
<div class="users-list">
  <h2 class="page-title">Members</h2>
  {% if let Some(viewer_id) = ctx.user_id %}
  <form method="POST" action="/users/{{ viewer_id }}/follow" class="follow-form">
    <input type="hidden" name="_csrf" value="{{ ctx.csrf_token }}">
    <input type="hidden" name="redirect_after" value="/users">
    <input type="text" name="handle" placeholder="@user@instance.tld" required>
    <button type="submit">Follow</button>
  </form>
  {% endif %}
  {% for user in users %}
  <div class="user-row">
    <div class="user-avatar">{{ user.initial }}</div>
    <div class="user-info">
      <div class="user-name">{{ user.display_name }}</div>
      <div class="user-meta">{{ user.total_movies }} movies · avg {{ user.avg_rating_display }}★</div>
    </div>
    <a href="/users/{{ user.user_id }}" class="btn-secondary">View profile →</a>
  </div>
  {% else %}
  <p class="empty">No users yet.</p>
  {% endfor %}

  {% if !remote_actors.is_empty() %}
  <h2 class="page-title federated-title">Federated</h2>
  {% for actor in remote_actors %}
  <div class="user-row">
    <div class="user-avatar federated-avatar">{{ actor.initial }}</div>
    <div class="user-info">
      <div class="user-name">{{ actor.display_name }}</div>
      <div class="user-meta muted">{{ actor.handle }}</div>
    </div>
    <a href="{{ actor.url }}" target="_blank" rel="noopener noreferrer" class="btn-secondary">
      View profile ↗
    </a>
  </div>
  {% endfor %}
  {% endif %}
</div>
{% endblock %}