{% extends "base.html" %}
{% block title %}Members{% endblock %}
{% block content %}
<div style="display:flex;align-items:baseline;gap:1rem;margin-bottom:1.5rem;">
  <h1 style="margin-bottom:0;">Members</h1>
  {% if password_set %}
  <a href="/members/logout" style="font-size:0.8rem;color:var(--overlay0);text-decoration:none;">Sign out</a>
  {% endif %}
</div>

<div class="card">
  {% for m in members %}
  <div class="row">
    <div class="name" style="{% if not m.active %}opacity:0.4{% endif %}">{{ m.name }}</div>
    <form action="/members/{{ m.id }}/toggle" method="post">
      <button class="btn {% if m.active %}btn-slate{% else %}btn-green{% endif %}" type="submit">
        {% if m.active %}Deactivate{% else %}Activate{% endif %}
      </button>
    </form>
  </div>
  {% else %}
  <div class="row empty">No members yet. Add one below.</div>
  {% endfor %}
  <form class="add-form" action="/members/add" method="post">
    <input name="name" type="text" placeholder="Name" required autocomplete="off">
    <button class="btn btn-green" type="submit">Add</button>
  </form>
</div>
{% endblock %}