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

    <div class="bank-list" id="bank-list">
        <p class="loading">Loading presets...</p>
    </div>
</div>

<div class="modal-overlay" id="preset-modal" style="display:none" onclick="closeModal(event)">
    <div class="modal" onclick="event.stopPropagation()">
        <div class="modal-header">
            <h2 id="modal-title">Edit Preset</h2>
            <button class="btn-close" onclick="closeModal()">✕</button>
        </div>
        <div class="modal-body" id="modal-body">
            <!-- Dynamic content loaded by JS -->
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
            <button class="btn btn-primary" id="save-preset-btn" onclick="savePreset()">Save</button>
            <button class="btn btn-danger" onclick="deletePreset()">Delete</button>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/presets.js"></script>
{% endblock %}