<!--
  - CoolerControl - monitor and control your cooling and other devices
  - Copyright (c) 2021-2025  Guy Boldon and contributors
  -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU General Public License as published by
  - the Free Software Foundation, either version 3 of the License, or
  - (at your option) any later version.
  -
  - This program is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  - GNU General Public License for more details.
  -
  - You should have received a copy of the GNU General Public License
  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

<script setup lang="ts">
// @ts-ignore
import SvgIcon from '@jamescoyle/vue-icon'
import {
    mdiCheck,
    mdiContentCopy,
    mdiDnsOutline,
    mdiExport,
    mdiFormatListBulleted,
    mdiImport,
    mdiMonitor,
    mdiRestart,
    mdiViewQuiltOutline,
} from '@mdi/js'
import { computed, inject, onMounted, onUnmounted, type Ref, ref, watch } from 'vue'
import { useDeviceStore } from '@/stores/DeviceStore.ts'
import { useSettingsStore } from '@/stores/SettingsStore.ts'
import { useConfirm } from 'primevue/useconfirm'
import { useToast } from 'primevue/usetoast'
import {
    CustomThemeSettings,
    defaultCustomTheme,
    StartupPage,
    ThemeMode,
} from '@/models/UISettings.ts'
import { CoolerControlDeviceSettingsDTO } from '@/models/CCSettings.ts'
import Tabs from 'primevue/tabs'
import Tab from 'primevue/tab'
import TabList from 'primevue/tablist'
import TabPanels from 'primevue/tabpanels'
import TabPanel from 'primevue/tabpanel'
import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'radix-vue'
import { ElSwitch } from 'element-plus'
import 'element-plus/es/components/switch/style/css'
import 'element-plus/es/components/tree/style/css'
import Listbox, { ListboxChangeEvent } from 'primevue/listbox'
import Select from 'primevue/select'
import InputNumber from 'primevue/inputnumber'
import InputText from 'primevue/inputtext'
import Button from 'primevue/button'
import { Color } from '@/models/Device.ts'
import { Emitter, EventType } from 'mitt'
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
import { useI18n } from 'vue-i18n'
import { api as fullscreenApi } from 'vue-fullscreen'
import _ from 'lodash'
import AppSettingsDevices from '@/layout/AppSettingsDevices.vue'
import CCColorPicker from '@/components/CCColorPicker.vue'
import { useThemeColorsStore } from '@/stores/ThemeColorsStore.ts'

const deviceStore = useDeviceStore()
const settingsStore = useSettingsStore()
const colorStore = useThemeColorsStore()
const confirm = useConfirm()
const toast = useToast()
const emitter: Emitter<Record<EventType, any>> = inject('emitter')!

interface Props {
    tabNumber?: string
}

const props = defineProps<Props>()
const tabValue = ref(props.tabNumber != null && props.tabNumber ? props.tabNumber : '0')

const { t } = useI18n()

const tabStyle = computed(() => {
    let tabCount = 3
    if (deviceStore.isQtApp()) {
        tabCount += 1
    }
    const width = 100 / tabCount
    return `width: ${width}%`
})

const isFullScreen = ref(fullscreenApi.isFullscreen)
if (deviceStore.isQtApp()) {
    // @ts-ignore
    const ipc = window.ipc
    isFullScreen.value = await ipc.getIsFullScreen()
    ipc.fullScreenToggled.connect((fullscreen: boolean) => {
        isFullScreen.value = fullscreen
    })
}
const toggleFullScreen = async (_enable: string | number | boolean): Promise<void> => {
    await fullscreenApi.toggle(null, {
        callback: async (fullscreen: boolean) => {
            isFullScreen.value = fullscreen
            if (deviceStore.isQtApp()) {
                await deviceStore.sleep(50)
                // @ts-ignore
                const ipc = window.ipc
                isFullScreen.value = await ipc.getIsFullScreen()
            }
        },
    })
}

// Use computed to respond to language changes
const themeModeOptions = computed(() => [
    { value: ThemeMode.SYSTEM, label: t('layout.settings.themeMode.system') },
    { value: ThemeMode.DARK, label: t('layout.settings.themeMode.dark') },
    { value: ThemeMode.LIGHT, label: t('layout.settings.themeMode.light') },
    {
        value: ThemeMode.HIGH_CONTRAST_DARK,
        label: t('layout.settings.themeMode.highContrastDark'),
    },
    {
        value: ThemeMode.HIGH_CONTRAST_LIGHT,
        label: t('layout.settings.themeMode.highContrastLight'),
    },
    { value: ThemeMode.CUSTOM, label: t('layout.settings.themeMode.custom') },
])
const changeThemeMode = async (event: ListboxChangeEvent) => {
    if (event.value === null) {
        return // do not update on unselect
    }

    // Save the original theme mode
    const previousThemeMode = settingsStore.themeMode

    // Update the theme mode in settings store
    settingsStore.themeMode = event.value

    // Dynamically apply theme changes without page reload
    settingsStore.applyThemeMode()

    // Display success notification
    toast.add({
        severity: 'success',
        summary: t('common.success'),
        detail: t('layout.settings.themeChangeSuccess'),
        life: 2000,
    })

    // Trigger theme change event to notify other components
    window.dispatchEvent(
        new CustomEvent('theme-changed', {
            detail: {
                previousTheme: previousThemeMode,
                currentTheme: event.value,
            },
        }),
    )
}
const lineThicknessOptions = ref([
    { optionSize: 1, value: 0.5 },
    { optionSize: 2, value: 1.0 },
    { optionSize: 3, value: 1.5 },
    { optionSize: 4, value: 2.0 },
    { optionSize: 6, value: 3.0 },
])
const startupPageOptions = computed(() => [
    { value: StartupPage.AppInfo, label: t('models.startupPage.appInfo') },
    { value: StartupPage.HomeDashboard, label: t('models.startupPage.homeDashboard') },
    { value: StartupPage.Controls, label: t('models.startupPage.controls') },
])
const customThemeAccent: Ref<Color> = ref(colorStore.rgbToHex(settingsStore.customTheme.accent))
const customThemeBgOne: Ref<Color> = ref(colorStore.rgbToHex(settingsStore.customTheme.bgOne))
const customThemeBgTwo: Ref<Color> = ref(colorStore.rgbToHex(settingsStore.customTheme.bgTwo))
const customThemeBorder: Ref<Color> = ref(colorStore.rgbToHex(settingsStore.customTheme.borderOne))
const customThemeText: Ref<Color> = ref(colorStore.rgbToHex(settingsStore.customTheme.textColor))
const customThemeTextSecondary: Ref<Color> = ref(
    colorStore.rgbToHex(settingsStore.customTheme.textColorSecondary),
)

