{% extends "base.html" %}

{% block content %}

<div class="container-fluid">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h2>
                <i class="bi bi-person-circle text-primary"></i>
                {{ user.full_name }}
            </h2>

            <p class="text-muted">@{{ user.username }}</p>

        </div>

        <div>

            <a href="/users/{{ user.id }}/edit" class="btn btn-warning">

                <i class="bi bi-pencil"></i> Edit

            </a>

            <a href="/users" class="btn btn-secondary">

                <i class="bi bi-arrow-left"></i> Back

            </a>

        </div>

    </div>

    <div class="row">

        <div class="col-md-4">

            <div class="card shadow-sm">

                <div class="card-header bg-primary text-white">

                    <i class="bi bi-person"></i> User Info

                </div>

                <div class="card-body text-center">

                    <div class="display-1 text-primary">

                        <i class="bi bi-person-circle"></i>

                    </div>

                    <h4>{{ user.full_name }}</h4>

                    <p><code>@{{ user.username }}</code></p>

                    <div class="d-grid gap-2">

                        <span class="badge bg-{% if user.role == 'Admin' %}danger{% elif user.role == 'Director' %}warning{% elif user.role == 'Engineer' %}info{% else %}secondary{% endif %} fs-6">

                            {{ user.role }}

                        </span>

                        <span class="badge bg-{% if user.is_active %}success{% else %}danger{% endif %} fs-6">

                            {% if user.is_active %}Active{% else %}Inactive{% endif %}

                        </span>

                    </div>

                </div>

            </div>

        </div>

        <div class="col-md-8">

            <div class="card shadow-sm">

                <div class="card-header bg-primary text-white">

                    <i class="bi bi-info-circle"></i> Details

                </div>

                <div class="card-body">

                    <table class="table">

                        <tr>

                            <th width="200">User ID</th>

                            <td>{{ user.id }}</td>

                        </tr>

                        <tr>

                            <th>Username</th>

                            <td><code>{{ user.username }}</code></td>

                        </tr>

                        <tr>

                            <th>Full Name</th>

                            <td>{{ user.full_name }}</td>

                        </tr>

                        <tr>

                            <th>Email</th>

                            <td>{{ user.email }}</td>

                        </tr>

                        <tr>

                            <th>Role</th>

                            <td>{{ user.role }}</td>

                        </tr>

                        <tr>

                            <th>Department</th>

                            <td>{{ user.department or '-' }}</td>

                        </tr>

                        <tr>

                            <th>Status</th>

                            <td>{% if user.is_active %}Active{% else %}Inactive{% endif %}</td>

                        </tr>

                    </table>

                </div>

            </div>

        </div>

    </div>

</div>

{% endblock %}