{% extends "base.html" %}
{% block title %}Sign in — calrs{% endblock %}
{% block content %}
<style>
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--surface-hover); }
</style>
<div class="card" style="margin-top: 3rem;">
  <h1>Sign in</h1>
  <p class="subtitle">Sign in to your calrs account</p>

  {% if error %}
  <div class="error">{{ error }}</div>
  {% endif %}

  {% if oidc_enabled %}
  <a href="/auth/oidc/login" class="btn" style="display: block; text-align: center; text-decoration: none; margin-bottom: 1.5rem;">Sign in with SSO</a>
  <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
    <hr style="flex: 1; border: none; border-top: 1px solid var(--border);">
    <span style="color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em;">or</span>
    <hr style="flex: 1; border: none; border-top: 1px solid var(--border);">
  </div>
  {% endif %}

  <form method="post" action="/auth/login">
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required placeholder="you@example.com" autocomplete="email">
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" id="password" name="password" required autocomplete="current-password">
    </div>
    <button type="submit" class="btn{% if oidc_enabled %} btn-secondary{% endif %}">Sign in with email</button>
  </form>

  {% if registration_enabled %}
  <p style="text-align: center; margin-top: 1.25rem; font-size: 0.875rem; color: var(--text-muted);">
    Don't have an account? <a href="/auth/register" style="color: var(--accent); text-decoration: none;">Register</a>
  </p>
  {% endif %}
</div>
{% endblock %}