{% extends "base.html" %}
{% block title %}Settings — Pi Multi-FX Pedal{% endblock %}
{% block content %}
<div class="page settings-page">
    <div class="page-header">
        <h1>Settings</h1>
    </div>

    <div class="card">
        <div class="card-header">
            <h2>Connection</h2>
        </div>
        <div class="card-body">
            <div class="setting-row">
                <div class="setting-label">Hostname</div>
                <div class="setting-value"><code id="hostname">pedal.local</code></div>
            </div>
            <div class="setting-row">
                <div class="setting-label">Web Server</div>
                <div class="setting-value"><code id="web-url">http://pedal.local:8080</code></div>
            </div>
            <div class="setting-row">
                <div class="setting-label">Connected Clients</div>
                <div class="setting-value"><span id="ws-count">0</span></div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2>Audio</h2>
        </div>
        <div class="card-body">
            <div class="setting-row">
                <div class="setting-label">Master Volume</div>
                <div class="setting-value">
                    <input type="range" class="slider" id="settings-volume"
                           min="0" max="100" value="{{ (master_volume * 100)|int }}"
                           oninput="setVolume(this.value)">
                    <span id="settings-volume-text">{{ (master_volume * 100)|int }}%</span>
                </div>
            </div>
            <div class="setting-row">
                <div class="setting-label">Tuner</div>
                <div class="setting-value">
                    <button class="btn toggle-btn {% if tuner_enabled %}active{% endif %}"
                            id="settings-tuner-btn" onclick="toggleTuner()">
                        {% if tuner_enabled %}ON{% else %}OFF{% endif %}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2>4-Cable Method (4CM)</h2>
        </div>
        <div class="card-body">
            <div class="setting-row">
                <div class="setting-label">4CM Mode</div>
                <div class="setting-value">
                    <button class="btn toggle-btn {% if routing_mode == '4cm' %}active{% endif %}"
                            id="4cm-toggle-btn" onclick="toggle4cm()">
                        {% if routing_mode == '4cm' %}ON{% else %}OFF{% endif %}
                    </button>
                </div>
            </div>
            <div class="setting-row" id="breakpoint-row"
                 {% if routing_mode != '4cm' %}style="opacity: 0.4; pointer-events: none;"{% endif %}>
                <div class="setting-label">Breakpoint</div>
                <div class="setting-value">
                    <input type="range" class="slider" id="4cm-breakpoint"
                           min="0" max="16" value="{{ routing_breakpoint }}"
                           oninput="set4cmBreakpoint(this.value)">
                    <span id="4cm-breakpoint-text">{{ routing_breakpoint }}</span>
                </div>
            </div>
            <div class="setting-row">
                <div class="setting-label">Routing</div>
                <div class="setting-value">
                    <span id="4cm-routing-desc" class="routing-desc">
                        {% if routing_mode == '4cm' %}
                            Input 1 (Guitar) → Pre blocks [0..{{ routing_breakpoint }}) → Send
                            &nbsp;|&nbsp; Input 2 (Return) → Post blocks [{{ routing_breakpoint }}..] → Output
                        {% else %}
                            Mono: Guitar → Full chain → Output
                        {% endif %}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2>About</h2>
        </div>
        <div class="card-body">
            <div class="about-info">
                <p><strong>Pi Multi-FX Pedal</strong> v0.1.0</p>
                <p>Raspberry Pi 4B — Python 3.11 — JACK Audio</p>
                <p><a href="https://gitea.ourpad.casa/shawn/pi-multifx-pedal" target="_blank">Gitea Repository</a></p>
            </div>
        </div>
    </div>
</div>
{% endblock %}