<!DOCTYPE html>
<html lang="en">
{{ template "head" . }}
<script src="../static/js/cluster.js"></script>
<body>

<div class="container-fluid">
    {{ $devs := .Devices }}
    {{ $device := .Device }}
    {{ $languageCode := .LanguageCode }}
    {{ $audio := .AudioSettings }}
    {{ $dash := .Dashboard }}
    <input type="hidden" id="deviceId" name="deviceId" value="{{ $device.Serial }}">
    <div class="row">
        <!-- Sidebar -->
        {{ template "sidebar" . }}

        <!-- Main -->
        <main class="main-content p-4">
            <!-- Temperature bar -->
            {{ if .Dashboard.TemperatureBar }}
            {{ template "temperature-bar" . }}
            {{ end }}

            <!-- Settings -->
            <div class="row g-4 mb-4 align-items-start">
                <div class="col-md-3">
                    <div class="stack-gap-4">
                        <!-- Dashboard Settings -->
                        <div class="card system-card text-center">
                            <div class="card-header">
                                {{ .Lang "txtDashboard" }}
                            </div>
                            <div class="card-body">
                                <div class="settings-list">
                                    <!-- Temperature (C / F) -->
                                    <div class="settings-row">
                                        <span class="settings-label text-ellipsis">{{ .Lang "txtShowTempInC" }}</span>
                                        <label class="system-toggle compact">
                                            <input type="checkbox" id="checkbox-celsius">
                                            <span class="toggle-track"></span>
                                        </label>
                                    </div>

                                    <div class="settings-row">
                                        <span class="settings-label text-ellipsis">{{ .Lang "txtShowTemperatureBar" }}</span>
                                        <label class="system-toggle compact">
                                            <input type="checkbox" id="checkbox-temperatureBar">
                                            <span class="toggle-track"></span>
                                        </label>
                                    </div>

                                    <div class="settings-row">
                                        <span class="settings-label text-ellipsis">{{ .Lang "txtShowDeviceLabels" }}</span>
                                        <label class="system-toggle compact">
                                            <input type="checkbox" id="checkbox-deviceLabels">
                                            <span class="toggle-track"></span>
                                        </label>
                                    </div>

                                    <div class="settings-row">
                                        <span class="settings-label text-ellipsis">{{ .Lang "txtAddDeviceToDashboard" }}</span>
                                        <label class="system-toggle compact">
                                            <input type="checkbox" id="checkbox-addDeviceToDashboard">
                                            <span class="toggle-track"></span>
                                        </label>
                                    </div>

                                    <!-- Language -->
                                    <div class="settings-row">
                                        <span class="settings-label text-ellipsis">{{ .Lang "txtLanguage" }}</span>
                                        <label for="userLanguage">
                                            <select id="userLanguage" class="form-select system-select auto-width compact userLanguage">
                                                {{ range $k, $v := .Languages }}
                                                {{ if eq $languageCode $k }}
                                                <option value="{{ $k }}" selected>{{ $v.Name }}</option>
                                                {{ else }}
                                                <option value="{{ $k }}">{{ $v.Name }}</option>
                                                {{ end }}
                                                {{ end }}
                                            </select>
                                        </label>
                                    </div>

                                    <!-- Style -->
                                    <div class="settings-row">
                                        <span class="settings-label text-ellipsis">{{ .Lang "txtStyle" }}</span>
                                        <label for="theme">
                                            <select id="theme" class="form-select system-select auto-width compact theme">
                                                {{ range $v := .Dashboard.Themes }}
                                                {{ if eq $dash.Theme $v }}
                                                <option value="{{ $v }}" selected>{{ $v }}</option>
                                                {{ else }}
                                                <option value="{{ $v }}">{{ $v }}</option>
                                                {{ end }}
                                                {{ end }}
                                            </select>
                                        </label>
                                    </div>

                                    <!-- Global RGB -->
                                    <div class="settings-row">
                                        <span class="settings-label text-ellipsis">{{ .Lang "txtRgb" }}</span>
                                        <label for="allDevicesRgb">
                                            <select id="allDevicesRgb" class="form-select system-select auto-width compact allDevicesRgb">
                                                <option value="none">None</option>
                                                {{ range $key, $mode := .RGBModes }}
                                                <option value="{{ $mode }}">{{ $mode }}</option>
                                                {{ end }}
                                            </select>
                                        </label>
                                    </div>

                                    <!-- Save settings -->
                                    <div class="settings-row">
                                        <button class="system-button" id="btnSaveDashboardSettings">{{ .Lang "txtSave" }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Backup and restore -->
                        <div class="card system-card text-center">
                            <div class="card-header">
                                {{ .Lang "txtBackupRestore" }}
                            </div>
                            <div class="card-body text-left sentence-text">
                                {{ .Lang "txtBackupInfo" }}
                            </div>
                            <div class="card-body">
                                <div class="settings-list">
                                    <div class="settings-row">
                                        <span class="settings-label text-ellipsis">{{ .Lang "txtBackup" }}</span>
                                        <label class="system-toggle compact">
                                            <button class="system-button success"
                                                    type="button"
                                                    id="btnBackup">{{ .Lang "txtBackup" }}
                                            </button>
                                        </label>
                                    </div>

                                    <div class="settings-row">
                                        <form id="restoreForm" enctype="multipart/form-data" class="file-form full-width">
                                            <input type="file"
                                                   class="system-input file-input"
                                                   id="backupFile"
                                                   name="backupFile"
                                                   accept=".zip">
                                            <button class="system-button danger" type="submit" id="btnRestore">
                                                {{ .Lang "txtRestore" }}
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stack-gap-4">
                        <!-- RGB Scheduler -->
                        <div class="card system-card text-center">
                            <div class="card-header">
                                {{ .Lang "txtRgbScheduler" }}
                            </div>
                            <div class="card-body">
                                <div class="settings-list">
                                    <div class="settings-row">
                                        <span class="settings-label text-ellipsis">{{ .Lang "txtEnable" }}</span>
                                        <label class="system-toggle compact">
                                            <input type="checkbox" id="rgbControl" {{ if .Scheduler.RGBControl }}checked{{end}}>
                                            <span class="toggle-track"></span>
                                        </label>
                                    </div>

                                    <div class="settings-row">
                                        <span class="settings-label text-ellipsis">{{ .Lang "txtRgbOffTime" }}</span>
                                        <label class="compact">
                                            <input type="time"
                                                   id="rgbOff"
                                                   name="rgbOff"
                                                   value="{{ .Scheduler.RGBOff }}"
                                                   class="system-input system-time compact">
                                        </label>
                                    </div>

                                    <div class="settings-row">
                                        <span class="settings-label text-ellipsis">{{ .Lang "rgbOnTime" }}</span>
                                        <label class="compact">
                                            <input type="time"
                                                   id="rgbOn"
                                                   name="rgbOn"
                                                   value="{{ .Scheduler.RGBOn }}"
                                                   class="system-input system-time compact">
                                        </label>
                                    </div>
                                    <!-- Save profile -->
                                    <div class="settings-row">
                                        <button class="system-button saveRgbControl">{{ .Lang "txtSave" }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Virtual Audio -->
                        <div class="card system-card text-center">
                            <div class="card-header">
                                {{ .Lang "txtVirtualAudio" }}
                            </div>
                            <div class="card-body text-left">
                                {{ if .SystemService }}
                                <span class="settings-label text-warning">{{ .Lang "txtVirtualAudioUnavailable" }}</span>
                                {{ else }}
                                <div class="settings-list">
                                    <div class="settings-row">
                                        <span class="settings-label text-ellipsis">{{ .Lang "txtEnable" }}</span>
                                        <label class="system-toggle compact">
                                            <input type="checkbox" id="virtualAudio" {{ if $audio.Enabled }}checked{{end}}>
                                            <span class="toggle-track"></span>
                                        </label>
                                    </div>

                                    {{ if $audio.Enabled }}
                                    <div class="settings-row">
                                        <span class="settings-label text-ellipsis">{{ .Lang "txtOutputDevice" }}</span>
                                        <label for="outputDevice">
                                            <select id="outputDevice" class="form-select system-select max-width-300 compact outputDevice">
                                                {{ range $k, $v := .OutputDevices }}
                                                <option value="{{ $v.Name }};{{ $v.Desc }};{{ $v.Serial }}" {{ if eq $audio.SinkDesc $v.Desc }}selected{{end}}>{{ $v.Desc }}</option>
                                                {{ end }}
                                            </select>
                                        </label>
                                    </div>
                                    {{ end }}

                                    <!-- Enable virtual audio -->
                                    <div class="settings-row">
                                        <button class="system-button enableVirtualAudio">{{ .Lang "txtSave" }}</button>
                                        {{ if $audio.Enabled }}
                                        <button class="system-button setTargetDevice">{{ .Lang "txtSetTargetDevice" }}</button>
                                        {{ end }}
                                    </div>
                                </div>
                                {{ end }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card system-card text-center">
                        <div class="card-header">
                            {{ .Lang "txtSupportedDevices" }}
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="dataTable compact" id="dataTable" style="width: 100%;">
                                    <thead>
                                    <tr>
                                        <th>{{ .Lang "txtProductId" }}</th>
                                        <th>{{ .Lang "txtProductName" }}</th>
                                        <th>{{ .Lang "txtEnabled" }}</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div><br />
                            <div class="settings-list">
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis warning">{{ .Lang "txtServiceRestartRequired" }}</span>
                                    <label class="system-toggle compact">
                                        <button class="system-button" id="btnSaveSupportedDevices">{{ .Lang "txtSave" }}</button>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
<script src="/static/js/settings.js"></script>
<script src="/static/js/sidebar.js"></script>
{{ if .Dashboard.TemperatureBar }}
<script src="/static/js/temperature-bar.js"></script>
{{ end }}
</body>
</html>
