<!DOCTYPE html>
<html lang="en" data-bs-theme="auto">

<head>
  <!-- TEMPLATE_HEADER - Used by Every UI Page -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sunshine</title>
<link rel="icon" type="image/x-icon" href="./images/sunshine.ico">
<link href="./assets/css/sunshine.css" rel="stylesheet" />

  <script type="module" crossorigin src="./assets/config-Ceh7-s-9.js"></script>
  <link rel="modulepreload" crossorigin href="./assets/createLucideIcon-mjjtyxlm.js">
  <link rel="modulepreload" crossorigin href="./assets/Notification-E6BjStlk.js">
  <link rel="modulepreload" crossorigin href="./assets/Navbar-e42_J4ze.js">
  <link rel="modulepreload" crossorigin href="./assets/fetch_utils-9iXjNOiI.js">
  <link rel="modulepreload" crossorigin href="./assets/Checkbox-_zq52Lmd.js">
  <link rel="modulepreload" crossorigin href="./assets/trash-2-YONst-Qs.js">
  <link rel="modulepreload" crossorigin href="./assets/save-DWz7vErV.js">
  <link rel="modulepreload" crossorigin href="./assets/gamepad-2-DxOHyImA.js">
  <link rel="stylesheet" crossorigin href="./assets/createLucideIcon-BL5QWnkG.css">
  <link rel="stylesheet" crossorigin href="./assets/Notification-CVXXWQML.css">
  <link rel="stylesheet" crossorigin href="./assets/Navbar-vHSgVmbh.css">
  <link rel="stylesheet" crossorigin href="./assets/config-B_QFm8FU.css">
</head>

<body id="app" v-cloak>
  <Navbar></Navbar>
  <div class="container">
    <h1 class="my-4">{{ $t('config.configuration') }}</h1>

    <!-- Search Bar with Autocomplete -->
    <div class="mb-3">
      <div class="input-group">
        <span class="input-group-text">
          <search :size="18" class="icon"></search>
        </span>
        <input
          type="text"
          class="form-control"
          v-model="searchQuery"
          :placeholder="$t('config.search_options')"
          @input="handleSearch"
          list="config-options"
        />
      </div>
      <datalist id="config-options">
        <option v-for="option in allConfigOptions" :key="option.key" :value="option.label">
          {{ option.tab }} - {{ option.label }}
        </option>
      </datalist>
      <div v-if="searchQuery && searchResults.length === 0" class="text-muted small mt-1">
        No results found for "{{ searchQuery }}"
      </div>
      <div v-else-if="searchQuery" class="text-muted small mt-1">
        Found {{ searchResults.length }} result(s)
      </div>
    </div>

    <div class="form" v-if="config">
      <!-- Header -->
      <ul class="nav nav-tabs">
        <li class="nav-item" v-for="tab in tabs" :key="tab.id">
          <a class="nav-link" :class="{'active': tab.id === currentTab}" href="#"
            @click="currentTab = tab.id">
            <component :is="getTabIcon(tab.id)" :size="18" class="icon"></component>
            {{tab.name}}
          </a>
        </li>
      </ul>

      <!-- General Tab -->
      <general
        v-if="currentTab === 'general'"
        :config="config"
        :platform="platform">
      </general>

      <!-- Input Tab -->
      <inputs
        v-if="currentTab === 'input'"
        :config="config"
        :platform="platform">
      </inputs>

      <!-- Audio/Video Tab -->
      <audio-video
        v-if="currentTab === 'av'"
        :config="config"
        :platform="platform"
      >
      </audio-video>

      <!-- Network Tab -->
      <network
        v-if="currentTab === 'network'"
        :config="config"
        :platform="platform">
      </network>

      <!-- Files Tab -->
      <files
        v-if="currentTab === 'files'"
        :config="config"
        :platform="platform">
      </files>

      <!-- Advanced Tab -->
      <advanced
        v-if="currentTab === 'advanced'"
        :config="config"
        :platform="platform">
      </advanced>

      <container-encoders
        :current-tab="currentTab"
        :config="config"
        :platform="platform">
      </container-encoders>
    </div>

    <!-- Save and Apply buttons -->
    <div class="alert alert-success my-4" v-if="saved && !restarted">
      <b>{{ $t('_common.success') }}</b> {{ $t('config.apply_note') }}
    </div>
    <div class="alert alert-success my-4" v-if="restarted">
      <b>{{ $t('_common.success') }}</b> {{ $t('config.restart_note') }}
    </div>
    <div class="mb-3 d-flex gap-2 mt-4">
      <button class="btn btn-primary" @click="save">
        <save :size="18" class="icon"></save>
        {{ $t('_common.save') }}
      </button>
      <button class="btn btn-success" @click="apply" v-if="saved && !restarted">
        <check :size="18" class="icon"></check>
        {{ $t('_common.apply') }}
      </button>
    </div>
  </div>
</body>


