{% extends 'base.html' %}
{% load static %}

    {% block styles %}
        <link rel="stylesheet" type="text/css" href="{% static 'homepage/style.css' %}">   
    {% endblock %}

{% block title %}{{object.last_name}}, {{object.first_name}} {{object.middle_name}}{% endblock %}
{% block content %}

    <div class="flex-container">
        <div class="user-card">
            <h1>{{object.last_name}}, {{object.first_name}} {{object.middle_name}}</h1>
            <div>
                {% if object.image %}
                    <img class="user-image flex-item" src = "{{ object.image.url }}">
                {% endif %}
                <ul class="flex-item">
                    <li>ID Number: {{object.id_num}}</li>
                    <li>Email Address: {{object.email}}</li>
                    <li>Department: {{object.department.dept_name}}</li>
                    <li>Home Unit: {{object.department.home_unit}}</li>
                </ul>
            </div>
        </div>
    </div>
{% endblock %}