content_quality_tool/content_quality_tool_public/templates/header.html

{% load static %}
<style>
    .circle-user-big{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background-color: #007bff;
        color: white;
        font-size: 66px;
        width: 100px;  /* You can adjust this as needed */
        height: 100px; /* You should set width and height to the same value */
        border-radius: 50%;  /* Makes it a circle */
        text-align: center;  /* Centers the text if it's multi-line */
    }
</style>

<nav class="app-header navbar navbar-expand bg-body"> <!--begin::Container-->
    <div class="container-fluid"> <!--begin::Start Navbar Links-->
        <ul class="navbar-nav">
            <li class="nav-item"> <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"> <i
                        class="bi bi-list"></i> </a> </li>
            <!-- <li class="nav-item d-none d-md-block"> <a  href="{% url 'file-upload' %}" class="nav-link">File Upload</a> 
            </li>
            <li class="nav-item d-none d-md-block"> <a  href="{% url 'tool-check' %}" class="nav-link">Home</a> 
            </li> -->
        </ul> <!--end::Start Navbar Links--> <!--begin::End Navbar Links-->
        <ul class="navbar-nav ms-auto"> <!--begin::Navbar Search-->
            <li class="nav-item"> <a class="nav-link" href="#" data-lte-toggle="fullscreen"> <i
                        data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i> <i
                        data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none;"></i> </a>
            </li> <!--end::Fullscreen Toggle--> <!--begin::User Menu Dropdown-->
            <li class="nav-item dropdown user-menu"> <a href="#" class="nav-link dropdown-toggle"
                    data-bs-toggle="dropdown"> 
                            {% if request.session.user_email %}
                                <span class="user-image rounded-circle shadow" class="user-image rounded-circle shadow" style="display: inline-flex; justify-content: center; align-items: center; background-color: #007bff; color: white; font-size: 20px;">
                                    {{ request.session.user_email|slice:":1"|upper }}
                                </span>
                            {% else %}
                                <img src="{% static 'dist/img/user2-160x160.jpg' %}" class="user-image rounded-circle shadow" alt="User Image">
                            {% endif %}
                        <span
                        class="d-none d-md-inline">{{ request.session.user_email }}</span> </a>
                <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end"> <!--begin::User Image-->
                    <li class="user-header text-bg-secondary">
                            {% if request.session.user_email %}
                                <span class="rounded-circle shadow circle-user-big" >
                                    {{ request.session.user_email|slice:":1"|upper }}
                                </span>
                            {% else %}
                                <img src="{% static 'dist/img/user2-160x160.jpg' %}" class="rounded-circle shadow" alt="User Image">
                            {% endif %} 
                        <p>
                            {{ request.session.user_email }} - Admin
                            <!-- <small>Since Nov. 2023</small> -->
                        </p>
                    </li> <!--end::User Image--> <!--begin::Menu Body-->

                    <li class="user-footer"> <a href="#" class="btn btn-default btn-flat">Profile</a> <a
                            href="{% url 'logout' %}" class="btn btn-default btn-flat float-end">Sign out</a> </li>
                    <!--end::Menu Footer-->
                </ul>
            </li> <!--end::User Menu Dropdown-->
        </ul> <!--end::End Navbar Links-->
    </div> <!--end::Container-->
</nav> <!--end::Header--> <!--begin::Sidebar-->