{% extends 'users/user_base.html' %}
{% load static %}

{% block user_content %}
<style>
    /* Enhanced styles */
    body {
        font-family: 'Arial', sans-serif;
    }
    .message-box {
        border: 2px solid;
        padding: 15px 20px;
        border-radius: 15px;
        margin-bottom: 20px;
        transition: all 0.3s ease-in-out;
    }
    .message-box.error {
        border-color: red;
        background-color: #ffe5e5;
    }
    .message-box.success {
        border-color: green;
        background-color: #e5ffe5;
    }
    .message-title {
        font-weight: bold;
        margin-bottom: 10px;
    }
    .message-content {
        margin-bottom: 10px;
    }
    .logo-image {
        width: 250px;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
    a:hover {
        text-decoration: underline;
    }
</style>

<script type="text/javascript">
    history.pushState(null, null, location.href);
    window.onpopstate = function() {
        history.go(1);
    };
</script>

<div class="container mx-auto h-full flex justify-center items-center">
    <div class="w-1/3">
        <img src="{{ settings.HOSTNAME }}{% static 'images/Screenshot 2023-09-14 133842.9af3b5e17701.jpg' %}" alt="Data Studio Logo" class="logo-image">
        
        <!-- Dynamic Message Display -->
        {% if form.password.errors %}
        <div class="message-box error">
            <h2 class="message-title">Error!</h2>
            {% for error in form.password.errors %}
                <p class="message-content">{{ error }}</p>
            {% endfor %}
        </div>
        {% elif messages %}
        {% for message in messages %}
        <div class="message-box success">
            <h2 class="message-title">Success!</h2>
            <p class="message-content">{{ message }}</p>
        </div>
        {% endfor %}
        {% else %}
        <div class="message-box success">
            <h2 class="message-title">Success!</h2>
            <p class="message-content">Successfully changed the password.</p>
        </div>
        {% endif %}
        
        <!-- Back to login section -->
        <div class="text-center mt-4">
            <p class="text-grey-dark text-sm">
                <a href="{% url 'user-login' %}" class="no-underline text-blue font-bold">Login</a>
            </p>
        </div>
    </div>
</div>
{% endblock %}