{% extends "base.html" %}

{% block title %} Register {% endblock %}

{% block content %}

<section>

    <div class="header">
        <img src="/static/images/favicon-32x32.png" alt="Weatherify logo">
        <h1>Weatherify</h1>
    </div>

    <hr>

    <div  class="box">
        <h2>Register</h2>
        
        <form method="POST" action="{{ url_for('auth.register')}}">

            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

            <label for="username">username</label>
            <input type="text" name="username" id="username" placeholder="e.g. Tom124" required>

            <label for="email">email</label>
            <input type="text" name="email" id="email" placeholder="e.g. tom@example.com" required>
            <div class="password-rules">
                <span id="email-error"></span>
            </div>

            <label for="password">password</label>
            <input type="password" name="password" id="password" placeholder="e.g. dty123!" required>
            <div class="password-rules">
                <span id="len">8+ characters</span>
                <span id="num">number</span>
                <span id="upper">uppercase letter</span>
                <span id="lower">lowercase letter</span>
            </div>

            <label for="confirm">confirm</label>
            <input type="password" name="confirm"  id="confirm" placeholder="e.g. dty123!" required>
            <div class="password-rules">
                <span id="confirm-error"></span>
            </div>

            <button type="submit" aria-label="register">Register</button>
        </form>

        <p>
            Already have an account?
            <a href="{{ url_for('auth.login_form')}}">Login</a>
        </p>
        

    </div>
    
</section>


{% endblock %}