const setNewColorAccent = (newHexColor: Color): void => {
    customThemeAccent.value = newHexColor
    settingsStore.customTheme.accent = colorStore.hexToRgbThemeString(newHexColor)
    document.documentElement.style.setProperty('--colors-accent', settingsStore.customTheme.accent)
    colorStore.reLoadThemeColors()
}
const setNewColorBgOne = (newHexColor: Color): void => {
    customThemeBgOne.value = newHexColor
    settingsStore.customTheme.bgOne = colorStore.hexToRgbThemeString(newHexColor)
    document.documentElement.style.setProperty('--colors-bg-one', settingsStore.customTheme.bgOne)
    colorStore.reLoadThemeColors()
}
const setNewColorBgTwo = (newHexColor: Color): void => {
    customThemeBgTwo.value = newHexColor
    settingsStore.customTheme.bgTwo = colorStore.hexToRgbThemeString(newHexColor)
    document.documentElement.style.setProperty('--colors-bg-two', settingsStore.customTheme.bgTwo)
    colorStore.reLoadThemeColors()
}
const setNewColorBorder = (newHexColor: Color): void => {
    customThemeBorder.value = newHexColor
    settingsStore.customTheme.borderOne = colorStore.hexToRgbThemeString(newHexColor)
    document.documentElement.style.setProperty(
        '--colors-border-one',
        settingsStore.customTheme.borderOne,
    )
    colorStore.reLoadThemeColors()
}
const setNewColorText = (newHexColor: Color): void => {
    customThemeText.value = newHexColor
    settingsStore.customTheme.textColor = colorStore.hexToRgbThemeString(newHexColor)
    document.documentElement.style.setProperty(
        '--colors-text-color',
        settingsStore.customTheme.textColor,
    )
    colorStore.reLoadThemeColors()
}
const setNewColorTextSecondary = (newHexColor: Color): void => {
    customThemeTextSecondary.value = newHexColor
    settingsStore.customTheme.textColorSecondary = colorStore.hexToRgbThemeString(newHexColor)
    document.documentElement.style.setProperty(
        '--colors-text-color-secondary',
        settingsStore.customTheme.textColorSecondary,
    )
    colorStore.reLoadThemeColors()
}

const blacklistedDevices: Ref<Array<CoolerControlDeviceSettingsDTO>> = ref([])
for (const deviceSettings of settingsStore.ccBlacklistedDevices.values()) {
    blacklistedDevices.value.push(deviceSettings)
}
const applyGenericDaemonChange = _.debounce(
    () =>
        confirm.require({
            message: t('layout.settings.applySettingAndRestart'),
            header: t('layout.settings.restartHeader'),
            icon: 'pi pi-exclamation-triangle',
            defaultFocus: 'accept',
            acceptLabel: t('common.yes'),
            rejectLabel: t('common.no'),
            accept: async () => {
                settingsStore.ccSettings.poll_rate = pollRate.value
                // give the system a moment to make sure the pollRate has been saved ^
                await deviceStore.sleep(50)
                toast.add({
                    severity: 'success',
                    summary: t('layout.settings.success'),
                    detail: t('layout.settings.successDetail'),
                    life: 6000,
                })
                await deviceStore.daemonClient.shutdownDaemon()
                await deviceStore.waitAndReload()
            },
        }),
    2000,
)

const daemonPort: Ref<number> = ref(deviceStore.getDaemonPort())
// commented out for now but can be reused in the near future.
// See https://gitlab.com/coolercontrol/coolercontrol/-/issues/506
// const daemonAddress: Ref<string> = ref(deviceStore.getDaemonAddress())
// const daemonSslEnabled: Ref<boolean> = ref(deviceStore.getDaemonSslEnabled())
// const saveDaemonSettings = () => {
//     deviceStore.setDaemonAddress(daemonAddress.value)
//     deviceStore.setDaemonPort(daemonPort.value)
//     deviceStore.setDaemonSslEnabled(daemonSslEnabled.value)
//     deviceStore.reloadUI()
// }
// const resetDaemonSettings = () => {
//     deviceStore.clearDaemonAddress()
//     deviceStore.clearDaemonPort()
//     deviceStore.clearDaemonSslEnabled()
//     deviceStore.reloadUI()
// }

const pollRate: Ref<number> = ref(settingsStore.ccSettings.poll_rate)
watch(pollRate, () => {
    applyGenericDaemonChange()
})

// This interface is used for exporting/importing custom HEX color themes
// We transition to and from the CustomThemeSettings interface which contains
// a 'R G B' string value.
interface CustomColorTheme extends CustomThemeSettings {}
class CustomColorTheme {
    static fromCustomThemeSettings(customThemeSettings: CustomThemeSettings): CustomColorTheme {
        const customColorTheme = new CustomColorTheme()
        customColorTheme.accent = colorStore.rgbToHex(customThemeSettings.accent)
        customColorTheme.bgOne = colorStore.rgbToHex(customThemeSettings.bgOne)
        customColorTheme.bgTwo = colorStore.rgbToHex(customThemeSettings.bgTwo)
        customColorTheme.borderOne = colorStore.rgbToHex(customThemeSettings.borderOne)
        customColorTheme.textColor = colorStore.rgbToHex(customThemeSettings.textColor)
        customColorTheme.textColorSecondary = colorStore.rgbToHex(
            customThemeSettings.textColorSecondary,
        )
        return customColorTheme
    }

    static fromJson(jsonObj: any): CustomColorTheme {
        if (CustomColorTheme.isCustomThemeSettings(jsonObj)) {
            return CustomColorTheme.fromCustomThemeSettings(jsonObj)
        }
        throw new Error('Invalid JSON object for CustomColorTheme')
    }

    static isCustomThemeSettings(jsonObj: any): jsonObj is CustomThemeSettings {
        return (
            typeof jsonObj.accent === 'string' &&
            colorStore.isValidHex(jsonObj.accent) &&
            typeof jsonObj.bgOne === 'string' &&
            colorStore.isValidHex(jsonObj.bgOne) &&
            typeof jsonObj.bgTwo === 'string' &&
            colorStore.isValidHex(jsonObj.bgTwo) &&
            typeof jsonObj.borderOne === 'string' &&
            colorStore.isValidHex(jsonObj.borderOne) &&
            typeof jsonObj.textColor === 'string' &&
            colorStore.isValidHex(jsonObj.textColor) &&
            typeof jsonObj.textColorSecondary === 'string' &&
            colorStore.isValidHex(jsonObj.textColorSecondary)
        )
    }

    applyCustomColorTheme(): void {
        setNewColorAccent(this.accent)
        setNewColorBgOne(this.bgOne)
        setNewColorBgTwo(this.bgTwo)
        setNewColorBorder(this.borderOne)
        setNewColorText(this.textColor)
        setNewColorTextSecondary(this.textColorSecondary)
    }
}
// Theme code: cct1:<36 hex chars>[<2 hex chars CRC-8>]
// Output always includes the checksum; input accepts with or without.
const THEME_CODE_PREFIX = 'cct1:'

const crc8 = (bytes: Uint8Array): number => {
    let crc = 0
    for (const byte of bytes) {
        crc ^= byte
        for (let i = 0; i < 8; i++) {
            crc = (crc & 0x80) !== 0 ? ((crc << 1) ^ 0x07) & 0xff : (crc << 1) & 0xff
        }
    }
    return crc
}

const colorToHexBody = (c: Color): string => {
    const hex = colorStore.rgbToHex(c).toLowerCase()
    return hex.startsWith('#') ? hex.slice(1) : hex
}

