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

<div class="container-fluid">
    {{ $root := . }}
    {{ $devs := .Devices }}
    {{ $temperatures := .Temperatures }}
    {{ $device := .Device }}
    {{ $rgbModes := .Device.RGBModes }}
    {{ $lcdDeviceAmount := .Device.XD5LCDs }}
    {{ $lcdDevices := .Lcd }}
    {{ $lcdImages := .LCDImages }}
    {{ $deviceProfile := .Device.DeviceProfile }}
    {{ $devices := $device.Devices }}
    {{ $rgb := .Rgb }}
    {{ $lcd := .Device.HasLCD }}
    {{ $lcdModes := .Device.LCDModes }}
    {{ $rgbStrips := .Device.RGBStrips }}
    {{ $linkAdapters := .Device.LinkAdapter }}
    {{ $lcdRotations := .Device.LCDRotations }}
    <input type="hidden" id="deviceId" name="deviceId" value="{{ $device.Serial }}">
    <input type="hidden" id="selectedDevices" name="selectedDevices" value="">
    <div class="row">
        <!-- Sidebar -->
        {{ template "sidebar" . }}

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

            <!-- LINK SYSTEM HUB -->
            <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>

                                <!-- 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 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>

                                <!-- OpenRGB -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ .Lang "txtOpenRGB" }}</span>
                                    <label class="system-toggle compact">
                                        <input type="checkbox" class="toggleOpenRGB" {{ if $deviceProfile.OpenRGBIntegration }} checked {{ end }}>
                                        <span class="toggle-track"></span>
                                    </label>
                                </div>

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

                                <!-- Speed Profile -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ .Lang "txtSpeed" }}</span>
                                    <label for="globalSpeedProfile">
                                        <select id="globalSpeedProfile" class="form-select system-select compact auto-width globalTempProfile" name="globalTempProfile">
                                            {{ range $key, $pf := $temperatures }}
                                            {{ if $pf.Hidden }}
                                            {{ continue }}
                                            {{ end }}
                                            <option value="{{ $key }}" {{ if eq $deviceProfile.MultiProfile $key }}selected {{ end }}>{{ $key }}</option>
                                            {{ 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-10">
                    <div class="row g-4 mb-4 align-items-start" id="system-cards">
                        {{ range $device := $devices }}
                        {{ if $device.IsVrmCooler }}
                        {{ continue }}
                        {{ end }}

                        {{ $mainClass := "col-md-2" }}
                        {{ if $device.IsPSU }}
                        {{ $mainClass = "col-md-3" }}
                        {{ end }}

                        <div class="{{ $mainClass }}" id="item_{{ $device.ChannelId }}">
                            <div class="card system-card device-selectable" data-info="{{ $device.ChannelId }}">
                                <div class="card-header drag-handle header-split">
                                    <span class="header-left">
                                        {{ $device.Name }}
                                    </span>
                                    <input type="hidden" class="deviceData" value="{{ $device.ChannelId }}">
                                    <span class="header-right newLabel">
                                        <input type="hidden" class="deviceData" value="{{ $device.ChannelId }}">
                                        <span class="labelValue">{{ $device.Label }}</span>
                                    </span>
                                </div>
                                <div class="card-body">
                                    <div class="settings-list">
                                        {{ $tempLang := $root.Lang "txtTemperature" }}
                                        {{ if $device.ContainsPump }}
                                            {{ $tempLang = $root.Lang "txtLiquid" }}
                                        {{ else if $device.IsCpuBlock }}
                                            {{ $tempLang = $root.Lang "txtLiquid" }}
                                        {{ end }}

                                        <!-- Temperature -->
                                        {{ if gt $device.Temperature 0.00 }}
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $tempLang }}</span>
                                            <span class="meta-value" id="temperature-{{ .DeviceId }}">{{ $device.TemperatureString }}</span>
                                        </div>
                                        {{ end }}

                                        {{ if $device.HasSpeed }}
                                        <!-- Speed -->
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtSpeed" }}</span>
                                            <span class="meta-value" id="speed-{{ .DeviceId }}">{{ $device.Rpm }} RPM</span>
                                        </div>
                                        {{ end }}

                                        <!-- VRM Fan Speed -->
                                        {{ if $device.HasVrmCooler }}
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtVrmFan" }}</span>
                                            <span class="meta-value" id="speed-{{ .VrmCoolerDeviceId }}">{{ $device.VrmRpm }} RPM</span>
                                        </div>
                                        {{ end }}

                                        {{ if $device.HasSpeed }}
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtProfile" }}</span>
                                            <label>
                                                <select class="form-select system-select compact auto-width tempProfile" name="{{ $device.DeviceId }}">
                                                    {{ range $key, $pf := $temperatures }}
                                                    {{ if $pf.Hidden }}
                                                    {{ continue }}
                                                    {{ end }}
                                                    <option value="{{ $device.ChannelId }};{{ $key }}" {{ if eq $device.Profile $key }} selected {{ end }}>{{ $key }}</option>
                                                    {{ end }}
                                                </select>
                                            </label>
                                        </div>
                                        {{ end }}

                                        {{ if $device.HasVrmCooler }}
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtVrmProfile" }}</span>
                                            <label>
                                                <select class="form-select system-select compact auto-width tempProfile" name="{{ $device.VrmCoolerChannelId }}">
                                                    {{ range $key, $pf := $temperatures }}
                                                    {{ if $pf.Hidden }}
                                                    {{ continue }}
                                                    {{ end }}
                                                    <option value="{{ $device.VrmCoolerChannelId }};{{ $key }}" {{ if eq $device.VrmProfile $key }} selected {{ end }}>{{ $key }}</option>
                                                    {{ end }}
                                                </select>
                                            </label>
                                        </div>
                                        {{ end }}

                                        {{ if $device.IsCommanderDuo }}
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtConfigure" }}</span>
                                            <label>
                                                <button class="system-button compact commanderDuoOverride" data-info="{{ $device.ChannelId }}" type="button">{{ $root.Lang "txtConfigure" }}</button>
                                            </label>
                                        </div>
                                        {{ end }}

                                        {{ if $device.IsLinkAdapter }}
                                        <div class="settings-row">
                                            <label class="full-width">
                                                <select class="form-select system-select compact full-width linkAdapterChange" name="{{ $device.DeviceId }}">
                                                    {{ range $key, $value := $linkAdapters }}
                                                    <option value="{{ $device.ChannelId }};{{ $value.Index }}"{{ if eq $value.Index $device.ExternalAdapter }}selected {{ end }}>{{ $value.Name }}</option>
                                                    {{ end }}
                                                </select>
                                            </label>
                                        </div>
                                        {{ end }}

                                        {{ if gt $device.LedChannels 0 }}
                                        <!-- RGB -->
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtRgb" }}</span>
                                            <label>
                                                {{ $rgbClass := "rgbProfile" }}
                                                {{ if $device.IsLinkAdapter }}
                                                {{ $rgbClass = "linkAdapterRgbProfileBulk" }}
                                                {{ end }}
                                                <select class="form-select system-select compact auto-width {{ $rgbClass }}" name="{{ $device.DeviceId }}">
                                                    {{ range $key, $mode := $rgbModes }}
                                                    <option value="{{ $device.ChannelId }};{{ $mode }}" {{ if eq $mode $device.RGB }} selected{{ end }}>{{ $mode }}</option>
                                                    {{ end }}
                                                </select>
                                            </label>
                                        </div>

                                        {{ if not $device.IsLinkAdapter }}
                                        <!-- RGB Override -->
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtRgbOverride" }}</span>
                                            <label>
                                                <button class="system-button compact rgbOverride" data-info="{{ $device.ChannelId }}" type="button">{{ $root.Lang "txtConfigure" }}</button>
                                            </label>
                                        </div>

                                        <!-- RGB per LED -->
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtRgbPerLed" }}</span>
                                            <label>
                                                {{ if $device.ContainsPump }}
                                                <button class="system-button compact rgbPerLed" data-info="{{ $device.Name }};{{ $device.ChannelId }};{{ $device.LedChannels }};0;0;lsh" type="button">{{ $root.Lang "txtConfigure" }}</button>
                                                {{ else }}
                                                <button class="system-button compact rgbPerLed" data-info="{{ $device.Name }};{{ $device.ChannelId }};{{ $device.LedChannels }};0;0;lsh" type="button">{{ $root.Lang "txtConfigure" }}</button>
                                                {{ end }}
                                            </label>
                                        </div>

                                        <!-- Sensors -->
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtSensor" }}</span>
                                            <label>
                                                <button class="system-button compact rgbTemperatureProbe" data-info="{{ $device.ChannelId }}" type="button">{{ $root.Lang "txtConfigure" }}</button>
                                            </label>
                                        </div>
                                        {{ end }}

                                        {{ end }}

                                        <!-- LINK Adapter data -->
                                        {{ if and $device.IsLinkAdapter (gt $device.LedChannels 0) }}
                                        {{ range $subDeviceId, $subDevice := $device.SubDevices }}
                                        <div class="settings-row row-dark">
                                            <span class="settings-label text-ellipsis">{{ $subDevice.Name }}</span>
                                            <label>
                                                <select class="form-select system-select compact max-width-100 linkAdapterRgbProfile" name="{{ $device.DeviceId }}">
                                                    {{ range $key, $mode := $rgbModes }}
                                                    {{ $adapterRgbProfileDevice := index $deviceProfile.SubDeviceRGBProfiles $device.ChannelId }}
                                                    {{ $adapterRgbProfile := index $adapterRgbProfileDevice $subDeviceId }}
                                                    <option value="{{ $device.ChannelId }};{{ $subDeviceId }};{{ $mode }}"{{ if eq $mode $adapterRgbProfile }} selected {{ end }}>{{ $mode }}</option>
                                                    {{ end }}
                                                </select>
                                            </label>
                                        </div>

                                        <!-- RGB Override (LINK ADAPTER) -->
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtRgbOverride" }}</span>
                                            <label>
                                                <button class="system-button compact rgbOverrideLinkAdapter" data-info="{{ $device.ChannelId }};{{ $subDeviceId }}" type="button">{{ $root.Lang "txtConfigure" }}</button>
                                            </label>
                                        </div>

                                        <!-- RGB per LED (LINK ADAPTER) -->
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtRgbPerLed" }}</span>
                                            <label>
                                                <button class="system-button compact rgbPerLed" data-info="{{ $subDevice.Name }};{{ $device.ChannelId }};{{ $subDevice.Total }};{{ $subDeviceId }};1;lsh" type="button">{{ $root.Lang "txtConfigure" }}</button>
                                            </label>
                                        </div>
                                        {{ end }}
                                        {{ end }}


                                        <!-- LCD -->
                                        {{ if and $lcd $device.ContainsPump }}
                                        {{ $lcdMode := index $deviceProfile.LCDModes $device.ChannelId }}
                                        {{ $lcdRotation := index $deviceProfile.LCDRotations $device.ChannelId }}
                                        {{ $lcdDevs := index $deviceProfile.LCDDevices $device.ChannelId }}
                                        {{ $lcdImage := index $deviceProfile.LCDImages $device.ChannelId }}

                                        {{ if gt $lcdDeviceAmount 1 }}
                                        <!-- LCD Device selector if multiple LCDs are available -->
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtLcdDevice" }}</span>
                                            <label>
                                                <select class="form-select system-select compact auto-width lcdDevices" name="{{ $device.DeviceId }}">
                                                    {{ range $value := $lcdDevices }}
                                                    {{ if $value.AIO }}
                                                    {{ continue }}
                                                    {{ end }}

                                                    <option value="{{ $device.ChannelId }};{{ $value.Serial }}"{{ if eq $lcdDevs $value.Serial }} selected {{ end }}>{{ $value.Product }}</option>
                                                    {{ end }}
                                                </select>
                                            </label>
                                        </div>
                                        {{ end }}

                                        <!-- LCD Modes -->
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtLcdMode" }}</span>
                                            <label>
                                                <select class="form-select system-select compact max-width-100 lcdMode" name="{{ $device.DeviceId }}">
                                                    {{ range $key, $value := $lcdModes }}
                                                    <option value="{{ $device.ChannelId }};{{ $key }}"{{ if eq $key $lcdMode }} selected {{ end }}>{{ $value }}</option>
                                                    {{ end }}
                                                </select>
                                            </label>
                                        </div>

                                        <!-- LCD Image -->
                                        <div class="settings-row lcdImagesHolder" style="{{ if ne $lcdMode 10 }}display:none;{{ end }}">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtLcdImage" }}</span>
                                            <label>
                                                <select class="form-select system-select compact max-width-100 lcdImages" name="{{ $device.DeviceId }}">
                                                    {{ range $key, $value := $lcdImages }}
                                                    <option value="{{ $device.ChannelId }};{{ $value.Name }}"{{ if eq $value.Name $lcdImage }} selected {{ end }}>{{ $value.Name }}</option>
                                                    {{ end }}
                                                </select>
                                            </label>
                                        </div>

                                        <!-- LCD Rotation -->
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtLcdRotation" }}</span>
                                            <label>
                                                <select class="form-select system-select compact max-width-100 lcdRotation" name="{{ $device.DeviceId }}">
                                                    {{ range $key, $value := $lcdRotations }}
                                                    <option value="{{ $device.ChannelId }};{{ $key }}"{{ if eq $key $lcdRotation }} selected {{ end }}>{{ $value }}</option>
                                                    {{ end }}
                                                </select>
                                            </label>
                                        </div>

                                        <!-- LCD end -->
                                        {{ end }}

                                        {{ if $device.IsPSU }}
                                        <!-- PSU -->
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtPowerOut" }}</span>
                                            <span class="meta-value text-right" id="powerOut-{{ $device.ChannelId }}">{{ $device.PowerOutString }} W</span>
                                        </div>

                                        {{ range $vk, $val := $device.Volts }}
                                        {{ $railName := "N/A" }}

                                        {{ if eq $vk 0 }}
                                            {{ $railName = $root.Lang "txt3VRail" }}
                                        {{ else if eq $vk 1 }}
                                            {{ $railName = $root.Lang "txt5VRail" }}
                                        {{ else if eq $vk 2 }}
                                            {{ $railName = $root.Lang "txt12VRail" }}
                                        {{ end }}

                                        {{ $volts := index $device.Volts $vk }}
                                        {{ $amps := index $device.Amps $vk }}
                                        {{ $watts := index $device.Watts $vk }}

                                        <div class="settings-row settings-row-equal">
                                            <span class="settings-label text-ellipsis">{{ $railName }}</span>
                                            <span class="meta-value text-right" id="volts-{{ $vk }}">{{ $volts.ValueString }} V</span>
                                            <span class="meta-value text-right" id="amps-{{ $vk }}">{{ $amps.ValueString }} A</span>
                                            <span class="meta-value text-right" id="watts-{{ $vk }}">{{ $watts.ValueString }} W</span>
                                        </div>


                                        {{ end }}

                                        {{ end }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{ end }}
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
<script src="/static/js/overview.js"></script>
<script src="/static/js/draggable.js"></script>
<script src="/static/js/sidebar.js"></script>
{{ if .Dashboard.TemperatureBar }}
<script src="/static/js/temperature-bar.js"></script>
{{ end }}
</body>
</html>
