<div class="status-filter mb-1">
    <button class="btn btn-sm {% if active_filter == "pending" %}btn-outline active{% else %}btn-outline{% endif %}"
            hx-get="/api/mods/requests?status=pending"
            hx-target="#mods-tab-content"
            hx-swap="innerHTML">Pending</button>
    <button class="btn btn-sm {% if active_filter == "approved" %}btn-outline active{% else %}btn-outline{% endif %}"
            hx-get="/api/mods/requests?status=approved"
            hx-target="#mods-tab-content"
            hx-swap="innerHTML">Approved</button>
    <button class="btn btn-sm {% if active_filter == "rejected" %}btn-outline active{% else %}btn-outline{% endif %}"
            hx-get="/api/mods/requests?status=rejected"
            hx-target="#mods-tab-content"
            hx-swap="innerHTML">Rejected</button>
    <button class="btn btn-sm {% if active_filter == "all" %}btn-outline active{% else %}btn-outline{% endif %}"
            hx-get="/api/mods/requests?status=all"
            hx-target="#mods-tab-content"
            hx-swap="innerHTML">All</button>
</div>

<div class="card" id="request-form-area">
    <h3>Request a Mod</h3>
    <div>
        <input type="text" id="mod-search-input" placeholder="Search Forge by name, paste a URL, or enter a mod ID..."
               hx-get="/api/requests/search"
               hx-trigger="input changed delay:300ms"
               hx-target="#search-results"
               hx-swap="innerHTML"
               hx-indicator="#search-spinner"
               name="q"
               autocomplete="off"
               style="width:100%;margin-bottom:0.5rem">
        <span id="search-spinner" class="htmx-indicator text-muted text-sm">Searching...</span>
    </div>
    <div id="search-results"></div>
    <form id="request-create-form" style="display:none"
          hx-post="/api/requests"
          hx-target="#mods-tab-content"
          hx-swap="innerHTML">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <input type="hidden" name="forge_mod_id" id="selected-mod-id">
        <div id="selected-mod-preview" class="card" style="padding:0.75rem;margin:0.5rem 0"></div>
        <label for="request-reason">Why do you want this mod? (optional)</label>
        <textarea name="reason" id="request-reason" rows="2" placeholder="Tell the admins why this mod would be great..."
                  style="width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:0.5rem;font-size:0.9rem;resize:vertical"></textarea>
        <button type="submit" class="btn mt-1">Submit Request</button>
    </form>
</div>

{% if requests.is_empty() %}
<div class="card">
    <div class="empty-state">
        <p>No {{ active_filter }} requests yet.</p>
    </div>
