{% extends 'base.html' %}
{% load static %}
{% block contents %}

<div class="auth-container">
    <div class="glass-panel p-5" style="max-width: 800px; width: 100%;">

        <div class="text-center mb-5">
            <h2 class="fw-bold text-white">Create Account</h2>
            <p class="text-muted">Join the network to start analyzing patterns.</p>
        </div>

        {% if messages %}
        <div class="mb-4">
            {% for message in messages %}
            <div class="alert alert-success bg-transparent border-success text-success text-center p-2" role="alert">
                {{ message }}
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <form action="{% url 'UserRegisterForm' %}" method="post">
            {% csrf_token %}

            <div class="row g-4">
                <div class="col-md-6">
                    <label class="input-label">Full Name</label>
                    <input type="text" class="input-modern" id="name" name="name" maxlength="100" required>
                </div>

                <div class="col-md-6">
                    <label class="input-label">Username / ID</label>
                    <input type="text" class="input-modern" id="loginid" name="loginid" maxlength="100" required>
                </div>

                <div class="col-md-6">
                    <label class="input-label">Password</label>
                    <input type="password" class="input-modern" id="password" name="password" maxlength="100" required>
                </div>

                <div class="col-md-6">
                    <label class="input-label">Mobile Number</label>
                    <input type="text" class="input-modern" id="mobile" name="mobile" maxlength="10" required
                        pattern="\d{10}">
                </div>

                <div class="col-12">
                    <label class="input-label">Email Address</label>
                    <input type="email" class="input-modern" id="email" name="email" maxlength="100" required>
                </div>

                <div class="col-12">
                    <label class="input-label">Locality</label>
                    <input type="text" class="input-modern" id="locality" name="locality" maxlength="100">
                </div>
            </div>

            <div class="d-grid mt-5">
                <button type="submit" class="btn-modern">
                    Register
                </button>
            </div>

            <div class="text-center mt-4">
                <small class="text-muted">
                    Already registered?
                    <a href="{% url 'UserLogin' %}" class="text-primary text-decoration-none fw-bold">Login</a>
                </small>
            </div>
        </form>
    </div>
</div>

{% endblock %}