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

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

            {{ if eq .Device.Connected false }}
            {{ template "404-no-device" . }}
            {{ else }}

            <!-- K70 PRO MINI -->
            <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 Profile -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ .Lang "txtRgb" }}</span>
                                    <label for="keyboardRgbProfile">
                                        {{ $rgbPf := $device.DeviceProfile.RGBProfile }}

                                        {{ if eq .Device.Usb false }}
                                        {{ $rgbPf = $device.DeviceProfile.SlipstreamRGBProfile }}
                                        {{ end }}

                                        <select id="keyboardRgbProfile" class="form-select system-select compact auto-width keyboardRgbProfile" name="keyboardRgbProfile">
                                            {{ range $key, $mode := $device.RGBModes }}
                                            {{ if eq $root.Device.Usb false }}
                                            <!-- Slipstream -->
                                            <option value="0;{{ $key }}" {{ if eq $key $rgbPf }} selected {{ end }}>{{ $mode }}</option>
                                            {{ else }}
                                            <!-- USB -->
                                            <option value="0;{{ $mode }}" {{ if eq $mode $rgbPf }} selected {{ end }}>{{ $mode }}</option>
                                            {{ end }}
                                            {{ end }}
                                        </select>
                                    </label>
                                </div>

                                <!-- Layout -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ .Lang "txtLayout" }}</span>
                                    <label for="keyLayout">
                                        <select id="keyLayout" class="form-select system-select compact auto-width keyLayout" name="keyLayout">
                                            {{ range $layout := $device.Layouts }}
                                            <option value="{{ $layout }}" {{ if eq $device.DeviceProfile.Layout $layout }} selected {{ end }}>{{ $layout }}</option>
                                            {{ end }}
                                        </select>
                                    </label>
                                </div>

                                {{ if .Device.Usb }}
                                <!-- Pulling Rate -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ .Lang "txtPollingRate" }}</span>
                                    <label for="keyboardPollingRate">
                                        <select id="keyboardPollingRate" class="form-select system-select compact max-width-120 keyboardPollingRate" name="keyboardPollingRate">
                                            {{ range $key, $pr := $device.PollingRates }}
                                            <option value="{{ $key }}" {{ if eq $key $device.DeviceProfile.PollingRate }} selected {{ end }}>{{ $pr }}</option>
                                            {{ end }}
                                        </select>
                                    </label>
                                </div>
                                {{ end }}

                                {{ if eq .Device.Usb false }}
                                <!-- Sleep -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ .Lang "txtSleepTimer" }}</span>
                                    <label for="sleepTimer">
                                        <select id="sleepTimer" class="system-select auto-width compact sleepModes" name="sleepModes">
                                            {{ range $key, $sleepMode := $device.SleepModes }}
                                            {{ if eq $device.DeviceProfile.SleepMode $key }}
                                            <option value="{{ $key }}" selected>{{ $sleepMode }}</option>
                                            {{ else }}
                                            <option value="{{ $key }}">{{ $sleepMode }}</option>
                                            {{ end }}
                                            {{ end }}
                                        </select>
                                    </label>
                                </div>
                                {{ end }}

                                <!-- Performance -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ .Lang "txtPerformance" }}</span>
                                    <label for="keyboardPerformance">
                                        <button class="system-button compact keyboardPerformance" id="keyboardPerformance" type="button">{{ $root.Lang "txtConfigure" }}</button>
                                    </label>
                                </div>

                                {{ if .Device.Usb }}
                                <!-- 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>
                                {{ end }}

                                <!-- Delete user profile -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ .Lang "txtDeleteProfile" }}</span>
                                    <label for="deleteUserProfiles">
                                        <select id="deleteUserProfiles" class="system-select auto-width compact 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="card system-card text-center">
                        <!-- Keyboard -->
                        <div class="card-body">
                            <div class="keyboard {{ $device.UIKeyboard }}" style="margin-top: 10px;margin-bottom: 10px;">
                                {{ range $index, $keys := $keyboard.Row }}

                                <!-- Vars -->
                                {{ $rowClass := $device.UIKeyboardRow }}
                                {{ $marginTop := "" }}

                                <!-- Row config -->
                                {{ if eq $keys.Top 65 }}
                                {{ $marginTop = "keyboard-margin-top" }}
                                {{ else if gt (len $keys.Css) 0 }}
                                {{ $rowClass := $keys.Css }}
                                {{ end }}

                                <div class="{{ $rowClass }} {{ $marginTop }}" style="{{ .OverrideCss }}">
                                    {{ range $index, $keys := .Keys }}

                                    <!-- Empty keys -->
                                    {{ range $index, $keyEmpty := $keys.KeyEmpty }}
                                    <div class="{{ $keyEmpty }}"></div>
                                    {{ end }}

                                    <!-- Empty area -->
                                    {{ range $amount := $keys.Spacing }}
                                    <div class="keyboard-key-empty"></div>
                                    {{ end }}

                                    <!-- Key css -->
                                    {{ $keyCss := "keyboard-key" }}
                                    {{ if gt (len $keys.KeySpace) 0 }}
                                    {{ $keyCss = $keys.KeySpace }}
                                    {{ end }}

                                    <!-- Key color -->
                                    {{ $color := $keys.Color }}
                                    {{ if eq $root.Device.Usb false }}
                                    {{ $color = $keyboard.Color }}
                                    {{ end }}

                                    <!-- Key -->
                                    <div class="{{ $keyCss }} keyboardColor device-selectable {{ $keys.Css }}" data-info="{{ $index }};{{ $color.Red }};{{ $color.Green }};{{ $color.Blue }}">
                                        {{ if $keys.NoColor }}
                                        <span class="key-no-color">{{ $keys.KeyName }}</span>
                                        {{ else }}
                                        <span class="key-color-custom" style="color: rgba({{ $color.Red }}, {{ $color.Green }}, {{ $color.Blue }}, 1);">{{ $keys.KeyName }}</span>
                                        {{ end }}
                                    </div>
                                    {{ end }}
                                </div>
                                {{ end }}
                            </div>
                        </div>

                        <!-- Keyboard control -->
                        <div class="card-footer footer-split">
                            <!-- Color control -->
                            <div class="footer-left">
                                <div class="settings-list">
                                    <div class="settings-row">
                                        <div class="system-color compact">
                                            <label for="keyColor">
                                                <input type="color" id="keyColor">
                                            </label>
                                        </div>
                                        <label for="keyOptions">
                                            <select id="keyOptions" class="form-select system-select compact auto-width keyOptions" name="keyOptions">
                                                {{ if .Device.Usb }}
                                                <option value="0">{{ .Lang "txtCurrentKey" }}</option>
                                                <option value="1">{{ .Lang "txtCurrentRow" }}</option>
                                                <option value="3">{{ .Lang "txtSelectedKeys" }}</option>
                                                {{ end }}
                                                <option value="2">{{ .Lang "txtAllKeys" }}</option>
                                            </select>
                                        </label>
                                        <button class="system-button center compact" id="applyColors">{{ .Lang "txtApply" }}</button>
                                    </div>
                                </div>
                            </div>

                            <!-- Key / Profile control -->
                            <div class="footer-right">
                                <div class="settings-list">
                                    <div class="settings-row">
                                        <button class="system-button center compact openKeyAssignmentsWithModifier">{{ .Lang "txtKeyAssignments" }}</button>
                                        <label for="keyOptions">
                                            <select id="keyboardProfile" class="form-select system-select compact auto-width keyboardProfile" name="keyboardProfile">
                                                {{ range $key := $device.DeviceProfile.Profiles }}
                                                <option value="{{ $key }}" {{ if eq $key $device.DeviceProfile.Profile }} selected {{ end }}>{{ $key }}</option>
                                                {{ end }}
                                            </select>
                                        </label>
                                        <button class="system-button center compact" id="saveAsProfile">{{ .Lang "txtSaveAs" }}</button>
                                        <button class="system-button center compact" id="saveProfile">{{ .Lang "txtSave" }}</button>
                                        <button class="system-button danger center compact" id="deleteProfile">{{ .Lang "txtDelete" }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{ end }}
        </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>