const encodeThemeCode = (theme: CustomThemeSettings): string => {
    const hex = [
        colorToHexBody(theme.accent),
        colorToHexBody(theme.bgOne),
        colorToHexBody(theme.bgTwo),
        colorToHexBody(theme.borderOne),
        colorToHexBody(theme.textColor),
        colorToHexBody(theme.textColorSecondary),
    ].join('')
    const bytes = new Uint8Array(18)
    for (let i = 0; i < 18; i++) {
        bytes[i] = parseInt(hex.slice(i * 2, i * 2 + 2), 16)
    }
    const cs = crc8(bytes).toString(16).padStart(2, '0')
    return THEME_CODE_PREFIX + hex + cs
}

const decodeThemeCode = (input: string): CustomColorTheme | null => {
    const trimmed = input.trim().toLowerCase()
    if (!trimmed.startsWith(THEME_CODE_PREFIX)) return null
    const body = trimmed.slice(THEME_CODE_PREFIX.length)
    let hex: string
    if (body.length === 36) {
        hex = body
    } else if (body.length === 38) {
        hex = body.slice(0, 36)
        if (!/^[0-9a-f]{36}$/.test(hex)) return null
        const expected = body.slice(36)
        const bytes = new Uint8Array(18)
        for (let i = 0; i < 18; i++) {
            bytes[i] = parseInt(hex.slice(i * 2, i * 2 + 2), 16)
        }
        if (crc8(bytes).toString(16).padStart(2, '0') !== expected) return null
    } else {
        return null
    }
    if (!/^[0-9a-f]{36}$/.test(hex)) return null
    const theme = new CustomColorTheme()
    theme.accent = '#' + hex.slice(0, 6)
    theme.bgOne = '#' + hex.slice(6, 12)
    theme.bgTwo = '#' + hex.slice(12, 18)
    theme.borderOne = '#' + hex.slice(18, 24)
    theme.textColor = '#' + hex.slice(24, 30)
    theme.textColorSecondary = '#' + hex.slice(30, 36)
    return theme
}

const themeCode = computed((): string => encodeThemeCode(settingsStore.customTheme))

const pasteCodeInput: Ref<string> = ref('')
const justCopied: Ref<boolean> = ref(false)

const copyThemeCode = async (): Promise<void> => {
    try {
        await navigator.clipboard.writeText(themeCode.value)
        justCopied.value = true
        setTimeout(() => (justCopied.value = false), 1500)
        toast.add({
            severity: 'success',
            summary: t('common.success'),
            detail: t('layout.settings.customTheme.themeCodeCopied'),
            life: 2000,
        })
    } catch (e) {
        console.error('Clipboard write failed', e)
        toast.add({
            severity: 'error',
            summary: t('common.error'),
            detail: t('layout.settings.customTheme.invalidThemeCode'),
            life: 3000,
        })
    }
}

const applyPastedThemeCode = (): void => {
    const decoded = decodeThemeCode(pasteCodeInput.value)
    if (decoded == null) {
        toast.add({
            severity: 'error',
            summary: t('common.error'),
            detail: t('layout.settings.customTheme.invalidThemeCode'),
            life: 3000,
        })
        return
    }
    decoded.applyCustomColorTheme()
    pasteCodeInput.value = ''
    toast.add({
        severity: 'success',
        summary: t('common.success'),
        detail: t('layout.settings.customTheme.themeApplied'),
        life: 2000,
    })
}

const downloadThemeFileName = 'coolercontrol-color-theme.json'
const downloadThemeHref = computed((): string => {
    const customColorTheme = CustomColorTheme.fromCustomThemeSettings(settingsStore.customTheme)
    const blob = new Blob([JSON.stringify(customColorTheme)], { type: 'application/json' })
    return URL.createObjectURL(blob)
})
const downloadThemeDatasetURL = computed((): string => {
    return ['application/json', downloadThemeFileName, downloadThemeHref].join(':')
})
const createJsonUploader = (): void => {
    const inputFileElement = document.createElement('input')
    inputFileElement.setAttribute('type', 'file')
    inputFileElement.setAttribute('accept', '.json')
    inputFileElement.onchange = function () {
        getUploadedJson(this)
    }
    document.body.appendChild(inputFileElement)
    inputFileElement.click()
    inputFileElement.remove()
}
const getUploadedJson = (fileInput: any) => {
    const files = fileInput.files
    if (files.length <= 0) return
    const file = files[0]
    if (file.size > 1024) {
        console.error('JSON File too large for single Color Theme')
        return
    }
    file.text().then(function (text: string) {
        console.log('text', text)
        const result = JSON.parse(text)
        const customThemeSettings = CustomColorTheme.fromJson(result)
        customThemeSettings.applyCustomColorTheme()
        // const formatted = JSON.stringify(result, null, 2)
        // console.log('result', formatted)
    })
}

const portScrolled = (event: WheelEvent): void => {
    if (daemonPort.value == null) return
    if (event.deltaY < 0) {
        if (daemonPort.value < 65525) daemonPort.value += 10
    } else {
        if (daemonPort.value > 90) daemonPort.value -= 10
    }
}
const addScrollEventListeners = (): void => {
    // @ts-ignore
    document?.querySelector('#port-input')?.addEventListener('wheel', portScrolled)
}

onMounted(() => {
    addScrollEventListeners()

    // Listen for language change events
    window.addEventListener('language-changed', () => {
        // When language changes, the computed property will automatically update, no need to manually assign value
        // themeModeOptions.value = [...] - this line would cause an error

        // Trigger theme options recalculation
        window.dispatchEvent(new CustomEvent('theme-options-updated'))
    })
})

// Remove event listeners when component is unmounted
onUnmounted(() => {
    window.removeEventListener('language-changed', () => {
        // Cleanup code
    })
})
</script>

