{% extends "auth.html" %}

{% block title %}Register | Traffic Sign Classifier{% endblock %}
{% block terminal_title %}traffic_registration.exe{% endblock %}
{% block auth_heading %}Create Profile{% endblock %}
{% block auth_subtitle %}[ NEW_OPERATOR_REGISTRATION ]{% endblock %}

{% block auth_form %}
<form class="neon-form" method="post" action="{{ url_for('register') }}">
  <label class="cyber-field">
    <span>Full name</span>
    <input type="text" name="name" required autocomplete="name" placeholder="Your name">
  </label>

  <label class="cyber-field">
    <span>Email address</span>
    <input type="email" name="email" required autocomplete="email" placeholder="you@example.com">
  </label>

  <label class="cyber-field">
    <span>Password</span>
    <input
      type="password"
      name="password"
      required
      minlength="10"
      pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{10,}"
      autocomplete="new-password"
      placeholder="10+ chars, Aa, 1, symbol"
      title="Use at least 10 characters with uppercase, lowercase, number, and special character">
    <small class="password-rules">Use 10+ characters with uppercase, lowercase, number, and special character.</small>
  </label>

  <label class="cyber-field">
    <span>Confirm password</span>
    <input type="password" name="confirm_password" required autocomplete="new-password" placeholder="Repeat password">
  </label>

  <button type="submit" class="neon-button">
    <span>[ CREATE_PROFILE ]</span>
  </button>
</form>

<div class="matrix-signup">
  <span>[ PROFILE_EXISTS ]</span>
  <a href="{{ url_for('login') }}">LOGIN_NOW</a>
</div>
{% endblock %}