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

{% block content %}
<div class="container my-5">
    <div class="card shadow-lg">
        <div class="card-header bg-warning text-dark">
            <h3>Manage Issues</h3>
        </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>Category</th>
                            <th>Reported By</th>
                            <th>Status</th>
                            <th>Created At</th>
                            <th>Assign Department</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for issue in issues %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ issue.title }}</td>
                            <td>{{ issue.category.name|default:"—" }}</td>
                            <td>{{ issue.reporter.username }}</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.department %}
                                <span class="fw-bold text-primary">{{ issue.department.name }}</span>
                                {% else %}
                                <form method="post" action="">
                                    {% csrf_token %}
                                    <input type="hidden" name="issue_id" value="{{ issue.id }}">
                                    <select name="department" class="form-select form-select-sm">
                                        <option value="">— Select Department —</option>
                                        {% for dept in departments %}
                                        <option value="{{ dept.id }}">{{ dept.name }}</option>
                                        {% endfor %}
                                    </select>
                                    <button type="submit" class="btn btn-sm btn-primary mt-1">Assign</button>
                                </form>
                                {% endif %}
                            </td>

                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p class="text-muted">No issues reported yet.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}