{% extends "base.html" %}

{% block title %}Issues{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3">
                    <i class="bi bi-bug-fill text-danger me-2"></i>
                    Issues
                </h1>
            </div>

            <!-- Filters -->
            <div class="card mb-4">
                <div class="card-body">
                    <form method="get" class="row g-3">
                        <div class="col-md-4">
                            <label for="status" class="form-label">Filter by Status</label>
                            <select name="status" id="status" class="form-select" onchange="this.form.submit()">
                                <option value="">All Statuses</option>
                                {% for value, display in status_choices %}
                                <option value="{{ value }}" {% if value == status_filter %}selected{% endif %}>
                                    {{ display }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Issues List -->
            <div class="card">
                <div class="card-body">
                    {% if issues %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Issue</th>
                                        <th>Status</th>
                                        <th>Priority</th>
                                        <th>Reported By</th>
                                        <th>Created</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for issue in issues %}
                                    <tr>
                                        <td>
                                            <div>
                                                <strong>#{{ issue.short_uuid }}</strong>
                                                <div class="text-muted small">{{ issue.title|truncatechars:50 }}</div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-{% if issue.status == 'open' %}danger{% elif issue.status == 'in_progress' %}warning{% elif issue.status == 'resolved' %}success{% else %}secondary{% endif %}">
                                                {{ issue.get_status_display }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge bg-{% if issue.priority == 'urgent' %}danger{% elif issue.priority == 'high' %}warning{% elif issue.priority == 'medium' %}info{% else %}secondary{% endif %}">
                                                {{ issue.get_priority_display }}
                                            </span>
                                        </td>
                                        <td>{{ issue.reported_by.get_full_name|default:issue.reported_by.username }}</td>
                                        <td>
                                            <small>{{ issue.created_at|date:"M j, Y" }}</small>
                                        </td>
                                        <td>
                                            <a href="{{ issue.get_absolute_url }}" class="btn btn-sm btn-outline-primary">
                                                <i class="bi bi-eye me-1"></i>
                                                View
                                            </a>
                                            {% if issue.reported_url %}
                                            <a href="{{ issue.reported_url }}" target="_blank" class="btn btn-sm btn-outline-secondary">
                                                <i class="bi bi-link-45deg me-1"></i>
                                                Page
                                            </a>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <i class="bi bi-bug display-1 text-muted"></i>
                            <h4 class="text-muted mt-3">No Issues Found</h4>
                            <p class="text-muted">
                                {% if status_filter %}
                                    No issues with status "{{ status_filter|title }}" found.
                                {% else %}
                                    No issues have been reported yet.
                                {% endif %}
                            </p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}