{% extends "base.html" %}
{% block title %}Register — Ain El Aql{% endblock %}
{% block body %}
<div class="auth-wrapper">
  <div class="auth-card fade-in">
    <div class="auth-logo">
      <div class="auth-logo-icon">
        <img src="{{ url_for('static', filename='assets/cctv_logo.png') }}" alt="Logo" style="width:100%; height:100%; object-fit:contain;">
      </div>
      <h1>Create Account</h1>
      <p>Join the Ain El Aql platform</p>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    {% for cat, msg in messages %}
    <div class="alert alert-{{ cat }}">{{ msg }}</div>
    {% endfor %}
    {% endif %}
    {% endwith %}

    <form method="POST" action="{{ url_for('auth.register_page') }}">
      <div class="grid-2">
        <div class="form-group">
          <label class="form-label" for="first_name">First Name</label>
          <input type="text" class="form-input" id="first_name" name="first_name" placeholder="First name">
        </div>
        <div class="form-group">
          <label class="form-label" for="last_name">Last Name</label>
          <input type="text" class="form-input" id="last_name" name="last_name" placeholder="Last name">
        </div>
      </div>
      <div class="form-group">
        <label class="form-label" for="username">Username *</label>
        <input type="text" class="form-input" id="username" name="username" placeholder="Choose a username" required>
      </div>
      <div class="form-group">
        <label class="form-label" for="phone">Phone *</label>
        <input type="tel" class="form-input" id="phone" name="phone" placeholder="+20 xxx xxx xxxx" required>
      </div>
      <div class="form-group">
        <label class="form-label" for="reg_email">Email *</label>
        <input type="email" class="form-input" id="reg_email" name="email" placeholder="email@example.com" required>
      </div>
      <div class="form-group">
        <label class="form-label" for="reg_password">Password *</label>
        <input type="password" class="form-input" id="reg_password" name="password" placeholder="Min 6 characters" required>
      </div>
      <div class="form-group">
        <label class="form-label" for="nid">National ID (NID) *</label>
        <input type="text" class="form-input" id="nid" name="nid" placeholder="14-digit National ID" required>
      </div>
      <div class="form-group">
        <label class="form-label" for="role">Select Role *</label>
        <select class="form-select" id="role" name="role" required>
          <option value="security">Security Guard</option>
          <option value="admin">Administrator</option>
        </select>
      </div>
      <button type="submit" class="btn btn-primary w-full">
        <span>✨</span> Create Account
      </button>
    </form>

    <div class="auth-footer">
      Already have an account? <a href="{{ url_for('auth.login_page') }}">Sign In</a>
    </div>
  </div>
</div>
{% endblock %}