{% extends 'core/auth/auth.html' %}
{% load static %}
{% block image %}
    {% static 'img/signup.svg' %}
{% endblock image %}
{% block title %}
    Create an account
{% endblock title %}
{% block content %}
    <form method="post">
        {% csrf_token %}
        <div class="mb-4">
            <div class="form-control w-full mt-4">
                <label class="label">
                    <span class="label-text text-base-content undefined">Email Address</span>
                </label>
                <input required
                       type="email"
                       name="email"
                       pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
                       placeholder="jsmith@example.com"
                       class="peer input input-bordered w-full"
                       value="{{ attempted_email|default_if_none:'' }}">
                <label class="label peer-[&amp;:not(:placeholder-shown):not(:focus):invalid]:block hidden">
                    <span class="label-text-alt text-error">Please enter a valid email.</span>
                </label>
            </div>
            <div class="form-control w-full mt-4">
                <label class="label">
                    <span class="label-text text-base-content undefined">Password</span>
                </label>
                <input required
                       type="password"
                       minlength="6"
                       name="password"
                       placeholder="********"
                       class="peer input input-bordered w-full">
                <label class="label peer-[&amp;:not(:placeholder-shown):not(:focus):invalid]:block hidden">
                    <span class="label-text-alt text-error">Please enter a strong password.</span>
                </label>
            </div>
            <div class="form-control w-full mt-4">
                <label class="label">
                    <span class="label-text text-base-content undefined">Confirm Password</span>
                </label>
                <input required
                       type="password"
                       minlength="6"
                       name="confirm_password"
                       placeholder="********"
                       class="peer input input-bordered w-full">
                <label class="label peer-[&amp;:not(:placeholder-shown):not(:focus):invalid]:block hidden">
                    <span class="label-text-alt text-error">Please enter a strong password & make sure it matches with the password above.</span>
                </label>
            </div>
        </div>
        <p class="text-center  text-error mt-8"></p>
        <button type="submit" class="btn mt-2 w-full btn-primary">Create</button>
        <div class="text-center mt-4">
            Already have an account?
            <a href="{% url 'core:auth:login' %}"
               class="my-4 group text-secondary transition duration-300">
                Login!
                <span class="my-2 block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-secondary"></span>
            </a>
            <a href="{% url 'core:auth:login create_account' %}"
               class="my-4 text-primary inline-block">Back to provider choice</a>
            <br>
            <a href="{% url 'index' %}" class="text-primary inline-block">Back to homepage</a>
        </div>
    </form>
{% endblock %}
