{% extends "base.html" %}
{% block title %}Dashboard — Pi Multi-FX Pedal{% endblock %}
{% block content %}
<div class="dashboard">
    <!-- Current Preset Card -->
    <div class="card">
        <div class="card-header">
            <h2>Current Preset</h2>
        </div>
        <div class="card-body">
            <div class="preset-name-display" id="preset-name">{{ current_preset.name if current_preset else "—" }}</div>
            <div class="preset-meta" id="preset-meta">
                Bank {{ current_preset.bank if current_preset else 0 }} — Program {{ current_preset.program if current_preset else 0 }}
            </div>
            <div class="preset-controls">
                <button class="btn btn-primary" onclick="activatePreset('prev', -1)">◀ Prev</button>
                <button class="btn btn-primary" onclick="activatePreset('next', 1)">Next ▶</button>
            </div>
        </div>
    </div>

    <!-- Status Row -->
    <div class="status-row">
        <div class="card status-card">
            <div class="status-label">Bypass</div>
            <div class="status-value">
                <button class="btn toggle-btn {% if bypass %}active{% endif %}" id="bypass-btn" onclick="toggleBypass()">
                    {% if bypass %}BYPASSED{% else %}ACTIVE{% endif %}
                </button>
            </div>
        </div>
        <div class="card status-card">
            <div class="status-label">Tuner</div>
            <div class="status-value">
                <button class="btn toggle-btn {% if tuner_enabled %}active{% endif %}" id="tuner-btn" onclick="toggleTuner()">
                    {% if tuner_enabled %}ON{% else %}OFF{% endif %}
                </button>
                <div id="tuner-display" class="tuner-display" style="display:none">
                    <div class="tuner-note" id="tuner-note">--</div>
                    <div class="tuner-cents-bar" id="tuner-cents-bar">
                        <div class="tuner-cents-fill" id="tuner-cents-fill" style="width:50%"></div>
                    </div>
                    <div class="tuner-cents-text" id="tuner-cents-text">0¢</div>
                    <div class="tuner-string" id="tuner-string">-</div>
                </div>
            </div>
        </div>
        <div class="card status-card">
            <div class="status-label">Volume</div>
            <div class="status-value">
                <input type="range" class="slider" id="volume-slider"
                       min="0" max="100" value="{{ (master_volume * 100)|int }}"
                       oninput="setVolume(this.value)">
                <span class="volume-text" id="volume-text">{{ (master_volume * 100)|int }}%</span>
            </div>
        </div>
    </div>

    <!-- FX Chain -->
    <div class="card">
        <div class="card-header">
            <h2>FX Chain</h2>
        </div>
        <div class="card-body">
            <div class="fx-chain" id="fx-chain">
                <div class="fx-block-chain-placeholder" id="fx-chain-placeholder">
                    <p>Connect to pedal to see active FX chain. Click a block to toggle it on/off.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- NAM Model Status -->
    <div class="card">
        <div class="card-header">
            <h2>NAM Model</h2>
        </div>
        <div class="card-body">
            <div class="model-status" id="model-status">
                <span class="model-name" id="model-name">{{ nam_model if nam_model else "None loaded" }}</span>
            </div>
        </div>
    </div>

    <!-- IR Status -->
    <div class="card">
        <div class="card-header">
            <h2>IR Cabinet</h2>
        </div>
        <div class="card-body">
            <div class="ir-status" id="ir-status">
                <span class="ir-name" id="ir-name">{{ ir_name if ir_name else "None loaded" }}</span>
            </div>
        </div>
    </div>

    <!-- 4CM Routing Status -->
    <div class="card">
        <div class="card-header">
            <h2>Routing</h2>
        </div>
        <div class="card-body">
            <div class="routing-status">
                <span class="routing-indicator" id="routing-mode-indicator" data-mode="{{ routing_mode }}">
                    {% if routing_mode == '4cm' %}
                        <span class="badge badge-4cm">4CM</span>
                    {% else %}
                        <span class="badge badge-mono">Mono</span>
                    {% endif %}
                </span>
                <span class="routing-info" id="routing-info">
                    {% if routing_mode == '4cm' %}
                        Breakpoint: {{ routing_breakpoint }}
                    {% else %}
                        Full chain
                    {% endif %}
                </span>
            </div>
        </div>
    </div>
</div>
{% endblock %}