{% extends 'shared/base.html' %}
{% load static %}


{% block title %} Account Activation {% endblock %}


{% block head %}
<link rel="stylesheet" href="{% static 'account/css/style.css' %}" />
{% endblock %}


{% block body %}
<main>
    <div class="bg-gradients">
        <div class="gradient-left"></div>
        <div class="gradient-right"></div>
    </div>

    <!-- Left Side -->
    <section class="login-left">
        <div class="login-logo">
            <div class="logo">
                <img src="{% static 'shared/img/logo.svg' %}" alt="sWarden's logo" width="80px" />
                <div class="logo-text">sWarden</div>
            </div>
        </div>

        <div class="login-slogan">
            <h1>No email, no SMS, no tracking on you.</h1>
            <p>
                No one can activate your account but you.
            </p>
        </div>
    </section>

    <!-- Right Side -->
    <section class="login-right">
        <div class="login-form-container">
            <h2>Account Activation</h2>

            <form method="post">
                {% csrf_token %}

                <!-- Messages -->
                {% if messages %}
                {% for message in messages %}
                <div class="{{ message.tags }}" role="alert">{{ message }}</div>
                {% endfor %}
                {% endif %}

                <p class="text-gradient-white">
                    Do not miss this, or else you may not be able to activate your account.
                </p>

                <!-- Form Groups -->
                {% for field in form %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>

                    <!-- Errors -->
                    {% if field.errors %}
                    <div class="error">
                        {% for error in field.errors %} {{ error }}<br />
                        {% endfor %}
                    </div>
                    {% endif %}

                    <!-- Fields -->
                    {{ field }}

                    <!-- Help Text -->
                    {% if field.help_text %}
                    <div class="help-text">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
                            aria-hidden="true">
                            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
                            <line x1="12" y1="10" x2="12" y2="16" stroke="currentColor" stroke-width="2" />
                            <circle cx="12" cy="7" r="1" fill="currentColor" />
                        </svg>

                        {{ field.help_text }}
                    </div>
                    {% endif %}
                </div>
                {% endfor %}

                <input type="submit" class="btn btn-primary login-btn" value="Activate Account" />
            </form>
        </div>
    </section>
</main>
{% endblock %}