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

<div class="container-fluid">
    {{ $devs := .Devices }}
    {{ $device := .Device }}
    {{ $root := . }}
    <input type="hidden" id="profile" name="profile" value="">
    <div class="row">
        <!-- Sidebar -->
        {{ template "sidebar" . }}

        <!-- Main -->
        <main class="main-content p-4">
            <!-- Temperature bar -->
            {{ if .Dashboard.TemperatureBar }}
            {{ template "temperature-bar" . }}
            {{ end }}
            <div class="modal fade text-start" id="deleteTempModal" tabindex="-1" aria-labelledby="newTempModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-custom modal-600">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">{{ .Lang "txtDeleteTempProfile" }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body delete-warning">
                            <div class="warning-icon">
                                <i class="bi bi-exclamation-triangle-fill"></i>
                            </div>
                            <div class="warning-text">
                                <h6 class="warning-title">
                                    {{ .Lang "txtDeleteTempProfile" }}
                                </h6>
                                <p class="warning-message">
                                    {{ .Lang "txtDeleteTempProfileConfirm" }}
                                </p>
                                <div class="warning-box">
                                    <i class="bi bi-info-circle"></i>
                                    <span>
                                        {{ .Lang "txtDeleteTempProfileDesc" }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="system-button btn-secondary" type="button" data-bs-dismiss="modal">{{ .Lang "txtClose" }}</button>
                            <button class="system-button danger" type="button" id="delete">{{ .Lang "txtDelete" }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade text-start" id="newTempModal" tabindex="-1" aria-labelledby="newTempModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-custom modal-600">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="newTempModalLabel">{{ .Lang "txtNewTempProfile" }}</h5>
                            <button class="btn-close btn-close-white" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body modal-title">
                            <div class="settings-list">
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ $root.Lang "txtProfileName" }}</span>
                                    <div class="system-input text-input">
                                        <label for="profileName">
                                            <input type="text" id="profileName" placeholder="{{ $root.Lang "txtProfileName" }}">
                                        </label>
                                    </div>
                                </div>

                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">
                                        {{ .Lang "txtSensor" }}
                                        <i style="cursor: pointer;padding-top: 4px;" class="bi bi-info-circle-fill svg-icon svg-icon-sm svg-icon-heavy sensorInfoToggle"></i>
                                    </span>
                                    <label for="sensor">
                                        <select class="form-select system-select auto-width tempProfile" name="tempProfile" id="sensor">
                                            <option value="0" selected>CPU</option>
                                            <option value="1">GPU</option>
                                            <option value="2">Liquid Temperature (AIO)</option>
                                            <option value="3">Storage Temperature</option>
                                            <option value="4">Temperature Probe</option>
                                            <option value="5">CPU + GPU</option>
                                            <option value="6">External HWMON</option>
                                            <option value="7">External binary</option>
                                            <option value="8">Multi GPU</option>
                                            <option value="9">Global Temperature Probe</option>
                                            <option value="10">PSU</option>
                                            <option value="11">Multi GPUs</option>
                                        </select>
                                    </label>
                                </div>

                                {{ if .TemperatureProbes }}
                                <div class="settings-row" id="temperature-probe-data">
                                    <label for="probeData" class="full-width">
                                        <select class="system-select full-width tempProfile" id="probeData">
                                            <option value="0;0" selected>Select probe</option>
                                            {{ range .TemperatureProbes }}
                                            {{ range . }}
                                            <option value="{{ .Serial }};{{ .ChannelId }}">{{ .Product }} - {{ .Name }} ({{ .Label }})</option>
                                            {{ end }}
                                            {{ end }}
                                        </select>
                                    </label>
                                </div>
                                {{ end }}

                                {{ if .HwMonSensors }}
                                <div class="settings-row" id="hwmon-sensors-probe-data">
                                    <label for="probeData" class="full-width">
                                        <select class="system-select full-width tempProfile" id="hwmon-probeData">
                                            <option value="0;0" selected>Select sensor</option>
                                            {{ range .HwMonSensors }}
                                            <option value="{{ .HwmonName }};{{ .InputName }};{{ .SensorName }}">{{ .SensorName }} - {{ .Label }} - {{ .TempC }} °C</option>
                                            {{ end }}
                                        </select>
                                    </label>
                                </div>
                                {{ end }}

                                <div class="settings-row" id="binary-sensors-probe-data">
                                    <div class="system-input text-input">
                                        <label for="binary-probeData" class="full-width">
                                            <input type="text" id="binary-probeData" placeholder="Path to binary">
                                        </label>
                                    </div>
                                </div>

                                {{ if .SystemInfo.Storage }}
                                <div class="settings-row" id="storage-data">
                                    <label for="hwmonDeviceId" class="full-width">
                                        <select class="system-select full-width tempProfile" id="hwmonDeviceId">
                                            {{ range .SystemInfo.Storage }}
                                            <option value="{{ .Key }}">{{ .Model }}</option>
                                            {{ end }}
                                        </select>
                                    </label>
                                </div>
                                {{ end }}

                                {{ if .SystemInfo.GPU }}
                                <div class="settings-row" id="gpu-data">
                                    <label for="gpuIndex" class="full-width">
                                        <select class="system-select full-width tempProfile" id="gpuIndex">
                                            {{ range .SystemInfo.GPU }}
                                            <option value="{{ .Index }}">{{ .Model }} - {{ .TemperatureString }}</option>
                                            {{ end }}
                                        </select>
                                    </label>
                                </div>
                                {{ end }}

                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ .Lang "txtStaticTemp" }}</span>
                                    <label class="system-toggle compact">
                                        <input type="checkbox" class="staticCheckbox" id="staticCheckbox">
                                        <span class="toggle-track"></span>
                                    </label>
                                </div>

                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">
                                        {{ .Lang "txtZeroRpm" }}
                                        <i style="cursor: pointer;" class="bi bi-info-circle-fill svg-icon svg-icon-sm svg-icon-heavy zeroRpmToggle"></i>
                                    </span>
                                    <label class="system-toggle compact">
                                        <input type="checkbox" class="zeroRpmCheckbox" id="zeroRpmCheckbox">
                                        <span class="toggle-track"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">{{ .Lang "txtClose" }}</button>
                            <button class="btn btn-primary" type="button" id="btnSaveNewProfile">{{ .Lang "txtCreate" }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Temperature Profiles -->
            <div class="row g-4 mb-4 align-items-start">
                <div class="col-md-2">
                    <div class="card system-card margin-top-20-all newTemp" data-bs-toggle="modal" data-bs-target="#newTempModal">
                        <div class="card-header">
                            {{ .Lang "txtNewProfile" }}
                        </div>
                        <div class="card-body">
                            {{ .Lang "txtCreateNewProfile" }}
                        </div>
                    </div>

                    {{ range $key, $value := .Temperatures }}
                    {{ if eq $value.Hidden true }}
                    {{ continue }}
                    {{ else if eq $key "Normal" }}
                    {{ continue }}
                    {{ else if eq $key "Performance" }}
                    {{ continue }}
                    {{ else if eq $key "Quiet" }}
                    {{ continue }}
                    {{ else }}

                    <div class="card system-card margin-top-20-all tempProfiles" id="{{ $key }}">
                        <div class="card-header">
                            {{ $key }}
                        </div>
                        <div class="card-body">
                            <div class="settings-list">
                                <!-- Profile points -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ $root.Lang "txtModes" }}</span>
                                    <span class="settings-label">{{ len $value.Profiles }}</span>
                                </div>

                                <!-- Sensor -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ $root.Lang "txtSensor" }}</span>
                                    <span class="settings-label">{{ $value.SensorString }}</span>
                                </div>
                                
                                <!-- Zero RPM -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ $root.Lang "txtZeroRpm" }}</span>
                                    <span class="settings-label">{{ if $value.ZeroRpm }}Enabled{{ else }}Disabled{{ end }}</span>
                                </div>

                                <!-- Delete profile -->
                                <div class="settings-row">
                                    <span class="settings-label text-ellipsis">{{ $root.Lang "txtDeleteProfile" }}</span>
                                    <span class="settings-label">
                                        <span title="Delete Profile"
                                              class="system-button danger delete-speed-profile"
                                              data-bs-toggle="modal"
                                              data-bs-target="#deleteTempModal"
                                              data-info="{{ $key }}">
                                            <i class="bi bi-trash svg-icon svg-icon-sm svg-icon-heavy"></i>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{ end }}
                    {{ end }}
                </div>
                <div class="col-md-5 temp-graph-container graph-window">
                    <div class="card system-card">
                        <div class="card-body">
                            <div class="temp-graph-canvas-container">
                                <div style="flex: 1;">
                                    <canvas id="graphPump" class="temp-graph-canvas"></canvas>
                                    <button class="system-button btn-secondary" type="button" id="updatePump">{{ .Lang "txtSave" }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-5 temp-graph-container graph-window">
                    <div class="card system-card">
                        <div class="card-body">
                            <div class="temp-graph-canvas-container">
                                <div style="flex: 1;">
                                    <canvas id="graphFans" class="temp-graph-canvas"></canvas>
                                    <button class="system-button btn-secondary" type="button" id="updateFans">{{ .Lang "txtSave" }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
<script src="/static/js/temperature.js"></script>
<script src="/static/js/sidebar.js"></script>
{{ if .Dashboard.TemperatureBar }}
<script src="/static/js/temperature-bar.js"></script>
{{ end }}
</body>
</html>
