{% extends "page.html" %}

{% block content %}
<h2>Register</h2>

<form method="POST" enctype="multipart/form-data">

    <h3>Identity (required)</h3>
    <input type="text" name="username" placeholder="Username" required><br>
    <textarea name="pgp" placeholder="PGP Public Key" required></textarea><br>

    <h3>Personal Info (required)</h3>
    <input type="text" name="firstname" placeholder="First Name" required><br>
    <input type="text" name="lastname" placeholder="Last Name" required><br>

    <select name="sex" required>
        <option value="">Select Sex</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select><br>

    <input type="date" name="date_of_birth" required><br>

    <h3>Profile Picture (required)</h3>
    <input type="file" name="profile_picture" accept="image/*" required><br>

    <h3>Other Pictures (optional, multiple)</h3>
    <input type="file" name="pictures" accept="image/*" multiple><br>

    <h3>Location (required)</h3>
    <select name="country" required>
        <option value="">Select Country</option>
        {% for c in countries %}
            <option value="{{ c }}">{{ c }}</option>
        {% endfor %}
    </select><br>
    <input type="text" name="city" placeholder="City"><br>

    <h3>Physical Attributes (optional)</h3>
    <input type="number" step="0.01" name="height" placeholder="Height (m)"><br>
    <input type="number" name="weight" placeholder="Weight (kg)"><br>
    <input type="text" name="race" placeholder="Race"><br>

    <h3>Preferences (optional)</h3>
    <input type="text" name="prefered_age_range" placeholder="Preferred Age Range (e.g. 20-30)"><br>

    <h3>Contacts (required)</h3>
    <input type="text" name="xmpp" placeholder="XMPP" required><br>
    <input type="email" name="email" placeholder="Email"><br>
    <input type="text" name="phone" placeholder="Phone"><br><br>

    <button type="submit">Register</button>

</form>

{% with messages = get_flashed_messages() %}
  {% if messages %}
    <ul>
      {% for message in messages %}
        <li style="color:red;">{{ message }}</li>
      {% endfor %}
    </ul>
  {% endif %}
{% endwith %}

{% endblock %}
