{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/feed.css">
<link rel="stylesheet" href="/static/css/post.css">
<style>
.bugs-layout {
    max-width: 720px;
    margin: 0 auto;
}
.bugs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.bugs-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
}
.bug-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.bug-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.bug-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.bug-status {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
}
.bug-status.open {
    background: var(--accent-light);
    color: var(--accent);
}
.bug-status.closed {
    background: rgba(76, 175, 80, 0.1);
    color: var(--success);
}
.bug-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}
.bug-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}
</style>
{% endblock %}
{% block content %}
<div class="bugs-layout">
    <div class="bugs-header">
        <h1>Bug Reports</h1>
        {% if user %}
        <button class="btn btn-primary btn-sm" data-modal="create-bug-modal"><span class="icon">&#x1F41B;</span> Report Bug</button>
        {% endif %}
    </div>

    <div class="bugs-list">
        {% for item in bugs %}
        <div class="bug-card fade-in">
            <div class="bug-card-header">
                {% set _user = item.author %}{% set _size = 24 %}{% set _size_class = "sm" %}{% include "_avatar_link.html" %}
                <span class="bug-title">{{ item.bug['title'] }}</span>
                <span class="bug-status {{ item.bug['status'] }}">{{ item.bug['status'] }}</span>
            </div>
            <div class="bug-desc">{{ item.bug['description'][:300] }}</div>
            <div class="bug-meta">{{ item.author['username'] if item.author else 'Unknown' }} &middot; {{ item.time_ago }}</div>

            {% set b_attachments = item.get('attachments', []) %}
            {% if b_attachments %}
            {% with attachments=b_attachments %}
            {% include "_attachment_display.html" %}
            {% endwith %}
            {% endif %}

            {% with target_uid=item.bug['uid'], target_type="bug", comments=item.comments %}
            {% include "_comment_section.html" %}
            {% endwith %}
        </div>
        {% else %}
        <div class="empty-state">No bug reports yet.</div>
        {% endfor %}
    </div>
</div>

{% if user %}
<div class="modal-overlay" id="create-bug-modal">
    <div class="card" style="width: 100%; max-width: 560px; margin: 1rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h3 style="font-size: 1.125rem; font-weight: 700;">Report a Bug</h3>
            <button type="button" class="modal-close btn-ghost btn-icon" style="font-size: 1.25rem;">&times;</button>
        </div>
        <form method="POST" action="/bugs/create">
            <div class="auth-field" style="margin-bottom: 0.75rem;">
                <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" style="margin-bottom: 1rem;">
                <label for="bug-description">Description</label>
                <textarea id="bug-description" name="description" required maxlength="5000" placeholder="Detailed steps to reproduce..." style="min-height: 120px;" data-mention></textarea>
            </div>
            {% include "_attachment_form.html" %}
            <div style="display: flex; gap: 0.75rem; justify-content: flex-end;">
                <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>
    </div>
</div>
{% endif %}
{% endblock %}