{% extends 'base.html' %}

{% block title %}{{ department.name }} - Department Details{% endblock %}

{% block content %}
<div class="container mt-5 pt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'departments:department_list' %}">Departments</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ department.name }}</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0">{{ department.name }}</h1>
        </div>
        <div class="btn-group">
            {% if perms.users.change_department %}
            <a href="{% url 'departments:department_update' department.pk %}" class="btn btn-outline-primary">
                <i class="fas fa-edit me-1"></i> Edit
            </a>
            {% endif %}
            <a href="{% url 'departments:department_list' %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Back to List
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">Department Information</h5>
                </div>
                <div class="card-body">
                    <dl class="row">
                        <dt class="col-sm-3">Name</dt>
                        <dd class="col-sm-9">{{ department.name }}</dd>

                        <dt class="col-sm-3">Description</dt>
                        <dd class="col-sm-9">{{ department.description|default:"No description provided."|linebreaksbr }}</dd>

                        <dt class="col-sm-3">Parent Department</dt>
                        <dd class="col-sm-9">
                            {% if department.parent %}
                                <a href="{% url 'departments:department_detail' department.parent.pk %}">
                                    {{ department.parent.name }}
                                </a>
                            {% else %}
                                <span class="text-muted">None (Top-level department)</span>
                            {% endif %}
                        </dd>
                        
                        {% if department.manager %}
                        <dt class="col-sm-3">Manager</dt>
                        <dd class="col-sm-9">
                            <a href="{% url 'users:user_detail' department.manager.pk %}">
                                {{ department.manager.get_full_name }}
                            </a>
                        </dd>
                        {% endif %}

                        <dt class="col-sm-3">Created</dt>
                        <dd class="col-sm-9">{{ department.created_at|date:"F j, Y" }}</dd>
                        
                        <dt class="col-sm-3">Last Updated</dt>
                        <dd class="col-sm-9">{{ department.updated_at|date:"F j, Y \a\t P" }}</dd>
                    </dl>
                </div>
            </div>
            {% if department.children.exists %}
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">Sub-Departments</h5>
                </div>
                <div class="list-group list-group-flush">
                    {% for child in department.children.all %}
                    <a href="{% url 'departments:department_detail' child.pk %}" 
                       class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1">{{ child.name }}</h6>
                            {% if child.description %}
                            <small class="text-muted">{{ child.description|truncatechars:60 }}</small>
                            {% endif %}
                        </div>
                        <div class="d-flex align-items-center">
                            {% if child.manager %}
                            <span class="badge bg-primary me-2">
                                <i class="fas fa-user-tie me-1"></i>{{ child.manager.get_short_name }}
                            </span>
                            {% endif %}
                            <i class="fas fa-chevron-right text-muted"></i>
                        </div>
                    </a>
                    {% endfor %}
                </div>
                <div class="card-footer bg-transparent">
                    {% if perms.users.add_department %}
                    <a href="{% url 'departments:department_create' %}?parent={{ department.pk }}" 
                       class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-plus me-1"></i> Add Sub-Department
                    </a>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            {% if department.user_set.exists %}
            <div class="card shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="mb-0">Department Members</h5>
                </div>
                <div class="list-group list-group-flush">
                    {% for member in department.user_set.all %}
                    <a href="{% url 'users:user_detail' member.pk %}" 
                       class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm bg-light text-primary rounded-circle me-3 d-flex align-items-center justify-content-center" 
                                 style="width: 36px; height: 36px;">
                                <i class="fas fa-user"></i>
                            </div>
                            <div>
                                <h6 class="mb-0">{{ member.get_full_name }}</h6>
                                <small class="text-muted">{{ member.email }}</small>
                            </div>
                        </div>
                        {% if member.role %}
                        <span class="badge bg-primary">{{ member.role.name }}</span>
                        {% endif %}
                    </a>
                    {% endfor %}
                </div>
            </div>
            {% else %}
            <div class="card shadow-sm">
                <div class="card-body text-center py-4">
                    <i class="fas fa-users fa-3x text-muted mb-3"></i>
                    <h5>No Members</h5>
                    <p class="text-muted mb-0">There are no members assigned to this department yet.</p>
                    {% if perms.users.change_department %}
                    <a href="{% url 'departments:department_update' department.pk %}" class="btn btn-sm btn-outline-primary mt-3">
                        <i class="fas fa-user-plus me-1"></i> Add Members
                    </a>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>

        <div class="col-md-4">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">Quick Actions</h5>
                </div>
                <div class="list-group list-group-flush">
                    {% if perms.users.add_department %}
                    <a href="{% url 'departments:department_create' %}?parent={{ department.pk }}" 
                       class="list-group-item list-group-item-action">
                        <i class="fas fa-plus-circle text-success me-2"></i> Add Sub-Department
                    </a>
                    {% endif %}
                    
                    {% if perms.users.change_department %}
                    <a href="{% url 'departments:department_update' department.pk %}" 
                       class="list-group-item list-group-item-action">
                        <i class="fas fa-edit text-primary me-2"></i> Edit Department
                    </a>
                    {% endif %}
                    
                    {% if perms.users.delete_department %}
                    <a href="{% url 'departments:department_delete' department.pk %}" 
                       class="list-group-item list-group-item-action text-danger"
                       onclick="return confirm('Are you sure you want to delete this department? This action cannot be undone.')">
                        <i class="fas fa-trash me-2"></i> Delete Department
                    </a>
                    {% endif %}
                </div>
            </div>

            <div class="card shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="mb-0">Department Statistics</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-3">
                        <div>
                            <h6 class="mb-0">{{ department.children.count }}</h6>
                            <small class="text-muted">Sub-Departments</small>
                        </div>
                        <div class="text-end">
                            <h6 class="mb-0">{{ department.user_set.count }}</h6>
                            <small class="text-muted">Team Members</small>
                        </div>
                    </div>
                    <div class="progress mb-3" style="height: 6px;">
                        <div class="progress-bar bg-primary" role="progressbar" 
                             style="width: {% widthratio department.user_set.count 10 100 %}%;" 
                             aria-valuenow="{{ department.user_set.count }}" 
                             aria-valuemin="0" 
                             aria-valuemax="10">
                        </div>
                    </div>
                    <small class="text-muted">
                        <i class="far fa-clock me-1"></i> Updated {{ department.updated_at|timesince }} ago
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Initialize tooltips
    document.addEventListener('DOMContentLoaded', function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>
{% endblock %}
