{% 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>
{% endblock %}
{% block scripts %}
<script src="/static/models.js"></script>
{% endblock %}