{% extends "base.html" %}
{% block title %}Login - FC CI{% endblock %}
{% block content %}
<div class="login-container">
  <div class="login-card">
    <h1>FC CI</h1>
    <p class="login-subtitle">Sign in with your account or API key</p>
    {% match error %}
      {% when Some with (msg) %}
      <div class="flash-message flash-error">{{ msg }}</div>
      {% when None %}
    {% endmatch %}
    
    <!-- User Login -->
    <div class="form-card login-form">
      <h3>Sign in with username</h3>
      <form method="POST" action="/login">
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" id="username" name="username" placeholder="username" autocomplete="username">
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" placeholder="password" autocomplete="current-password">
        </div>
        <button type="submit" class="btn btn-full">Sign in</button>
      </form>
    </div>
    
    <div class="login-divider">
      <span>or</span>
    </div>
    
    <!-- API Key Login -->
    <div class="form-card login-form">
      <h3>Sign in with API key</h3>
      <form method="POST" action="/login">
        <div class="form-group">
          <label for="api_key">API Key</label>
          <input type="password" id="api_key" name="api_key" placeholder="fc_..." autocomplete="current-password">
        </div>
        <button type="submit" class="btn btn-full btn-secondary">Sign in with API key</button>
      </form>
    </div>
  </div>
</div>
{% endblock %}