{% extends "base.html" %}
{% block title %}Sign in — Members{% endblock %}
{% block content %}
<style>
  .login-wrap {
    max-width: 360px;
    margin: 4rem auto 0;
  }
  .login-wrap h1 { margin-bottom: 0.5rem; }
  .login-wrap p  { color: var(--subtext0); font-size: 0.875rem; margin-bottom: 1.5rem; }
  .field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
  .field label { font-size: 0.8rem; color: var(--subtext0); }
  .field input {
    background: var(--crust);
    border: 1px solid var(--surface0);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.9rem;
    padding: 0.55rem 0.75rem;
    outline: none;
    width: 100%;
  }
  .field input:focus { border-color: var(--blue); }
  .error {
    background: #3b1e25;
    border: 1px solid #4d2530;
    border-radius: 6px;
    color: var(--red);
    font-size: 0.875rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
  }
  .btn-submit {
    width: 100%;
    padding: 0.55rem;
    font-size: 0.9rem;
    background: #1e3528;
    color: var(--green);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.1s;
  }
  .btn-submit:hover { background: #253f30; }
</style>

<div class="login-wrap">
  <h1>Members</h1>
  <p>Enter the password to manage team members.</p>

  {% if error %}
  <div class="error">Incorrect password — try again.</div>
  {% endif %}

  <form method="post" action="/members/login">
    <div class="field">
      <label for="password">Password</label>
      <input id="password" name="password" type="password" autofocus required>
    </div>
    <button class="btn-submit" type="submit">Sign in</button>
  </form>
</div>
{% endblock %}