{% extends "layouts/base-electric.html" %}

{% load static %}

{% block title %} Sites {% endblock title %}

{% block stylesheets %}
<style>
    {% comment %}
    .e-container-border{
        // width: 90%;
        padding: 4px;
        margin: auto;
        background-color:#222222;
        border-radius: 25px;
        background: linear-gradient(180deg, #4b8fca, #e73c7e, #23a6d5, #23d5ab);
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
        box-shadow: 0px 2px 10px 0px #221133;
        transition-timing-function: ease-out;
        transition-duration: 0.3s;
        display: flex;
    }
    .e-container{
        overflow:hidden;
        background-color:#222222;
        padding:24px;
        text-align:justify;
        border-radius: 25px;
    }
    
    
    .containcenter{
        margin:auto;
    }
    .index{
        transform: scale(0.95);
        transition-timing-function: ease-out;
        transition-duration: 0.3s;
        filter: saturate(0) contrast(75%) brightness(0.8);
    }
    .index:hover{
        transform: scale(1);
        transition-timing-function: ease-out;
        transition-duration: 0.1s;
        filter: saturate(1) contrast(100%) brightness(1);
    } 
    
    {% endcomment %}
</style>
{% endblock stylesheets %}
    
{% block content %}
    
    {% include "includes/navigation-transparent.html" %}
    
    <div class="container-fluid"> 
        <div class="e-container-border e-container-radius row mb-3" tabindex="1">
            <div class="e-container e-container-radius p-3">
                
                <h1 class="text-center pb-3">Profile Info</h1>

                <div class="table-responsive rounded-2">
                    <table class="table table-sm table-bordered border-primary-subtle table-striped table-hover">
                        <tbody>
                            <tr>
                                <th scope="row" class="text-center">Last Login</th>
                                <td class="text-center">{{ user.last_login }}</td>
                            </tr>
                            <tr>
                                <th scope="row" class="text-center">Registration Date</th>
                                <td class="text-center">{{ user.date_joined }}</td>
                            </tr>
                            <tr>
                                <th scope="row" class="text-center">Admin Status</th>
                                <td class="text-center">
                                    {% if user.is_staff %}
                                        <span class="badge bg-success">Yes</span>
                                    {% else %}
                                        <span class="badge bg-danger">No</span>
                                    {% endif %}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
            </div>
        </div>

        <div class="e-container-border e-container-radius row my-3" tabindex="1">
            <div class="e-container e-container-radius">
                
                <h1 class="text-center">Profile Settings</h1>

                <h3>Edit your profile</h3>

                <form method="post">
                    {% csrf_token %}
                    {{ user_form.as_p }}
                    {{ profile_form.as_p }}
                    <button type="submit">Save</button>
                </form>
                
            </div>
        </div>

    </div>
        
    
{% endblock content %}