{% extends "base.html" %}
{% from "_macros.html" import modal %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/bugs.css">
{% endblock %}
{% block content %}
<div class="bugs-layout">
    <div class="bugs-header">
        <h1>Bug Reports</h1>
        {% if user %}
        <button type="button" class="btn btn-primary btn-sm" data-modal="create-bug-modal"><span class="icon">&#x1F41B;</span> Report Bug</button>
        {% else %}
        <a href="/auth/login" class="btn btn-primary btn-sm login-required" title="Log in to participate"><span class="icon">&#x1F41B;</span> Report Bug</a>
        {% endif %}
    </div>

    <div class="bugs-filters">
        <a href="?state=open" class="bugs-filter {% if state == 'open' %}active{% endif %}">Open</a>
        <a href="?state=closed" class="bugs-filter {% if state == 'closed' %}active{% endif %}">Closed</a>
        <a href="?state=all" class="bugs-filter {% if state == 'all' %}active{% endif %}">All</a>
    </div>

    {% if not configured or error_message %}
    <div class="empty-state">{{ error_message }}</div>
    {% else %}
    <div class="bugs-list">
        {% for bug in bugs %}
        <div class="bug-card card-link-host">
            {% set _href = "/bugs/" ~ bug.number %}
            {% set _label = bug.title %}
            {% include "_card_link.html" %}
            <div class="bug-card-header">
                <span class="bug-number">#{{ bug.number }}</span>
                <span class="bug-title">{{ bug.title }}</span>
                <span class="bug-status {{ bug.state }}">{{ bug.state }}</span>
            </div>
            <div class="bug-meta">
                {% if bug.is_local_author %}
                {% set _user = {'username': bug.author_username} %}{% set _size = 20 %}{% set _size_class = "sm" %}{% include "_avatar_link.html" %}
                {% endif %}
                <span class="bug-author">{{ bug.author_username }}</span>
                <span class="bug-dot">&middot;</span>
                <span class="bug-date">{{ format_date(bug.created_at) }}</span>
                <span class="bug-dot">&middot;</span>
                <span class="bug-comments">{{ bug.comments_count }} comment{{ '' if bug.comments_count == 1 else 's' }}</span>
            </div>
        </div>
        {% else %}
        <div class="empty-state">No bug reports yet.</div>
        {% endfor %}
    </div>

    {% set pagination_query = 'state=' ~ state ~ '&' %}
    {% include "_pagination.html" %}
    {% endif %}
</div>

{% if user %}
{% call modal('create-bug-modal', 'Report a Bug') %}
        <form method="POST" action="/bugs/create" data-bug-create>
            <p class="bugs-modal-hint">Your report is improved by AI into a consistent ticket and filed on the tracker.</p>
            <div class="auth-field auth-field-gap">
                <label for="bug-title">Title</label>
                <input type="text" id="bug-title" name="title" required maxlength="200" placeholder="Brief description of the issue">
            </div>
            <div class="auth-field auth-field-gap">
                <label for="bug-description">Description</label>
                <textarea id="bug-description" name="description" required maxlength="5000" placeholder="Steps to reproduce, expected vs actual, environment..." class="min-h-120"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="modal-close btn btn-secondary">Cancel</button>
                <button type="submit" class="btn btn-primary"><span class="icon">&#x1F4E4;</span> Submit Report</button>
            </div>
        </form>
{% endcall %}
{% endif %}
{% endblock %}