{% extends "base.html" %}
{% block title %}Create Account — LockBox{% endblock %}
{% block auth_content %}
<div class="container min-vh-100 d-flex align-items-center justify-content-center py-5">
  <div class="card shadow-lg border-0 rounded-4" style="max-width: 460px; width: 100%;">
    <div class="card-body p-4 p-md-5">
      <div class="text-center mb-4">
        <i class="bi bi-shield-lock-fill text-primary" style="font-size: 3rem;"></i>
        <h1 class="h3 mt-2 fw-bold">Create your vault</h1>
        <p class="text-muted small">Zero-knowledge encryption. Only you can read your files.</p>
      </div>
      <form method="post" novalidate>
        {{ form.hidden_tag() }}
        <div class="mb-3">
          {{ form.username.label(class="form-label") }}
          {{ form.username(class="form-control form-control-lg rounded-3", autocomplete="username") }}
          {% for e in form.username.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
        </div>
        <div class="mb-3">
          {{ form.email.label(class="form-label") }}
          {{ form.email(class="form-control form-control-lg rounded-3", autocomplete="email") }}
          {% for e in form.email.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
        </div>
        <div class="mb-3">
          {{ form.password.label(class="form-label") }}
          {{ form.password(class="form-control form-control-lg rounded-3", autocomplete="new-password") }}
          <div class="form-text">Min 12 chars, upper, lower, digit, special.</div>
          {% for e in form.password.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
        </div>
        <div class="mb-4">
          {{ form.confirm.label(class="form-label") }}
          {{ form.confirm(class="form-control form-control-lg rounded-3", autocomplete="new-password") }}
          {% for e in form.confirm.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
        </div>
        {{ form.submit(class="btn btn-primary btn-lg w-100 rounded-3 fw-semibold") }}
      </form>
      <p class="text-center text-muted small mt-4 mb-0">
        Already have an account? <a href="{{ url_for('login') }}" class="text-decoration-none">Sign in</a>
      </p>
    </div>
  </div>
</div>
{% endblock %}