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

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

            <!-- LIGHTING NODE PRO -->
            <div class="row g-4 mb-4 align-items-start">
                <div class="col-md-2">
                    <div class="stack-gap-4">
                        <!-- Settings -->
                        <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 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">
                                                {{ range $key, $mode := $rgbModes }}
                                                <option value="{{ $mode }}">{{ $mode }}</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>

                        <!-- 3pin HUB ports -->
                        {{ range $hub := $hubs }}
                        <div class="card system-card text-center">
                            <div class="card-header">LED Port {{ $hub.PortId }}</div>
                            <div class="card-body">
                                <div class="settings-list">
                                    <div class="settings-row">
                                        <span class="settings-label text-ellipsis">{{ $root.Lang "txtDevice" }}</span>
                                        <label class="externalHubDevice">
                                            <select id="externalHubDeviceType{{ $hub.PortId }}" class="form-select system-select compact max-width-120 externalHubDeviceType">
                                                <option value="0">No Devices</option>
                                                {{ range $key, $externalLedDevice := $device.ExternalLedDevice }}
                                                <option value="{{ $externalLedDevice.Index }}" {{ if eq $externalLedDevice.Index $hub.ExternalHubDeviceType }} selected {{ end }}>{{ $externalLedDevice.Name }}</option>
                                                {{ end }}
                                            </select>
                                            <input type="hidden" class="portId" value="{{ $hub.PortId }}">
                                        </label>
                                    </div>

                                    <div class="settings-row">
                                        <span class="settings-label text-ellipsis">{{ $root.Lang "txtAmount" }}</span>
                                        <label class="externalHubDevice">
                                            <select id="externalHubDeviceAmount{{ $hub.PortId }}" class="form-select system-select compact max-width-120 externalHubDeviceAmount">
                                                {{ range $key, $externalLedDeviceAmount := $device.ExternalLedDeviceAmount }}
                                                <option value="{{ $key }}" {{ if eq $key $hub.ExternalHubDeviceAmount }} selected {{ end }}>{{ $externalLedDeviceAmount }}</option>
                                                {{ end }}
                                            </select>
                                            <input type="hidden" class="portId" value="{{ $hub.PortId }}">
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{ end }}
                    </div>
                </div>
                <div class="col-md-10">
                    <!-- Fans -->
                    <div class="row g-4 mb-4 align-items-start">
                        {{ range $device := $devices }}
                        <div class="col-md-2">
                            <div class="card system-card device-selectable" data-info="{{ $device.ChannelId }}">
                                <div class="card-header 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">
                                        {{ if gt $device.LedChannels 0 }}
                                        <!-- RGB -->
                                        <div class="settings-row">
                                            <span class="settings-label text-ellipsis">{{ $root.Lang "txtRgb" }}</span>
                                            <label>
                                                <select class="form-select system-select compact auto-width rgbProfile" 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>
                                        {{ end }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{ end }}
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
<script src="/static/js/overview.js"></script>
<script src="/static/js/sidebar.js"></script>
{{ if .Dashboard.TemperatureBar }}
<script src="/static/js/temperature-bar.js"></script>
{{ end }}
</body>
</html>
