{% extends "base.html" %}
{% block title %}IR Cabinet — Pi Multi-FX Pedal{% endblock %}
{% block content %}
<div class="page irs-page">
    <div class="page-header">
        <h1>IR Manager</h1>
        <button class="btn btn-secondary" onclick="loadIRs()">⟳ Refresh</button>
    </div>

    <div class="card">
        <div class="card-header">
            <h2>Current IR</h2>
        </div>
        <div class="card-body">
            <div class="current-ir" id="current-ir">
                <span class="ir-name">None loaded</span>
            </div>
            <div class="ir-controls">
                <button class="btn btn-danger" onclick="unloadIR()" id="unload-ir-btn" style="display:none">Unload</button>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2>Available IR Files</h2>
        </div>
        <div class="card-body">
            <div class="ir-list" id="ir-list">
                <p class="loading">Loading IR files...</p>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2>Upload IR</h2>
        </div>
        <div class="card-body">
            <p class="hint">Upload .wav IR files to the pedal's IR directory.</p>
            <input type="file" id="ir-upload-input" accept=".wav" class="file-input">
            <button class="btn btn-primary" onclick="uploadIR()">Upload</button>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2>Browse Tone3000 <span class="badge badge-tone3000">BETA</span></h2>
        </div>
        <div class="card-body">
            <p class="hint">Search and download impulse responses directly from the Tone3000 community.</p>
            <div class="tonedownload-search-row">
                <input type="text" id="ir-tone-search" class="file-input tonedownload-input"
                       placeholder="Search IRs (e.g. Celestion V30)..." onkeydown="if(event.key==='Enter')searchToneIRs()">
                <button class="btn btn-primary" onclick="searchToneIRs()">Search</button>
                <button class="btn btn-secondary" onclick="loadTrendingIRs()">Trending</button>
            </div>
            <div id="ir-tone-loader" class="loading" style="display:none">Searching Tone3000...</div>
            <div id="ir-tone-offline" class="tonedownload-offline" style="display:none">
                <span>⚠ Offline — search unavailable</span>
            </div>
            <div id="ir-tone-results" class="tonedownload-results"></div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/irs.js"></script>
{% endblock %}