</div>
{% else %}
{% for r in &requests %}
<div id="request-{{ r.request.id }}">
<div class="request-card card">
    <div class="flex-between">
        <div>
            {% if let Some(slug) = r.request.mod_slug.as_deref() %}
            <a href="https://forge.sp-tarkov.com/mods/{{ r.request.forge_mod_id }}-{{ slug }}" target="_blank" rel="noopener">
                <strong>{{ r.request.mod_name }}</strong> ↗
            </a>
            {% else %}
            <strong>{{ r.request.mod_name }}</strong>
            {% endif %}
            {% if r.request.fika_compatible == "compatible" %}
            <span class="badge badge-success" style="margin-left:0.5rem">Fika ✓</span>
            {% elif r.request.fika_compatible == "incompatible" %}
            <span class="badge badge-danger" style="margin-left:0.5rem">Fika ✗</span>
            {% endif %}
        </div>
        <div>
            {% if r.request.status == "pending" %}
            <span class="badge badge-muted">Pending</span>
            {% elif r.request.status == "approved" %}
            <span class="badge badge-success">Approved</span>
            {% else %}
            <span class="badge badge-danger">Rejected</span>
            {% endif %}
        </div>
    </div>
    {% if let Some(desc) = r.request.mod_description.as_deref() %}
    <p class="text-muted text-sm mt-1" style="max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ desc }}</p>
    {% endif %}
    {% if let Some(reason) = r.request.reason.as_deref() %}
    <p class="text-sm mt-1" style="font-style:italic;color:var(--text-muted)">"{{ reason }}"</p>
    {% endif %}
    <div class="flex-between mt-1">
        <span class="text-muted text-sm">by {{ r.requester_username }} · {{ r.request.created_at }}</span>
        <div class="vote-buttons flex gap-1" style="align-items:center;flex-wrap:wrap">
            {% if r.request.status == "pending" %}
            <form hx-post="/api/requests/{{ r.request.id }}/vote" hx-target="#request-{{ r.request.id }}" hx-swap="outerHTML" style="display:inline">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <input type="hidden" name="upvote" value="true">
                <input type="hidden" name="comment" class="vote-comment-field" value="">
                <button type="submit" class="btn btn-sm {% if r.current_user_vote == Some(true) %}btn-success{% else %}btn-outline{% endif %}">▲</button>
            </form>
            <span class="vote-score" style="font-weight:700;min-width:2ch;text-align:center">{{ r.vote_score }}</span>
            <form hx-post="/api/requests/{{ r.request.id }}/vote" hx-target="#request-{{ r.request.id }}" hx-swap="outerHTML" style="display:inline">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <input type="hidden" name="upvote" value="false">
                <input type="hidden" name="comment" class="vote-comment-field" value="">
                <button type="submit" class="btn btn-sm {% if r.current_user_vote == Some(false) %}btn-danger{% else %}btn-outline{% endif %}">▼</button>
            </form>
            <button type="button" class="btn btn-sm btn-outline" onclick="toggleVoteComment(this, {{ r.request.id }})">💬</button>
            {% else %}
            <span class="vote-score text-muted" style="font-weight:700">{{ r.vote_score }}</span>
            {% endif %}
            <span class="text-muted text-sm" style="margin-left:0.5rem">{{ r.upvote_count }}↑ {{ r.downvote_count }}↓</span>
            {% if r.comment_count > 0 %}
            <button class="btn btn-sm btn-outline" style="margin-left:0.25rem"
                    hx-get="/api/requests/{{ r.request.id }}/votes"
                    hx-target="#comments-{{ r.request.id }}"
                    hx-swap="innerHTML">{{ r.comment_count }} comment{% if r.comment_count != 1 %}s{% endif %}</button>
            {% endif %}
            <div class="vote-comment-input" id="vote-comment-{{ r.request.id }}" style="display:none;width:100%;margin-top:0.25rem">
                <input type="text" placeholder="Add a comment with your vote..." style="width:100%;font-size:0.85rem"
                       oninput="updateVoteComments(this, {{ r.request.id }})">
            </div>
        </div>
    </div>
    {% if let Some(resolver) = r.resolver_username.as_deref() %}
    <div class="text-sm text-muted mt-1">
        Resolved by {{ resolver }} · {{ r.request.resolved_at.as_deref().unwrap_or("") }}
        {% if let Some(rc) = r.request.resolve_comment.as_deref() %}
        — "{{ rc }}"
        {% endif %}
    </div>
    {% endif %}
    {% if r.request.status == "pending" && user.role.can_manage_mods() %}
    <div class="mt-1 resolve-form" style="display:flex;gap:0.5rem;align-items:flex-start;flex-wrap:wrap">
        <form hx-post="/api/requests/{{ r.request.id }}/resolve" hx-target="#request-{{ r.request.id }}" hx-swap="outerHTML"
              style="display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <input type="hidden" name="action" value="approve">
            <input type="text" name="comment" placeholder="Comment (optional)" style="flex:1;min-width:150px" class="text-sm">
            <label class="text-sm" style="display:flex;align-items:center;gap:0.25rem;cursor:pointer">
                <input type="checkbox" name="install" value="true"> Install now
            </label>
            <button type="submit" class="btn btn-sm btn-success">Approve</button>
        </form>
        <form hx-post="/api/requests/{{ r.request.id }}/resolve" hx-target="#request-{{ r.request.id }}" hx-swap="outerHTML"
              style="display:flex;gap:0.5rem;align-items:center">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <input type="hidden" name="action" value="reject">
            <input type="text" name="comment" placeholder="Reason (optional)" style="flex:1;min-width:100px" class="text-sm">
            <button type="submit" class="btn btn-sm btn-danger">Reject</button>
        </form>
    </div>
    {% endif %}
    <div id="comments-{{ r.request.id }}"></div>
</div>
</div>
{% endfor %}
{% endif %}
<script>
function toggleVoteComment(btn, requestId) {
    var el = document.getElementById('vote-comment-' + requestId);
    el.style.display = el.style.display === 'none' ? 'block' : 'none';
    if (el.style.display === 'block') el.querySelector('input').focus();
}
function updateVoteComments(input, requestId) {
    var card = document.getElementById('request-' + requestId);
    card.querySelectorAll('.vote-comment-field').forEach(function(f) { f.value = input.value; });
}
</script>
