{% extends "base.html" %}

{% block content %}
<div class="container mt-4">

    <div class="row">
        <div class="col-md-8">
            <h1>{{ department.name }}</h1>

            <p>
                <strong>Leader:</strong>
                {{ department.leader.username|default:"No leader assigned" }}
            </p>

            <p><strong>Total Members:</strong> {{ department.member_count }}</p>

            <p>
                <strong>Date Created:</strong>
                {{ department.date_created|date:"M d, Y" }}
            </p>

            {% if department.description %}
            <div class="mt-4">
                <h5>Description</h5>
                <p>{{ department.description }}</p>
            </div>
            {% endif %}
        </div>
    </div>

    {% if members %}
    <div class="row mt-5">
        <div class="col-12">
            <h3>Recent Members ({{ members.count }})</h3>

            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Phone</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for member in members %}
                        <tr>
                            <td>{{ member.member_id }}</td>
                            <td>{{ member.full_name }}</td>
                            <td>{{ member.phone }}</td>
                            <td>{{ member.get_membership_status_display }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

        </div>
    </div>
    {% endif %}

    <div class="mt-4">
        <a href="{% url 'department_update' department.pk %}" class="btn btn-primary">Edit Department</a>
        <a href="{% url 'department_delete' department.pk %}" class="btn btn-danger">Delete Department</a>
        <a href="{% url 'department_list' %}" class="btn btn-secondary">Back to List</a>
    </div>

</div>
{% endblock %}