{% extends "base.html" %}

{% block title %}Smello - Requests{% endblock %}

{% block main_class %}split-layout{% endblock %}

{% block content %}
<div class="split-header">
    <h3>Smello <small>HTTP Request Inspector</small></h3>
    <form method="get" action="/" class="filters" role="group">
        <input type="search" name="search" placeholder="Search URL..." value="{{ filter_search }}">
        <select name="host">
            <option value="">All hosts</option>
            {% for h in hosts %}
            <option value="{{ h }}" {% if h == filter_host %}selected{% endif %}>{{ h }}</option>
            {% endfor %}
        </select>
        <select name="method">
            <option value="">All methods</option>
            {% for m in methods %}
            <option value="{{ m }}" {% if m == filter_method %}selected{% endif %}>{{ m }}</option>
            {% endfor %}
        </select>
        <button type="submit">Filter</button>
    </form>
</div>

<div class="split-container">
    <div class="list-panel"
         id="list-panel"
         hx-get="/?_partial=list"
         hx-trigger="every 3s"
         hx-swap="innerHTML">
        {% if requests %}
        {% include "partials/request_list_items.html" %}
        {% else %}
        <div class="list-empty">
            <p>No captured requests yet.</p>
            <p><small>Add <code>import smello; smello.init()</code> to your Python code.</small></p>
        </div>
        {% endif %}
    </div>

    <div class="detail-panel" id="detail-panel">
        <div class="detail-placeholder">
            <p>Select a request to view details</p>
        </div>
    </div>
</div>

{% if requests %}
<div class="clear-all-row">
    <button class="outline secondary clear-all-btn" hx-delete="/api/requests" hx-swap="none"
            hx-on::after-request="window.location.reload()">Clear All</button>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
function copyText(id) {
    const el = document.getElementById(id);
    navigator.clipboard.writeText(el.textContent);
}

function selectItem(el, id) {
    document.querySelectorAll('.list-item.selected').forEach(e => e.classList.remove('selected'));
    el.classList.add('selected');
    window.location.hash = id;
}

// After HTMX swaps in new detail content, init JSON viewers
document.body.addEventListener('htmx:afterSwap', function(evt) {
    if (evt.detail.target.id === 'detail-panel') {
        evt.detail.target.querySelectorAll('.json-viewer').forEach(initJsonViewer);
    }
    // After list refresh, re-apply selected class from hash
    if (evt.detail.target.id === 'list-panel') {
        const hash = window.location.hash.substring(1);
        if (hash) {
            evt.detail.target.querySelectorAll('.list-item').forEach(item => {
                if (item.getAttribute('hx-get') === '/requests/' + hash + '/partial') {
                    item.classList.add('selected');
                }
            });
            htmx.process(evt.detail.target);
        }
    }
});
</script>
{% endblock %}