<!DOCTYPE html>
<html lang="en">
{{ template "head" . }}
<body>

<div class="container-fluid">
    {{ $devs := .Devices }}
    {{ $temperatures := .Temperatures }}
    {{ $device := .Device }}
    {{ $rgbModes := .Device.RGBModes }}
    {{ $rgb := .Rgb }}
    {{ $stand := $device.DeviceProfile.Stand }}
    {{ $deviceProfile := .Device.DeviceProfile }}
    <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 }}

            <!-- ST100 -->
            <div class="row g-4 mb-4 align-items-start">
                <div class="col-md-2">
                    <div class="card system-card text-center">
                        <div class="card-header">
                            {{ .Device.Product }}
                        </div>
                        <div class="card-body">
                            <div class="settings-list">
                                <!-- Firmware -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ .Lang "txtFirmware" }}</span>
                                    <span class="meta-value">{{ .Device.Firmware }}</span>
                                </div>

                                <!-- User profile -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ .Lang "txtProfile" }}</span>
                                    <label for="profiles">
                                        <select id="profiles" class="form-select system-select compact auto-width userProfile" name="userProfile">
                                            {{ range $key, $profile := $device.UserProfiles }}
                                            {{ if $profile.Active }}
                                            <option value="{{ $key }}" selected>{{ $key }}</option>
                                            {{ else }}
                                            <option value="{{ $key }}">{{ $key }}</option>
                                            {{ end }}
                                            {{ end }}
                                        </select>
                                    </label>
                                </div>

                                <!-- RGB Cluster -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ .Lang "txtCluster" }}</span>
                                    <label class="system-toggle compact">
                                        <input type="checkbox" id="toggleRgbCluster" class="toggleRgbCluster" {{ if $deviceProfile.RGBCluster }} checked {{ end }}>
                                        <span class="toggle-track"></span>
                                    </label>
                                </div>

                                <!-- Brightness -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ .Lang "txtBrightness" }}</span>
                                    <div class="system-slider no-padding-top">
                                        <label for="brightnessSlider">
                                            <input type="range" id="brightnessSlider" name="brightnessSlider" min="0" max="100" value="{{ $deviceProfile.BrightnessSlider }}" step="1">
                                        </label>
                                        <div class="slider-value" id="brightnessSliderValue">{{ $deviceProfile.BrightnessSlider }} %</div>
                                    </div>
                                </div>

                                <!-- RGB Profile -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ .Lang "txtRgb" }}</span>
                                    <label for="rgbProfile">
                                        <select id="rgbProfile" class="form-select system-select compact auto-width miscRgbProfile" name="miscRgbProfile">
                                            {{ range $key, $mode := $rgbModes }}
                                            {{ if eq $mode $device.DeviceProfile.RGBProfile }}
                                            <option value="0;{{ $mode }}" selected>{{ $mode }}</option>
                                            {{ else }}
                                            <option value="0;{{ $mode }}">{{ $mode }}</option>
                                            {{ end }}
                                            {{ end }}
                                        </select>
                                    </label>
                                </div>

                                <!-- Delete user profile -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ .Lang "txtDeleteProfile" }}</span>
                                    <label for="deleteUserProfiles">
                                        <select id="deleteUserProfiles" class="form-select system-select compact auto-width deleteUserProfiles" name="deleteUserProfiles">
                                            <option value="none">None</option>
                                            {{ range $key, $profile := $device.UserProfiles }}
                                            {{ if $profile.Active }}
                                            {{ continue }}
                                            {{ else }}
                                            <option value="{{ $key }}">{{ $key }}</option>
                                            {{ end }}
                                            {{ end }}
                                        </select>
                                    </label>
                                </div>

                                <!-- Save profile -->
                                <div class="settings-row">
                                    <button class="system-button center saveUserProfile">{{ .Lang "txtSaveUserProfile" }}</button>
                                    <button class="system-button danger center deleteUserProfile">{{ .Lang "txtDeleteProfile" }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card system-card text-center">
                        <div class="card-body">
                            <!-- Top row (logo) -->
                            <div class="row g-4 mb-4">
                                <div class="col-md-4"></div>
                                <div class="col-md-4">
                                    <div class="card p-3 st100-logo miscColor" id="st100_1">LOGO</div>
                                </div>
                                <div class="col-md-4"></div>
                            </div>

                            <!-- 1st row (3 items) -->
                            <div class="row g-4 mb-4">
                                <!-- Left -->
                                <div class="col-md-4">
                                    <div class="card p-3 st100 miscColor" id="st100_2"></div>
                                </div>

                                <!-- Middle -->
                                <div class="col-md-4">
                                    <div class="card p-3 st100 miscColor" id="st100_3"></div>
                                </div>

                                <!-- Right -->
                                <div class="col-md-4">
                                    <div class="card p-3 st100 miscColor" id="st100_4"></div>
                                </div>
                            </div>

                            <!-- 2nd row (3 items, middle item is color control since it's empty on the actual stand) -->
                            <div class="row g-4 mb-4">
                                <!-- Left -->
                                <div class="col-md-4">
                                    <div class="card p-3 st100 miscColor" id="st100_5"></div>
                                </div>

                                <!-- Middle -->
                                <div class="col-md-4 d-flex align-items-center justify-content-center">
                                    <div class="system-input system-color d-flex flex-column align-items-center gap-2">
                                        <div class="d-flex gap-2 align-items-center">
                                            <input type="color" value="#22c55e" id="miscColor">

                                            <select class="form-select system-select auto-width miscOptions">
                                                <option value="0">{{ .Lang "txtCurrentArea" }}</option>
                                                <option value="1">{{ .Lang "txtCurrentRow" }}</option>
                                                <option value="2">{{ .Lang "txtAllRows" }}</option>
                                            </select>
                                        </div>
                                        <div class="d-flex gap-2">
                                            <button class="system-button" id="applyColors">
                                                {{ .Lang "txtApply" }}
                                            </button>
                                            <button class="system-button" id="saveProfile">
                                                {{ .Lang "txtSave" }}
                                            </button>
                                        </div>

                                    </div>
                                </div>

                                <!-- Right -->
                                <div class="col-md-4">
                                    <div class="card p-3 st100 miscColor" id="st100_6"></div>
                                </div>
                            </div>

                            <!-- 3rd row (3 items) -->
                            <div class="row g-4">

                                <div class="col-md-4">
                                    <div class="card p-3 st100 miscColor" id="st100_7"></div>
                                </div>

                                <!-- Middle -->
                                <div class="col-md-4">
                                    <div class="card p-3 st100 miscColor" id="st100_8"></div>
                                </div>

                                <!-- Right -->
                                <div class="col-md-4">
                                    <div class="card p-3 st100 miscColor" id="st100_9"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card system-card text-center">
                        <div class="card-header">{{ .Lang "txtEqualizer" }}</div>
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-1">
                                    <div class="eq-scale">
                                        <span>+12</span>
                                        <span>0</span>
                                        <span>-12</span>
                                    </div>
                                </div>

                                {{ range $key, $equalizer := $device.DeviceProfile.Equalizers }}
                                <div class="col-md-1">
                                    <div class="eq-band">
                                        <label id="stageValue{{ $key }}">{{ $equalizer.Value }}</label>
                                        <div class="eq-slider-wrap">
                                            <input class="eq-slider" type="range" min="-12" max="12" value="{{ $equalizer.Value }}" id="stage{{ $key }}">
                                        </div>
                                        <label>{{ $equalizer.Name }}</label>
                                    </div>
                                </div>
                                {{ end }}
                            </div>
                        </div>
                        <div class="card-footer card-footer-left">
                            <button class="system-button" id="saveEqualizers">{{ .Lang "txtSave" }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
<script src="/static/js/overview.js"></script>
<script src="/static/js/devices/st100.js"></script>
<script src="/static/js/sidebar.js"></script>
{{ if .Dashboard.TemperatureBar }}
<script src="/static/js/temperature-bar.js"></script>
{{ end }}
</body>
</html>
