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

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

    <div class="card">
        <div class="card-header">
            <h2>Available Models</h2>
        </div>
        <div class="card-body">
            <div class="model-list" id="model-list">
                <p class="loading">Loading models...</p>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2>Upload Model</h2>
        </div>
        <div class="card-body">
            <p class="hint">Upload .nam model files to the pedal's model directory.</p>
            <input type="file" id="model-upload-input" accept=".nam" class="file-input">
            <button class="btn btn-primary" onclick="uploadModel()">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 NAM models directly from the Tone3000 community.</p>
            <div class="tonedownload-search-row">
                <input type="text" id="model-tone-search" class="file-input tonedownload-input"
                       placeholder="Search models (e.g. Marshall JCM800)..." onkeydown="if(event.key==='Enter')searchToneModels()">
                <button class="btn btn-primary" onclick="searchToneModels()">Search</button>
                <button class="btn btn-secondary" onclick="loadTrendingModels()">Trending</button>
            </div>
            <div id="model-tone-loader" class="loading" style="display:none">Searching Tone3000...</div>
            <div id="model-tone-offline" class="tonedownload-offline" style="display:none">
                <span>⚠ Offline — search unavailable</span>
            </div>
            <div id="model-tone-results" class="tonedownload-results"></div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/models.js"></script>
{% endblock %}