{% extends "base.html" %}
{% block title %}Inscription — 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: .6rem; }
  .auth-wrap label { margin-bottom: .15rem; font-size: .78rem; }
  .auth-wrap input { padding: .5rem .85rem; font-size: .88rem; }
  .auth-wrap .btn { padding: .6rem 1.2rem; font-size: .85rem; margin-top: .25rem !important; }
  .auth-wrap h2 { font-size: 1.2rem !important; margin-bottom: .1rem !important; }
  .auth-wrap .small { font-size: .8rem !important; margin-bottom: .85rem !important; }
  .auth-wrap .divider { margin: .65rem 0; }
  .auth-wrap .flashes { margin-bottom: .65rem; }
  .auth-wrap .flash { padding: .5rem .75rem; font-size: .8rem; }
</style>
{% endblock %}

{% block body %}
<div class="auth-wrap">
  <div class="auth-logo">
    🌸 IrisAI
    <span>Create an account </span>
  </div>

  <div class="container-sm" style="width:80%">
    {% 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">Create an account </h2>
      <p class="muted small" style="margin-bottom:1.5rem">Please fill in all the fields below</p>

      <form method="POST" action="{{ url_for('register') }}">
        <div class="form-group">
          <label for="username">User Name</label>
          <input type="text" id="username" name="username" placeholder="ex: jean_dupont" required />
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" id="email" name="email" placeholder="ex: jean@example.com" required />
        </div>
        <div class="form-group">
          <label for="password">password</label>
          <input type="password" id="password" name="password" placeholder="min. 6 caractères" required />
        </div>
        <div class="form-group">
          <label for="confirm">Confirm password</label>
          <input type="password" id="confirm" name="confirm" placeholder="répétez le mot de passe" required />
        </div>
        <button type="submit" class="btn btn-primary btn-full" style="margin-top:.5rem">
          Create an account  →
        </button>
      </form>

      <hr class="divider" />
      <p class="small muted" style="text-align:center">
        Already have an account? <a href="{{ url_for('login') }}" style="color:var(--accent);text-decoration:none">Se connecter</a>
      </p>
    </div>
  </div>
</div>
{% endblock %}