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

<div class="container-fluid">
    {{ $root := . }}
    {{ $devs := .Devices }}
    {{ $temperatures := .Temperatures }}
    {{ $device := .Device }}
    {{ $deviceProfile := .Device.DeviceProfile }}
    {{ $txtConfigure := .Lang "txtConfigure" }}
    <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 }}

            <!-- XENEON EDGE -->
            <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">
                                <!-- User profile -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ .Lang "txtProfile" }}</span>
                                    <label for="profiles">
                                        <select id="profiles" class="system-select auto-width compact 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>

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

                            <div class="settings-list">
                                <!-- Widgets -->
                                {{ range $key, $widget := $deviceProfile.Widgets }}
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ $widget.Name }}</span>
                                    <label>
                                        <button class="system-button center configureWidget" data-info="{{ $widget.Id }}">{{ $txtConfigure }}</button>
                                    </label>
                                </div>
                                {{ end }}
                            </div>
                        </div>
                    </div>
                </div>
                {{ $rows := .Slice
                (.Slice (.Slice 4 1) (.Slice 2 3) (.Slice 2 4) (.Slice 4 9))
                (.Slice (.Slice 4 0) (.Slice 2 5) (.Slice 2 6) (.Slice 4 10))
                (.Slice (.Slice 4 2) (.Slice 2 7) (.Slice 2 8) (.Slice 4 11))
                }}

                <div class="col-md-10">
                    <div class="card system-card text-center">
                        <div class="card-body">

                            {{ range $rowIndex, $row := $rows }}
                            <div class="row g-4{{ if ne $rowIndex 2 }} mb-4{{ end }}">

                                {{ range $item := $row }}
                                {{ $col := index $item 0 }}
                                {{ $area := index $item 1 }}

                                <div class="col-md-{{ $col }}">
                                    {{ if ne $area 0 }}
                                    <div class="card p-3 xeneon-edge-panel d-flex justify-content-center align-items-center" style="min-height: 120px;">
                                        <div class="d-flex flex-column align-items-center gap-2">
                                            <div class="d-flex gap-2 align-items-center">
                                                <select class="form-select system-select auto-width widget-area-select" data-area="{{ $area }}">
                                                    <option value="0">None</option>

                                                    {{ range $key, $widget := $deviceProfile.WidgetAreas }}
                                                    {{ if $widget.Widget }}
                                                    {{ if eq $key $area }}
                                                    <option value="{{ $key }}" selected>{{ $widget.Widget.Name }}</option>
                                                    {{ else }}
                                                    <option value="{{ $key }}">{{ $widget.Widget.Name }}</option>
                                                    {{ end }}
                                                    {{ end }}
                                                    {{ end }}
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    {{ end }}
                                </div>
                                {{ end }}
                            </div>
                            {{ end }}
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
<script src="/static/js/overview.js"></script>
<script src="/static/js/mouse.js"></script>
<script src="/static/js/sidebar.js"></script>
{{ if .Dashboard.TemperatureBar }}
<script src="/static/js/temperature-bar.js"></script>
{{ end }}
</body>
</html>
