{% extends 'base.html' %}
{% block title %} {{ title }} | Learning management system{% endblock title %}

{% load static %}
{% load i18n %}

{% block content %}

{% if user.is_authenticated %}

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/">Home</a></li>
      <li class="breadcrumb-item active" aria-current="page">{{ user.get_full_name }}</li>
    </ol>
</nav>

{% include 'snippets/messages.html' %}

<div class="row">

    <div class="col-md-3 mx-auto">
        <div class="card  p-2">
            <div class="text-center">
                <img src="{{ user.picture.url }}" class="w-100">
                <ul class="px-2 list-unstyled">
                    <li>{{ user.get_full_name|title }}</li>
                    <li><strong>Last login: </strong>{{ user.last_login|date }}</li>
                    <li><strong>Role: </strong>
                        {{ user.get_user_role }}
                    </li>
                </ul>
            </div>
            <hr>
            {% if request.user.is_superuser %}
            <div class="btn-flex">
                {% if user.is_student %}
                <a class="edit-btn" href="{% url 'student_edit' pk=user.id %}">
                    <i class="fas fa-user-edit"></i><span class="mobile-hide">Edit Profile</span>
                </a>
                {% endif %}
                {% if user.is_teacher %}
                <a class="edit-btn" href="{% url 'staff_edit' pk=user.id %}">
                    <i class="fas fa-user-edit"></i><span class="mobile-hide">Edit Profile</span>
                </a>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>

    <div class="col-md-9 mx-auto">
        <div class="card">
            <div class="card-body">
                <!-- {% if user.is_student %}
                <p class="form-title"><i class="fas fa-book-open"></i>Enrolled Subjects</p>
                <div class="dashboard-description">
                    {% if Subjects %}
                        <div class="flex">
                            {% for course in Subjects %}
                                <div class="flex"><a class="edit-btn" href="{{ course.get_absolute_url }}">{{ course }}</a></div>
                            {% endfor %}
                        </div>
                    {% else %}
                            <div class="text-danger"><i class="far fa-frown"></i>No Subjects!</div>
                    {% endif %}
                </div>
                {% endif %} -->
    
                {% if user.is_teacher %}
                <p class="fw-bold"><i class="fas fa-book-open"></i> My Subjects</p>
                {% if Subjects %}
                <ul>
                    {% for course in Subjects %}
                    <li><a href="{{ course.get_absolute_url }}">{{ course }}</a></li>
                    {% endfor %}
                </ul>
                {% else %}
                <div class="text-danger">No Subjects assigned!</div>
                {% endif %}
                <hr>
                {% endif %}
    
                <p class="fw-bold"><i class="fas fa-user"></i> Personal Info</p>
                <div class="dashboard-description">
                    <p><strong>First Name:</strong> {{ user.first_name|title }}</p>
                    <p><strong>Last Name:</strong> {{ user.last_name|title }}</p>
                    <p><strong>ID No.:</strong> {{ user.username }}</p>
                </div>
                {% if user.is_student %}
                <hr>
                <p class="fw-bold"><i class="fas fa-graduation-cap"></i> Applicant Info</p>
                <div class="dashboard-description">
                    <p><strong>School: </strong>Hawas Preparatory School</p>
                    <p><strong>Level: </strong>{{ level.level }}</p>
                </div>
                {% endif %}
    
                <hr>
                <p class="fw-bold"><i class="fas fa-phone-square-alt"></i> Contact Info</p>
                <div class="dashboard-description">
                    <p><strong>Email:</strong> {{ user.email }}</p>
                    <p><strong>Tel No.:</strong> {{ user.phone }}</p>
                    <p><strong>Address/city:</strong> {{ user.address }}</p>
                </div>
    
                <hr>
                <p class="fw-bold"><i class="fa fa-calendar-day"></i> Important Dates</p>
                <div class="dashboard-description">
                    <p><strong>Last login:</strong> {{ user.last_login }}</p>
                    {% if current_semester and current_session %}
                    <p><strong>Academic Year:</strong> {{ current_semester }} Semester {{ current_session }}</p>
                    {% endif %}
                    <p><strong>Registered Date:</strong> {{ user.date_joined|date }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3 mx-auto"></div>

</div>
{% endif %}

{% endblock content %}