{% extends "layouts/full_base.html" %}

{% load static %}

{% block title %} Register - Adtlas {% endblock title %}

{% block extra_css %}
<style type="text/css">
    .alert {
        color: #721c24;
        text-align: center;
        margin: 10px 0;
        padding: 10px;
        border-radius: 5px;
    }
    .alert-danger {
        background-color: #f8d7da;
        border: 1px solid #f5c6cb;
    }
    .alert-success {
        background-color: #d4edda;
        border: 1px solid #c3e6cb;
        color: #155724;
    }
    
    .form-field-wrapper {
        margin-bottom: 15px;
    }
    
    .field-errors {
        color: #dc3545;
        font-size: 12px;
        margin-top: 5px;
    }
    
    .terms-wrapper {
        display: flex;
        align-items: center;
        margin: 15px 0;
    }
    
    .terms-wrapper input[type="checkbox"] {
        margin-right: 8px;
        width: 16px;
        height: 16px;
    }
    
    .terms-wrapper label {
        color: #666;
        font-size: 14px;
        cursor: pointer;
        margin: 0;
    }
    
    .login-link {
        text-align: center;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
    
    .login-link a {
        color: #007bff;
        text-decoration: none;
    }
    
    .login-link a:hover {
        text-decoration: underline;
    }
</style>
{% endblock extra_css %}

{% block content %}
<div class="login-img">
    <div class="page">
        <div class="">
            <div class="col col-login mx-auto">
            </div>
            <div class="container-login100">
                <div class="wrap-login100 p-0">
                    <div class="card-body">
                        <!-- Display Messages -->
                        <div class="messages">
                            {% if form.non_field_errors %}
                                <div class="alert alert-danger">
                                    {% for error in form.non_field_errors %}
                                        <div>{{ error }}</div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                            
                            {% if messages %}
                                {% for message in messages %}
                                
                <div data-type="{{ message.tags }}" 
                     data-title="" 
                     data-message="{{ message|escapejs }}"></div>
                                {% endfor %}
                            {% endif %}
                        </div>

                        <form class="login100-form validate-form" method="post">
                            {% csrf_token %}
                            
                            <span class="login100-form-title">
                                <a href="{% url 'core:landing' %}" class="logo-default">
                                    <img alt="Adtlas Project Logo" class="logo-default" src="{% static 'images/brands/logo_black.png' %}" width="171">
                                </a>
                                <h4 style="margin-top: 15px;">Create Account</h4>
                            </span> 
                            <!-- Email Field -->
                            <div class="form-field-wrapper">
                                <div class="wrap-input100 validate-input">
                                    {{ form.email }}
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="zmdi zmdi-email" aria-hidden="true"></i>
                                    </span>
                                </div>
                                {% if form.email.errors %}
                                    <div class="field-errors">
                                        {% for error in form.email.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div> 
                            <!-- First Name Field -->
                            <div class="form-field-wrapper">
                                <div class="wrap-input100 validate-input">
                                    {{ form.first_name }}
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="zmdi zmdi-account" aria-hidden="true"></i>
                                    </span>
                                </div>
                                {% if form.first_name.errors %}
                                    <div class="field-errors">
                                        {% for error in form.first_name.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div> 
                            <!-- Last Name Field -->
                            <div class="form-field-wrapper">
                                <div class="wrap-input100 validate-input">
                                    {{ form.last_name }}
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="zmdi zmdi-account" aria-hidden="true"></i>
                                    </span>
                                </div>
                                {% if form.last_name.errors %}
                                    <div class="field-errors">
                                        {% for error in form.last_name.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div> 
                            <!-- Password Field -->
                            <div class="form-field-wrapper">
                                <div class="wrap-input100 validate-input">
                                    {{ form.password1 }}
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="zmdi zmdi-lock" aria-hidden="true"></i>
                                    </span>
                                </div>
                                {% if form.password1.errors %}
                                    <div class="field-errors">
                                        {% for error in form.password1.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div> 
                            <!-- Confirm Password Field -->
                            <div class="form-field-wrapper">
                                <div class="wrap-input100 validate-input">
                                    {{ form.password2 }}
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="zmdi zmdi-lock" aria-hidden="true"></i>
                                    </span>
                                </div>
                                {% if form.password2.errors %}
                                    <div class="field-errors">
                                        {% for error in form.password2.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div> 
                            <!-- Terms and Conditions -->
                            <div class="terms-wrapper">
                                {{ form.terms_accepted }}
                                <label for="{{ form.terms_accepted.id_for_label }}">
                                    {{ form.terms_accepted.label }}
                                </label>
                            </div>
                            {% if form.terms_accepted.errors %}
                                <div class="field-errors">
                                    {% for error in form.terms_accepted.errors %}
                                        <div>{{ error }}</div>
                                    {% endfor %}
                                </div>
                            {% endif %} 
                            <!-- Register Button -->
                            <div class="container-login100-form-btn">
                                <button type="submit" class="login100-form-btn btn-primary">
                                    Create Account
                                </button>
                            </div> 
                            <!-- Login Link -->
                            <div class="login-link">
                                <p class="text-dark mb-0">Already have an account? <a href="{% url 'authentication:login' %}">Login here</a></p>
                            </div> 
                            <!-- Footer -->
                            <div class="text-center pt-3">
                                <p class="text-dark mb-0">Powered by <a href="#" class="text-primary ms-1">SanoaMedia</a></p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}