{% extends "base.html" %}

{% block title %}Issues - {{ tool.owner }}/{{ tool.name }} - CmdForge{% endblock %}

{% block content %}
<div class="bg-gray-50 min-h-screen">
    <!-- Breadcrumb -->
    <div class="bg-white border-b border-gray-200">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <nav class="flex items-center text-sm text-gray-500" aria-label="Breadcrumb">
                <a href="{{ url_for('web.tools') }}" class="hover:text-gray-700">Tools</a>
                <svg class="w-4 h-4 mx-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                </svg>
                <a href="{{ url_for('web.tool_detail', owner=tool.owner, name=tool.name) }}" class="hover:text-gray-700">{{ tool.owner }}/{{ tool.name }}</a>
                <svg class="w-4 h-4 mx-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                </svg>
                <span class="text-gray-900 font-medium">Issues</span>
            </nav>
        </div>
    </div>

    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Header -->
        <div class="flex items-center justify-between mb-6">
            <h1 class="text-2xl font-bold text-gray-900">Issues for {{ tool.name }}</h1>
            <a href="{{ url_for('web.tool_detail', owner=tool.owner, name=tool.name) }}#issues"
               class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
                Report Issue
            </a>
        </div>

        <!-- Filters -->
        <div class="bg-white rounded-lg border border-gray-200 p-4 mb-6">
            <div class="flex flex-wrap items-center gap-4">
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Status</label>
                    <select id="status-filter" onchange="applyFilters()"
                            class="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500">
                        <option value="" {{ 'selected' if not current_status else '' }}>All</option>
                        <option value="open" {{ 'selected' if current_status == 'open' else '' }}>Open</option>
                        <option value="confirmed" {{ 'selected' if current_status == 'confirmed' else '' }}>Confirmed</option>
                        <option value="fixed" {{ 'selected' if current_status == 'fixed' else '' }}>Fixed</option>
                        <option value="wontfix" {{ 'selected' if current_status == 'wontfix' else '' }}>Won't Fix</option>
                        <option value="duplicate" {{ 'selected' if current_status == 'duplicate' else '' }}>Duplicate</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">Type</label>
                    <select id="type-filter" onchange="applyFilters()"
                            class="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500">
                        <option value="" {{ 'selected' if not current_type else '' }}>All</option>
                        <option value="bug" {{ 'selected' if current_type == 'bug' else '' }}>Bug</option>
                        <option value="security" {{ 'selected' if current_type == 'security' else '' }}>Security</option>
                        <option value="compatibility" {{ 'selected' if current_type == 'compatibility' else '' }}>Compatibility</option>
                    </select>
                </div>
                {% if current_status or current_type %}
                <a href="{{ url_for('web.tool_issues', owner=tool.owner, name=tool.name) }}"
                   class="px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700">
                    Clear filters
                </a>
                {% endif %}
            </div>
        </div>

        <!-- Issues List -->
        {% if issues %}
        <div class="bg-white rounded-lg border border-gray-200 divide-y divide-gray-200">
            {% for issue in issues %}
            <div class="p-4 hover:bg-gray-50">
                <div class="flex items-start">
                    <div class="flex-shrink-0 mr-3">
                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium
                            {{ 'bg-red-100 text-red-800' if issue.issue_type == 'security' else
                               'bg-blue-100 text-blue-800' if issue.issue_type == 'bug' else
                               'bg-purple-100 text-purple-800' }}">
                            {{ issue.issue_type }}
                        </span>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2">
                            <h3 class="text-sm font-medium text-gray-900">{{ issue.title }}</h3>
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                                {{ 'bg-red-100 text-red-800' if issue.severity == 'critical' else
                                   'bg-orange-100 text-orange-800' if issue.severity == 'high' else
                                   'bg-yellow-100 text-yellow-800' if issue.severity == 'medium' else
                                   'bg-gray-100 text-gray-800' }}">
                                {{ issue.severity }}
                            </span>
                        </div>
                        <p class="mt-1 text-xs text-gray-500">
                            Reported {{ issue.created_at|timeago }} by {{ issue.reporter_name }}
                            {% if issue.resolved_at %}
                            &middot; Resolved {{ issue.resolved_at|timeago }}
                            {% endif %}
                        </p>
                    </div>
                    <div class="flex-shrink-0 ml-4">
                        <span class="inline-flex items-center px-2.5 py-1 rounded text-xs font-medium
                            {{ 'bg-green-100 text-green-800' if issue.status in ('fixed', 'wontfix', 'duplicate') else
                               'bg-yellow-100 text-yellow-800' if issue.status == 'confirmed' else
                               'bg-gray-100 text-gray-800' }}">
                            {% if issue.status == 'open' %}
                            <svg class="w-3 h-3 mr-1 text-gray-500" fill="currentColor" viewBox="0 0 8 8">
                                <circle cx="4" cy="4" r="3"/>
                            </svg>
                            {% elif issue.status == 'confirmed' %}
                            <svg class="w-3 h-3 mr-1 text-yellow-600" fill="currentColor" viewBox="0 0 8 8">
                                <circle cx="4" cy="4" r="3"/>
                            </svg>
                            {% else %}
                            <svg class="w-3 h-3 mr-1 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                            </svg>
                            {% endif %}
                            {{ issue.status }}
                        </span>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- Pagination -->
        {% if pagination.pages > 1 %}
        <div class="mt-6 flex items-center justify-center gap-2">
            {% set url_params = {} %}
            {% if current_status %}{% set _ = url_params.update({'status': current_status}) %}{% endif %}
            {% if current_type %}{% set _ = url_params.update({'type': current_type}) %}{% endif %}

            {% if pagination.has_prev %}
            <a href="?page={{ pagination.prev_num }}{% if current_status %}&status={{ current_status }}{% endif %}{% if current_type %}&type={{ current_type }}{% endif %}"
               class="px-4 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                Previous
            </a>
            {% endif %}
            <span class="text-sm text-gray-500">Page {{ pagination.page }} of {{ pagination.pages }}</span>
            {% if pagination.has_next %}
            <a href="?page={{ pagination.next_num }}{% if current_status %}&status={{ current_status }}{% endif %}{% if current_type %}&type={{ current_type }}{% endif %}"
               class="px-4 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                Next
            </a>
            {% endif %}
        </div>
        {% endif %}
        {% else %}
        <div class="bg-white rounded-lg border border-gray-200 p-12 text-center">
            <svg class="mx-auto w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <p class="mt-4 text-gray-600">
                {% if current_status or current_type %}
                No issues match your filters.
                {% else %}
                No issues reported for this tool.
                {% endif %}
            </p>
        </div>
        {% endif %}
    </div>
</div>

<script>
function applyFilters() {
    const status = document.getElementById('status-filter').value;
    const type = document.getElementById('type-filter').value;
    let url = window.location.pathname;
    const params = new URLSearchParams();
    if (status) params.set('status', status);
    if (type) params.set('type', type);
    if (params.toString()) {
        url += '?' + params.toString();
    }
    window.location.href = url;
}
</script>
{% endblock %}