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