<template>
    <div class="flex h-[3.5rem] border-b-4 border-border-one items-center justify-between">
        <div class="pl-4 py-2 text-2xl font-bold">{{ t('layout.settings.title') }}</div>
    </div>
    <ScrollAreaRoot style="--scrollbar-size: 10px">
        <ScrollAreaViewport class="pb-16 h-screen w-full">
            <Tabs v-model:value="tabValue">
                <TabList>
                    <Tab
                        value="0"
                        as="div"
                        class="flex justify-center items-center gap-2"
                        :style="tabStyle"
                    >
                        <svg-icon
                            type="mdi"
                            :path="mdiViewQuiltOutline"
                            :size="deviceStore.getREMSize(1.5)"
                        />
                        {{ t('layout.settings.userInterface') }}
                    </Tab>
                    <Tab
                        value="4"
                        as="div"
                        class="flex justify-center items-center gap-2"
                        :style="tabStyle"
                    >
                        <svg-icon
                            type="mdi"
                            :path="mdiFormatListBulleted"
                            :size="deviceStore.getREMSize(1.5)"
                        />
                        {{ t('layout.settings.device') }}
                    </Tab>
                    <Tab
                        value="1"
                        as="div"
                        class="flex justify-center items-center gap-2"
                        :style="tabStyle"
                    >
                        <svg-icon
                            type="mdi"
                            :path="mdiDnsOutline"
                            :size="deviceStore.getREMSize(1.5)"
                        />
                        {{ t('views.daemon.title', 'Daemon') }}
                    </Tab>
                    <Tab
                        v-if="deviceStore.isQtApp()"
                        value="2"
                        as="div"
                        class="flex justify-center items-center gap-2"
                        :style="tabStyle"
                        :disabled="!deviceStore.isQtApp()"
                    >
                        <svg-icon
                            type="mdi"
                            :path="mdiMonitor"
                            :size="deviceStore.getREMSize(1.5)"
                        />
                        {{ t('layout.settings.desktop', 'Desktop') }}
                    </Tab>
                </TabList>
                <TabPanels class="mt-2">
                    <TabPanel value="0" class="flex flex-col lg:flex-row">
                        <!--UI Settings-->
                        <table class="bg-bg-two rounded-lg">
                            <tbody>
                                <tr v-tooltip.top="t('layout.settings.tooltips.introduction')">
                                    <td
                                        class="py-5 px-4 w-60 leading-none content-center items-center border-border-one border-r-2 border-b-2"
                                    >
                                        <div class="float-right">
                                            {{ t('layout.settings.introduction') }}
                                        </div>
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-b-2"
                                    >
                                        <Button
                                            :label="t('layout.settings.startTour')"
                                            class="bg-accent/80 hover:!bg-accent w-full h-[2.375rem]"
                                            @click="emitter.emit('start-tour')"
                                        />
                                    </td>
                                </tr>
                                <tr v-tooltip.top="t('layout.settings.tooltips.startupPage')">
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-b-2"
                                    >
                                        {{ t('layout.settings.startupPage') }}
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 leading-none border-border-one border-l-2 border-b-2"
                                    >
                                        <Select
                                            v-model="settingsStore.startupPage"
                                            :options="startupPageOptions"
                                            option-label="label"
                                            option-value="value"
                                            class="w-full h-10"
                                            scroll-height="100%"
                                            :pt="{
                                                input: { class: 'text-center' },
                                                trigger: {
                                                    class: 'flex justify-center items-center',
                                                },
                                                label: { class: 'text-center w-full' },
                                                panel: {
                                                    class: 'border-2 border-border-one rounded-lg shadow-lg bg-bg-one',
                                                },
                                            }"
                                        />
                                    </td>
                                </tr>
                                <tr v-tooltip.top="t('layout.settings.tooltips.timeFormat')">
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-b-2"
                                    >
                                        {{ t('layout.settings.timeFormat') }}
                                    </td>
                                    <td
                                        class="py-4 px-2 w-48 text-center items-center border-border-one border-l-2 border-b-2"
                                    >
                                        <el-switch
                                            v-model="settingsStore.time24"
                                            size="large"
                                            :active-text="t('layout.settings.time24h')"
                                            :inactive-text="t('layout.settings.time12h')"
                                            style="--el-switch-off-color: rgb(var(--colors-accent))"
                                        />
                                    </td>
                                </tr>
                                <tr
                                    v-tooltip.top="t('layout.settings.tooltips.frequencyPrecision')"
                                >
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-t-2"
                                    >
                                        {{ t('layout.settings.frequencyPrecision') }}
                                    </td>
                                    <td
                                        class="py-4 px-2 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <el-switch
                                            v-model="settingsStore.frequencyPrecision"
                                            size="large"
                                            :active-value="1000"
                                            :active-text="t('common.ghzAbbr')"
                                            :inactive-value="1"
                                            :inactive-text="t('common.mhzAbbr')"
                                            style="--el-switch-off-color: rgb(var(--colors-accent))"
                                        />
                                    </td>
                                </tr>
                                <tr v-tooltip.top="t('layout.settings.tooltips.sidebarCollapse')">
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-t-2"
                                    >
                                        {{ t('layout.settings.sidebarToCollapse') }}
                                    </td>
                                    <td
                                        class="py-4 px-2 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <el-switch
                                            v-model="settingsStore.hideMenuCollapseIcon"
                                            size="large"
                                        />
                                    </td>
                                </tr>
                                <tr v-tooltip.top="t('layout.settings.tooltips.eyeCandy')">
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-t-2"
                                    >
                                        {{ t('layout.settings.eyeCandy') }}
                                    </td>
                                    <td
                                        class="py-4 px-2 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <el-switch v-model="settingsStore.eyeCandy" size="large" />
                                    </td>
                                </tr>
                                <tr v-tooltip.top="t('layout.settings.tooltips.fullScreen')">
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-t-2"
                                    >
                                        {{ t('layout.settings.fullScreen') }}
                                    </td>
                                    <td
                                        class="py-4 px-2 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <el-switch
                                            v-model="isFullScreen"
                                            :disabled="!fullscreenApi.isEnabled"
                                            size="large"
                                            @change="toggleFullScreen"
                                        />
                                    </td>
                                </tr>
                                <tr v-tooltip.top="t('layout.settings.tooltips.lineThickness')">
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-t-2"
                                    >
                                        {{ t('layout.settings.dashboardLineSize') }}
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 leading-none border-border-one border-l-2 border-t-2"
                                    >
                                        <Select
                                            v-model="settingsStore.chartLineScale"
                                            :options="lineThicknessOptions"
                                            option-label="optionSize"
                                            option-value="value"
                                            class="w-full h-10"
                                            scroll-height="100%"
                                            :pt="{
                                                // @ts-ignore
                                                option: ({ context }) => ({
                                                    class: [
                                                        'py-2 px-5',
                                                        'bg-bg-one',
                                                        'hover:bg-surface-hover',
                                                        'transition-shadow',
                                                        'duration-200',
                                                        { 'bg-surface-hover': context.selected },
                                                    ],
                                                }),
                                                overlay: {
                                                    class: [
                                                        'border-2 border-border-one',
                                                        'rounded-lg',
                                                        'shadow-lg',
                                                        'bg-bg-one',
                                                    ],
                                                },
                                                // @ts-ignore
                                                label: ({ props, parent }) => ({
                                                    class: [
                                                        'p-2',
                                                        'flex-auto',
                                                        'transition',
                                                        'duration-200',
                                                        'focus:outline-none focus:shadow-none',
                                                        'cursor-pointer',
                                                        'whitespace-nowrap',
                                                        'appearance-none',
                                                    ],
                                                }),
                                            }"
                                        >
                                            <template #value="slotProps">
                                                <div class="content-center h-full w-full">
                                                    <div
                                                        :style="`border-bottom: ${slotProps.value * 2}px solid rgb(var(--colors-text-color))`"
                                                    />
                                                </div>
                                            </template>
                                            <template #option="slotProps">
                                                <div class="content-center h-6 w-full">
                                                    <div
                                                        :style="`border-bottom: ${slotProps.option.optionSize}px
                                                    solid rgb(var(${slotProps.selected ? '--colors-text-color' : '--colors-text-color-secondary'}))`"
                                                    />
                                                </div>
                                            </template>
                                        </Select>
                                    </td>
                                </tr>
                                <tr v-tooltip.top="t('layout.settings.appearance')">
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-t-2"
                                    >
                                        <div class="text-right float-right">
                                            {{ t('layout.settings.themeStyle') }}
                                        </div>
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <Listbox
                                            :model-value="settingsStore.themeMode"
                                            :options="themeModeOptions"
                                            class="w-full"
                                            checkmark
                                            list-style="max-height: 100%"
                                            option-label="label"
                                            option-value="value"
                                            @change="changeThemeMode"
                                            :pt="{
                                                // @ts-ignore
                                                root: ({ props }) => ({
                                                    class: [
                                                        'min-w-[12rem]',
                                                        'rounded-lg',
                                                        'bg-bg-one',
                                                        'text-text-color',
                                                        'border-2',
                                                        { 'border-border-one': !props.invalid },
                                                        { 'border-red': props.invalid },
                                                    ],
                                                }),
                                            }"
                                        />
                                    </td>
                                </tr>
                                <tr v-tooltip.top="t('layout.settings.language')">
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-t-2"
                                    >
                                        <div class="text-right float-right">
                                            {{ t('layout.settings.language') }}
                                        </div>
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <LanguageSwitcher />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <table
                            v-if="settingsStore.themeMode === ThemeMode.CUSTOM"
                            class="lg:ml-4 h-full bg-bg-two rounded-lg"
                        >
                            <tbody>
                                <tr>
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-b-2"
                                    >
                                        {{ t('layout.settings.customTheme.accent') }}
                                    </td>
                                    <td
                                        class="p-4 w-48 text-center items-center border-border-one border-l-2 border-b-2"
                                    >
                                        <div
                                            class="w-full h-full content-center flex justify-center"
                                        >
                                            <c-c-color-picker
                                                v-model="customThemeAccent"
                                                color-format="hex"
                                                :default-color="
                                                    colorStore.rgbToHex(defaultCustomTheme.accent)
                                                "
                                                @update:model-value="setNewColorAccent"
                                            />
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2"
                                    >
                                        {{ t('layout.settings.customTheme.bgOne') }}
                                    </td>
                                    <td
                                        class="p-4 w-48 text-center items-center border-border-one border-l-2"
                                    >
                                        <div
                                            class="w-full h-full content-center flex justify-center"
                                        >
                                            <c-c-color-picker
                                                v-model="customThemeBgOne"
                                                color-format="hex"
                                                :default-color="
                                                    colorStore.rgbToHex(defaultCustomTheme.bgOne)
                                                "
                                                @update:model-value="setNewColorBgOne"
                                            />
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-t-2"
                                    >
                                        {{ t('layout.settings.customTheme.bgTwo') }}
                                    </td>
                                    <td
                                        class="p-4 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <div
                                            class="w-full h-full content-center flex justify-center"
                                        >
                                            <div class="rounded-lg bg-bg-one">
                                                <c-c-color-picker
                                                    v-model="customThemeBgTwo"
                                                    color-format="hex"
                                                    :default-color="
                                                        colorStore.rgbToHex(
                                                            defaultCustomTheme.bgTwo,
                                                        )
                                                    "
                                                    @update:model-value="setNewColorBgTwo"
                                                />
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-t-2"
                                    >
                                        {{ t('layout.settings.customTheme.border') }}
                                    </td>
                                    <td
                                        class="p-4 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <div
                                            class="w-full h-full content-center flex justify-center"
                                        >
                                            <c-c-color-picker
                                                v-model="customThemeBorder"
                                                color-format="hex"
                                                :default-color="
                                                    colorStore.rgbToHex(
                                                        defaultCustomTheme.borderOne,
                                                    )
                                                "
                                                @update:model-value="setNewColorBorder"
                                            />
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-t-2"
                                    >
                                        {{ t('layout.settings.customTheme.text') }}
                                    </td>
                                    <td
                                        class="p-4 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <div
                                            class="w-full h-full content-center flex justify-center"
                                        >
                                            <c-c-color-picker
                                                v-model="customThemeText"
                                                color-format="hex"
                                                :default-color="
                                                    colorStore.rgbToHex(
                                                        defaultCustomTheme.textColor,
                                                    )
                                                "
                                                @update:model-value="setNewColorText"
                                            />
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-t-2"
                                    >
                                        {{ t('layout.settings.customTheme.textSecondary') }}
                                    </td>
                                    <td
                                        class="p-4 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <div
                                            class="w-full h-full content-center flex justify-center"
                                        >
                                            <c-c-color-picker
                                                v-model="customThemeTextSecondary"
                                                color-format="hex"
                                                :default-color="
                                                    colorStore.rgbToHex(
                                                        defaultCustomTheme.textColorSecondary,
                                                    )
                                                "
                                                @update:model-value="setNewColorTextSecondary"
                                            />
                                        </div>
                                    </td>
                                </tr>
                                <tr v-tooltip.top="t('layout.settings.tooltips.copyThemeCode')">
                                    <td colspan="2" class="py-3 px-4 border-border-one border-t-2">
                                        <div class="flex items-center gap-2 w-full">
                                            <div class="pr-4 text-right">
                                                {{ t('layout.settings.customTheme.copyCode') }}
                                            </div>
                                            <InputText
                                                :model-value="themeCode"
                                                readonly
                                                class="flex-1 font-mono text-xs"
                                                @focus="
                                                    ($event.target as HTMLInputElement).select()
                                                "
                                            />
                                            <Button
                                                class="bg-accent/80 hover:!bg-accenth-[2.375rem] w-12"
                                                @click="copyThemeCode"
                                            >
                                                <svg-icon
                                                    class="outline-0 shrink-0"
                                                    type="mdi"
                                                    :path="justCopied ? mdiCheck : mdiContentCopy"
                                                    :size="deviceStore.getREMSize(1.25)"
                                                />
                                            </Button>
                                        </div>
                                    </td>
                                </tr>
                                <tr v-tooltip.top="t('layout.settings.tooltips.pasteThemeCode')">
                                    <td colspan="2" class="py-3 px-4 border-border-one border-t-2">
                                        <div class="flex items-center gap-2 w-full">
                                            <div class="pr-4 text-right">
                                                {{ t('layout.settings.customTheme.pasteCode') }}
                                            </div>
                                            <InputText
                                                v-model="pasteCodeInput"
                                                class="flex-1 font-mono text-xs"
                                                placeholder="cct1:..."
                                                @keyup.enter="applyPastedThemeCode"
                                            />
                                            <Button
                                                class="bg-accent/80 hover:!bg-accent h-[2.375rem] w-12"
                                                :disabled="pasteCodeInput.trim().length === 0"
                                                @click="applyPastedThemeCode"
                                            >
                                                <svg-icon
                                                    class="outline-0 shrink-0"
                                                    type="mdi"
                                                    :path="mdiImport"
                                                    :size="deviceStore.getREMSize(1.5)"
                                                />
                                            </Button>
                                        </div>
                                    </td>
                                </tr>
                                <tr v-tooltip.top="t('layout.settings.tooltips.exportThemeFile')">
                                    <td
                                        class="py-5 px-4 w-60 leading-none content-center items-center border-border-one border-r-2 border-t-2"
                                    >
                                        <div class="float-right">
                                            {{ t('layout.settings.customTheme.export') }}
                                        </div>
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <div
                                            class="w-full h-full content-center flex justify-center"
                                        >
                                            <a
                                                :href="downloadThemeHref"
                                                :download="downloadThemeFileName"
                                                :data-downloadurl="downloadThemeDatasetURL"
                                                class="w-full"
                                            >
                                                <Button
                                                    class="bg-accent/80 hover:!bg-accent w-full h-[2.375rem]"
                                                >
                                                    <svg-icon
                                                        class="outline-0"
                                                        type="mdi"
                                                        :path="mdiExport"
                                                        :size="deviceStore.getREMSize(1.625)"
                                                    />
                                                </Button>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                <tr v-tooltip.top="t('layout.settings.tooltips.importThemeFile')">
                                    <td
                                        class="py-5 px-4 w-60 leading-none content-center items-center border-border-one border-r-2 border-t-2"
                                    >
                                        <div class="float-right">
                                            {{ t('layout.settings.customTheme.import') }}
                                        </div>
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <div
                                            class="w-full h-full content-center flex justify-center"
                                        >
                                            <Button
                                                class="bg-accent/80 hover:!bg-accent w-full h-[2.375rem]"
                                                @click="createJsonUploader"
                                            >
                                                <svg-icon
                                                    class="outline-0"
                                                    type="mdi"
                                                    :path="mdiImport"
                                                    :size="deviceStore.getREMSize(1.625)"
                                                />
                                            </Button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </TabPanel>
                    <TabPanel value="1" class="flex flex-col lg:flex-row">
                        <!--Daemon Settings-->
                        <table class="bg-bg-two rounded-lg mb-4">
                            <tbody>
                                <tr
                                    v-tooltip.top="{
                                        escape: false,
                                        value: t('layout.settings.tooltips.applySettingsOnStartup'),
                                    }"
                                >
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-b-2"
                                    >
                                        {{ t('layout.settings.applySettingsOnStartup') }}
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-b-2"
                                    >
                                        <el-switch
                                            v-model="settingsStore.ccSettings.apply_on_boot"
                                            size="large"
                                        />
                                    </td>
                                </tr>
                                <tr
                                    v-tooltip.top="{
                                        escape: false,
                                        value: t('layout.settings.tooltips.deviceDelayAtStartup'),
                                    }"
                                >
                                    <td
                                        class="py-4 px-4 w-60 leading-none text-right items-center border-border-one border-r-2 border-b-2"
                                    >
                                        {{ t('layout.settings.deviceDelayAtStartup') }}
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-b-2"
                                    >
                                        <InputNumber
                                            v-model="settingsStore.ccSettings.startup_delay"
                                            show-buttons
                                            :min="1"
                                            :max="30"
                                            :suffix="` ${t('common.secondAbbr')}`"
                                            button-layout="horizontal"
                                            :input-style="{ width: '5rem' }"
                                        >
                                            <template #incrementicon>
                                                <span class="pi pi-plus" />
                                            </template>
                                            <template #decrementicon>
                                                <span class="pi pi-minus" />
                                            </template>
                                        </InputNumber>
                                    </td>
                                </tr>
                                <tr
                                    v-tooltip.top="{
                                        escape: false,
                                        value: t('layout.settings.tooltips.pollingRate'),
                                    }"
                                >
                                    <td
                                        class="py-4 px-4 w-60 leading-none items-center border-border-one border-r-2 border-b-2"
                                    >
                                        <div
                                            class="float-left"
                                            v-tooltip.top="
                                                t('layout.settings.tooltips.triggersDaemonRestart')
                                            "
                                        >
                                            <svg-icon
                                                type="mdi"
                                                :path="mdiRestart"
                                                :size="deviceStore.getREMSize(1.1)"
                                            />
                                        </div>
                                        <div class="text-right float-right">
                                            {{ t('layout.settings.pollingRate') }}
                                        </div>
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-b-2"
                                    >
                                        <InputNumber
                                            v-model="pollRate"
                                            show-buttons
                                            :min="0.5"
                                            :max="5.0"
                                            :suffix="` ${t('common.secondAbbr')}`"
                                            :step="0.5"
                                            :min-fraction-digits="1"
                                            button-layout="horizontal"
                                            :input-style="{ width: '5rem' }"
                                        >
                                            <template #incrementicon>
                                                <span class="pi pi-plus" />
                                            </template>
                                            <template #decrementicon>
                                                <span class="pi pi-minus" />
                                            </template>
                                        </InputNumber>
                                    </td>
                                </tr>
                                <tr
                                    v-tooltip.top="{
                                        escape: false,
                                        value: t('layout.settings.tooltips.compressApiPayload'),
                                    }"
                                >
                                    <td
                                        class="py-4 px-4 w-60 leading-none items-center border-border-one border-r-2 border-b-2"
                                    >
                                        <div
                                            class="float-left"
                                            v-tooltip.top="
                                                t('layout.settings.tooltips.triggersDaemonRestart')
                                            "
                                        >
                                            <svg-icon
                                                type="mdi"
                                                :path="mdiRestart"
                                                :size="deviceStore.getREMSize(1.0)"
                                            />
                                        </div>
                                        <div class="text-right float-right">
                                            {{ t('layout.settings.compressApiPayload') }}
                                        </div>
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-b-2"
                                    >
                                        <el-switch
                                            v-model="settingsStore.ccSettings.compress"
                                            size="large"
                                            @click="applyGenericDaemonChange"
                                        />
                                    </td>
                                </tr>
                                <tr
                                    v-tooltip.top="{
                                        escape: false,
                                        value: t('layout.settings.tooltips.sensorsAutoDetect'),
                                    }"
                                >
                                    <td
                                        class="py-4 px-4 w-60 leading-none items-center border-border-one border-r-2 border-t-2"
                                    >
                                        <div
                                            class="float-left"
                                            v-tooltip.top="
                                                t('layout.settings.tooltips.triggersDaemonRestart')
                                            "
                                        >
                                            <svg-icon
                                                type="mdi"
                                                :path="mdiRestart"
                                                :size="deviceStore.getREMSize(1.0)"
                                            />
                                        </div>
                                        <div class="text-right float-right">
                                            {{ t('layout.settings.sensorsAutoDetect') }}
                                        </div>
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <el-switch
                                            v-model="settingsStore.ccSettings.sensors_auto_detect"
                                            size="large"
                                            @change="applyGenericDaemonChange"
                                        />
                                    </td>
                                </tr>
                                <tr
                                    v-tooltip.top="{
                                        escape: false,
                                        value: t('layout.settings.tooltips.deviceListener'),
                                    }"
                                >
                                    <td
                                        class="py-4 px-4 w-60 leading-none items-center border-border-one border-r-2 border-b-2 border-t-2"
                                    >
                                        <div
                                            class="float-left"
                                            v-tooltip.top="
                                                t('layout.settings.tooltips.triggersDaemonRestart')
                                            "
                                        >
                                            <svg-icon
                                                type="mdi"
                                                :path="mdiRestart"
                                                :size="deviceStore.getREMSize(1.0)"
                                            />
                                        </div>
                                        <div class="text-right float-right">
                                            {{ t('layout.settings.deviceListener') }}
                                        </div>
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-b-2 border-t-2"
                                    >
                                        <el-switch
                                            v-model="
                                                settingsStore.ccSettings.device_listener_enabled
                                            "
                                            size="large"
                                            @change="applyGenericDaemonChange"
                                        />
                                    </td>
                                </tr>
                                <tr
                                    v-tooltip.top="{
                                        escape: false,
                                        value: t('layout.settings.tooltips.liquidctlIntegration'),
                                    }"
                                >
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-b-2"
                                    >
                                        <div
                                            class="float-left py-1"
                                            v-tooltip.top="
                                                t('layout.settings.tooltips.triggersDaemonRestart')
                                            "
                                        >
                                            <svg-icon
                                                type="mdi"
                                                :path="mdiRestart"
                                                :size="deviceStore.getREMSize(1.0)"
                                            />
                                        </div>
                                        <div class="text-right float-right">
                                            {{ t('layout.settings.liquidctlIntegration') }}
                                        </div>
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-b-2"
                                    >
                                        <el-switch
                                            v-model="settingsStore.ccSettings.liquidctl_integration"
                                            size="large"
                                            @change="applyGenericDaemonChange"
                                        />
                                    </td>
                                </tr>
                                <tr
                                    v-tooltip.top="{
                                        escape: false,
                                        value: t('layout.settings.tooltips.liquidctlDeviceInit'),
                                    }"
                                >
                                    <td
                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-b-2"
                                    >
                                        {{ t('layout.settings.liquidctlDeviceInit') }}
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-b-2"
                                    >
                                        <el-switch
                                            v-model="settingsStore.ccSettings.no_init"
                                            :disabled="
                                                !settingsStore.ccSettings.liquidctl_integration
                                            "
                                            :active-value="false"
                                            :inactive-value="true"
                                            size="large"
                                        />
                                    </td>
                                </tr>
                                <tr
                                    v-tooltip.top="{
                                        escape: false,
                                        value: t('layout.settings.tooltips.hideDuplicateDevices'),
                                    }"
                                >
                                    <td
                                        class="py-4 px-4 w-60 leading-none items-center border-border-one border-r-2 border-t-2"
                                    >
                                        <div
                                            class="float-left"
                                            v-tooltip.top="
                                                t('layout.settings.tooltips.triggersDaemonRestart')
                                            "
                                        >
                                            <svg-icon
                                                type="mdi"
                                                :path="mdiRestart"
                                                :size="deviceStore.getREMSize(1.0)"
                                            />
                                        </div>
                                        <div class="text-right float-right">
                                            {{ t('layout.settings.hideDuplicateDevices') }}
                                        </div>
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <el-switch
                                            v-model="
                                                settingsStore.ccSettings.hide_duplicate_devices
                                            "
                                            :disabled="
                                                !settingsStore.ccSettings.liquidctl_integration
                                            "
                                            size="large"
                                            @change="applyGenericDaemonChange"
                                        />
                                    </td>
                                </tr>
                                <tr
                                    v-tooltip.top="{
                                        escape: false,
                                        value: t('layout.settings.tooltips.drivePowerState'),
                                    }"
                                >
                                    <td
                                        class="py-4 px-4 w-60 leading-none items-center border-border-one border-r-2 border-t-2"
                                    >
                                        <div
                                            class="float-left"
                                            v-tooltip.top="'Triggers an automatic daemon restart'"
                                        >
                                            <svg-icon
                                                type="mdi"
                                                :path="mdiRestart"
                                                :size="deviceStore.getREMSize(1.0)"
                                            />
                                        </div>
                                        <div class="text-right float-right">
                                            {{ t('layout.settings.drivePowerState') }}
                                        </div>
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <el-switch
                                            v-model="settingsStore.ccSettings.drivetemp_suspend"
                                            size="large"
                                            @change="applyGenericDaemonChange"
                                        />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <!--                        Might use again in the future-->
                        <!--                        <table class="lg:ml-4 h-full bg-bg-two rounded-lg">-->
                        <!--                            <tbody>-->
                        <!--                                <tr-->
                        <!--                                    v-tooltip.top="{-->
                        <!--                                        escape: false,-->
                        <!--                                        value: t('layout.settings.tooltips.daemonAddress'),-->
                        <!--                                    }"-->
                        <!--                                >-->
                        <!--                                    <td-->
                        <!--                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-b-2"-->
                        <!--                                    >-->
                        <!--                                        {{ t('common.address') }}-->
                        <!--                                    </td>-->
                        <!--                                    <td-->
                        <!--                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-b-2"-->
                        <!--                                    >-->
                        <!--                                        <InputText-->
                        <!--                                            v-model="daemonAddress"-->
                        <!--                                            class="min-w-48 w-full text-center"-->
                        <!--                                            placeholder="localhost"-->
                        <!--                                        />-->
                        <!--                                    </td>-->
                        <!--                                </tr>-->
                        <!--                                <tr-->
                        <!--                                    v-tooltip.top="{-->
                        <!--                                        escape: false,-->
                        <!--                                        value: t('layout.settings.tooltips.daemonPort'),-->
                        <!--                                    }"-->
                        <!--                                >-->
                        <!--                                    <td-->
                        <!--                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-b-2"-->
                        <!--                                    >-->
                        <!--                                        {{ t('common.port') }}-->
                        <!--                                    </td>-->
                        <!--                                    <td-->
                        <!--                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-b-2"-->
                        <!--                                    >-->
                        <!--                                        <InputNumber-->
                        <!--                                            id="port-input"-->
                        <!--                                            v-model="daemonPort"-->
                        <!--                                            show-buttons-->
                        <!--                                            :min="80"-->
                        <!--                                            :max="65535"-->
                        <!--                                            :useGrouping="false"-->
                        <!--                                            button-layout="horizontal"-->
                        <!--                                            :input-style="{ width: '6rem' }"-->
                        <!--                                        >-->
                        <!--                                            <template #incrementicon>-->
                        <!--                                                <span class="pi pi-plus" />-->
                        <!--                                            </template>-->
                        <!--                                            <template #decrementicon>-->
                        <!--                                                <span class="pi pi-minus" />-->
                        <!--                                            </template>-->
                        <!--                                        </InputNumber>-->
                        <!--                                    </td>-->
                        <!--                                </tr>-->
                        <!--                                <tr-->
                        <!--                                    v-tooltip.top="{-->
                        <!--                                        escape: false,-->
                        <!--                                        value: t('layout.settings.tooltips.sslTls'),-->
                        <!--                                    }"-->
                        <!--                                >-->
                        <!--                                    <td-->
                        <!--                                        class="py-4 px-4 w-60 text-right items-center border-border-one border-r-2 border-b-2"-->
                        <!--                                    >-->
                        <!--                                        {{ t('common.sslTls') }}-->
                        <!--                                    </td>-->
                        <!--                                    <td-->
                        <!--                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-b-2"-->
                        <!--                                    >-->
                        <!--                                        <el-switch v-model="daemonSslEnabled" size="large" />-->
                        <!--                                    </td>-->
                        <!--                                </tr>-->
                        <!--                                <tr>-->
                        <!--                                    <td-->
                        <!--                                        class="py-4 px-4 w-60 leading-none items-center border-border-one border-r-2 border-t-2"-->
                        <!--                                    >-->
                        <!--                                        <div-->
                        <!--                                            class="float-left py-2"-->
                        <!--                                            v-tooltip.top="-->
                        <!--                                                t('layout.settings.tooltips.triggersUIRestart')-->
                        <!--                                            "-->
                        <!--                                        >-->
                        <!--                                            <svg-icon-->
                        <!--                                                type="mdi"-->
                        <!--                                                :path="mdiRestart"-->
                        <!--                                                :size="deviceStore.getREMSize(1.0)"-->
                        <!--                                            />-->
                        <!--                                        </div>-->
                        <!--                                        <div class="float-right">-->
                        <!--                                            <Button-->
                        <!--                                                :label="t('common.defaults')"-->
                        <!--                                                class="h-[2.375rem]"-->
                        <!--                                                @click="resetDaemonSettings"-->
                        <!--                                                v-tooltip.top="-->
                        <!--                                                    t('layout.settings.tooltips.resetToDefaults')-->
                        <!--                                                "-->
                        <!--                                            />-->
                        <!--                                        </div>-->
                        <!--                                    </td>-->
                        <!--                                    <td-->
                        <!--                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-t-2"-->
                        <!--                                    >-->
                        <!--                                        <Button-->
                        <!--                                            :label="t('common.apply')"-->
                        <!--                                            class="bg-accent/80 hover:!bg-accent w-full h-[2.375rem]"-->
                        <!--                                            @click="saveDaemonSettings"-->
                        <!--                                            v-tooltip.top="-->
                        <!--                                                t('layout.settings.tooltips.saveAndReload')-->
                        <!--                                            "-->
                        <!--                                        />-->
                        <!--                                    </td>-->
                        <!--                                </tr>-->
                        <!--                            </tbody>-->
                        <!--                        </table>-->
                    </TabPanel>
                    <TabPanel value="2">
                        <!--Desktop Settings-->
                        <table class="bg-bg-two rounded-lg">
                            <tbody>
                                <tr
                                    v-tooltip.top="{
                                        escape: false,
                                        value: t('layout.settings.tooltips.startInTray'),
                                    }"
                                >
                                    <td
                                        class="py-4 px-2 w-60 text-right items-center border-border-one border-r-2 border-b-2"
                                    >
                                        {{ t('layout.settings.startInTray') }}
                                    </td>
                                    <td
                                        class="py-4 px-2 w-48 text-center items-center border-border-one border-l-2 border-b-2"
                                    >
                                        <el-switch
                                            v-model="settingsStore.startInSystemTray"
                                            size="large"
                                        />
                                    </td>
                                </tr>
                                <tr
                                    v-tooltip.top="{
                                        escape: false,
                                        value: t('layout.settings.tooltips.closeToTray'),
                                    }"
                                >
                                    <td
                                        class="py-4 px-2 w-60 text-right items-center border-border-one border-r-2 border-t-2"
                                    >
                                        {{ t('layout.settings.closeToTray') }}
                                    </td>
                                    <td
                                        class="py-4 px-2 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <el-switch
                                            v-model="settingsStore.closeToSystemTray"
                                            size="large"
                                        />
                                    </td>
                                </tr>
                                <tr
                                    v-tooltip.top="{
                                        escape: false,
                                        value: t('layout.settings.tooltips.zoom'),
                                    }"
                                >
                                    <td
                                        class="py-4 px-2 w-60 text-right items-center border-border-one border-r-2 border-t-2"
                                    >
                                        {{ t('layout.settings.zoom') }}
                                    </td>
                                    <td
                                        class="py-4 px-2 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <InputNumber
                                            v-model="settingsStore.uiScale"
                                            show-buttons
                                            :min="50"
                                            :max="400"
                                            :suffix="` ${t('common.percentUnit')}`"
                                            :step="10"
                                            button-layout="horizontal"
                                            :input-style="{ width: '5rem' }"
                                        >
                                            <template #incrementicon>
                                                <span class="pi pi-plus" />
                                            </template>
                                            <template #decrementicon>
                                                <span class="pi pi-minus" />
                                            </template>
                                        </InputNumber>
                                    </td>
                                </tr>
                                <tr
                                    v-tooltip.top="{
                                        escape: false,
                                        value: t('layout.settings.tooltips.desktopStartupDelay'),
                                    }"
                                >
                                    <td
                                        class="py-4 px-4 w-60 leading-none text-right items-center border-border-one border-r-2 border-t-2"
                                    >
                                        {{ t('layout.settings.desktopStartupDelay') }}
                                    </td>
                                    <td
                                        class="py-4 px-4 w-48 text-center items-center border-border-one border-l-2 border-t-2"
                                    >
                                        <InputNumber
                                            v-model="settingsStore.desktopStartupDelay"
                                            show-buttons
                                            :min="0"
                                            :max="10"
                                            :suffix="` ${t('common.secondAbbr')}`"
                                            :step="1"
                                            button-layout="horizontal"
                                            :input-style="{ width: '5rem' }"
                                        >
                                            <template #incrementicon>
                                                <span class="pi pi-plus" />
                                            </template>
                                            <template #decrementicon>
                                                <span class="pi pi-minus" />
                                            </template>
                                        </InputNumber>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </TabPanel>
                    <TabPanel value="4" class="flex flex-col lg:flex-row">
                        <AppSettingsDevices />
                    </TabPanel>
                </TabPanels>
            </Tabs>
        </ScrollAreaViewport>
        <ScrollAreaScrollbar
            class="flex select-none touch-none p-0.5 bg-transparent transition-colors duration-[120ms] ease-out data-[orientation=vertical]:w-2.5"
            orientation="vertical"
        >
            <ScrollAreaThumb
                class="flex-1 bg-border-one opacity-80 rounded-lg relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"
            />
        </ScrollAreaScrollbar>
    </ScrollAreaRoot>
</template>

<style scoped lang="scss">
.el-tree {
    --el-fill-color-blank: rgb(var(--colors-bg-one));
    --el-font-size-base: 1rem;
    --el-tree-text-color: rgb(var(--colors-text-color));
    --el-tree-node-content-height: 2.5rem;
    --el-tree-node-hover-bg-color: rgb(var(--colors-bg-two));
    --el-text-color-placeholder: rgb(var(--colors-text-color));
    --el-color-primary-light-9: rgb(var(--colors-bg-two));
}

.el-switch {
    --el-switch-on-color: rgb(var(--colors-accent));
    --el-switch-off-color: rgb(var(--colors-bg-one));
    --el-color-white: rgb(var(--colors-bg-two));
    // switch active text color:
    --el-color-primary: rgb(var(--colors-text-color));
    // switch inactive text color:
    --el-text-color-primary: rgb(var(--colors-text-color));
}

.tree-text {
    // This is THE WAY to handle elements overflowing with white-space: nowrap
    // same as tw line-clamp-1
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
</style>

<style lang="scss">
.el-tree-node__content {
    border-radius: 0.5rem;
}

.el-tree-node__expand-icon {
    font-size: 1rem;
    padding-left: 1px !important;
}
</style>
