{% 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>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 %}