{% extends "base.html" %}
{% block title %}Login — IrisAI{% endblock %}

{% block head %}
<style>
  .auth-wrap {
    min-height: calc(100vh - 60px);
    height: calc(100vh - 60px);
    overflow: hidden;
    padding: 1rem 1.5rem;
  }
  .auth-logo {
    font-size: 1.8rem !important;
    margin-bottom: .75rem !important;
  }
  .auth-logo span { font-size: 1rem !important; }
  .auth-wrap .card { padding: 1.25rem 1.5rem; }
  .auth-wrap .form-group { margin-bottom: .75rem; }
  .auth-wrap label { margin-bottom: .2rem; font-size: .78rem; }
  .auth-wrap input { padding: .55rem .85rem; font-size: .88rem; }
  .auth-wrap .btn { padding: .6rem 1.2rem; font-size: .85rem; }
  .auth-wrap h2 { font-size: 1.2rem !important; margin-bottom: .1rem !important; }
  .auth-wrap .small { font-size: .8rem !important; margin-bottom: 1rem !important; }
  .auth-wrap .divider { margin: .75rem 0; }
  .auth-wrap .flashes { margin-bottom: .75rem; }
  .auth-wrap .flash { padding: .5rem .75rem; font-size: .8rem; }
</style>
{% endblock %}

{% block body %}
<div class="auth-wrap">
  <div class="auth-logo">
    🌸 IrisAI
    <span>Iris Flower Classifier · ML Demo</span>
  </div>

  <div class="container-sm" style="width:100%">
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        <div class="flashes">
          {% for cat, msg in messages %}
            <div class="flash {{ cat }}">{{ msg }}</div>
          {% endfor %}
        </div>
      {% endif %}
    {% endwith %}

    <div class="card">
      <h2 class="serif" style="font-size:1.5rem;margin-bottom:.25rem">Welcome back</h2>
      <p class="muted small" style="margin-bottom:1.5rem">Sign in to run predictions</p>

      <form method="POST" action="{{ url_for('login') }}">
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" id="username" name="username" placeholder="e.g. admin" required autocomplete="username" />
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" placeholder="••••••••" required autocomplete="current-password" />
        </div>
        <button type="submit" class="btn btn-primary btn-full" style="margin-top:.5rem">
          Sign In →
        </button>
      </form>

      <hr class="divider" />
      <p class="small muted" style="text-align:center">
        No account? <a href="{{ url_for('register') }}" style="color:var(--accent);text-decoration:none">Create one</a>
      </p>
    
    </div>
  </div>
</div>
{% endblock %}