{% extends "core/base.html" %}

{% block content %}
<div class="container my-5">
    <div class="card shadow-lg">
        <div class="card-header bg-primary text-white">
            <h3>Department Dashboard</h3>
            <p>
                Welcome, {{ request.user.username }}. Department: 
                {% for dept in departments %}
                    <span class="badge bg-light text-dark">{{ dept.name }}</span>
                {% empty %}
                    <span class="text-muted">No department assigned.</span>
                {% endfor %}
            </p>
        </div>
        <div class="card-body">
            {% if issues %}
                <table class="table table-bordered table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>Title</th>
                            <th>Reported By</th>
                            <th>Location</th>
                            <th>Status</th>
                            <th>Created At</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for issue in issues %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ issue.title }}</td>
                            <td>{{ issue.reporter.username }}</td>
                            <td>{{ issue.location }}</td>
                            <td>
                                {% if issue.status == "reported" %}
                                    <span class="badge bg-danger">Reported</span>
                                {% elif issue.status == "acknowledged" %}
                                    <span class="badge bg-info text-dark">Acknowledged</span>
                                {% elif issue.status == "in_progress" %}
                                    <span class="badge bg-warning text-dark">In Progress</span>
                                {% elif issue.status == "resolved" %}
                                    <span class="badge bg-success">Resolved</span>
                                {% else %}
                                    <span class="badge bg-secondary">Unknown</span>
                                {% endif %}
                            </td>
                            
                            <td>{{ issue.created_at|date:"M d, Y H:i" }}</td>
                            <td>
                                {% if issue.status in "reported,acknowledged" %}
                                    <form method="post" action="{% url 'update_issue_status' issue.id %}">
                                        {% csrf_token %}
                                        <input type="hidden" name="status" value="in_progress">
                                        <button type="submit" class="btn btn-sm btn-warning">In Progress</button>
                                    </form>
                                {% elif issue.status == "in_progress" %}
                                    <form method="post" action="{% url 'update_issue_status' issue.id %}">
                                        {% csrf_token %}
                                        <input type="hidden" name="status" value="resolved">
                                        <button type="submit" class="btn btn-sm btn-success">Resolved</button>
                                    </form>
                                {% else %}
                                    <span class="text-muted">No actions</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p class="text-muted">No issues assigned to your departments yet.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}