{% extends "layout.html" %}
{% block content %}

<!-- safe to include even if layout already loads it -->
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

<div style="max-width:520px; margin:28px auto;">
  {% with messages = get_flashed_messages() %}
    {% if messages %}
      <ul>
        {% for m in messages %}
          <li>{{ m }}</li>
        {% endfor %}
      </ul>
    {% endif %}
  {% endwith %}

  <div class="card" style="padding:22px;">
    <h2 style="margin-top:0">Login</h2>

    <form method="post" action="{{ url_for('login') }}" style="display:flex; flex-direction:column; gap:12px;">
      <label>
        <div class="label-muted">Username</div>
        <input name="username" id="username" type="text" placeholder="your username" required>
      </label>

      <label>
        <div class="label-muted" style="display:flex; justify-content:space-between; align-items:center;">
          <span>Password</span>
          <a href="{{ url_for('register') }}" style="font-size:13px; color:var(--muted); text-decoration:none;">Create account</a>
        </div>
        <div style="position:relative;">
          <input name="password" id="password" type="password" placeholder="your password" required style="padding-right:92px;">
          <button type="button" id="pw-toggle" style="position:absolute; right:6px; top:6px; height:36px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:var(--muted); padding:6px 10px; cursor:pointer;">
            Show
          </button>
        </div>
      </label>

      <div style="display:flex; gap:10px; align-items:center; justify-content:space-between;">
        <label style="display:flex; gap:8px; align-items:center; font-size:14px; color:var(--muted);">
          <input type="checkbox" name="remember" style="width:16px; height:16px;">
          Remember
        </label>

        <button class="btn" type="submit" style="min-width:120px;">Login</button>
      </div>
    </form>

  </div>
</div>

<script>
  // autofocus username
  document.getElementById('username')?.focus();

  // password toggle
  (function(){
    const pw = document.getElementById('password');
    const btn = document.getElementById('pw-toggle');
    if (!pw || !btn) return;
    btn.addEventListener('click', () => {
      if (pw.type === 'password') {
        pw.type = 'text';
        btn.innerText = 'Hide';
      } else {
        pw.type = 'password';
        btn.innerText = 'Show';
      }
      pw.focus();
    });
  })();
</script>

{% endblock %}