{% extends 'base.html' %}
{% block title %}Register | Nura Store{% endblock %}

{% block content %}
<div class="row justify-content-center mt-5">
    <div class="col-md-6">
        <div class="card shadow-sm">
            <div class="card-body p-4">
                <h3 class="text-center mb-4">Create Account</h3>
                <form id="register-form">
                    <div class="mb-3">
                        <label class="form-label">Username</label>
                        <input type="text" id="reg-username" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email Address</label>
                        <input type="email" id="reg-email" class="form-control" required>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Password</label>
                            <input type="password" id="reg-pass" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Confirm Password</label>
                            <input type="password" id="reg-pass-confirm" class="form-control" required>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-success w-100">Register</button>
                </form>
            </div>
        </div>
    </div>
</div>

{% block scripts %}
<script>
    document.getElementById('register-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = {
            username: document.getElementById('reg-username').value,
            email: document.getElementById('reg-email').value,
            password: document.getElementById('reg-pass').value,
            confirm_password: document.getElementById('reg-pass-confirm').value
        };

        Auth.register(formData);
    });
</script>
{% endblock %}
{% endblock %}