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

    <style>
      .config-page {
        padding: 1em;
        border: 1px solid #dee2e6;
        border-top: none;
      }

      .buttons {
        padding: 1em 0;
      }
    </style>
  <script type="module" crossorigin src="./assets/config-r_cdcKYu.js"></script>
  <link rel="modulepreload" crossorigin href="./assets/_plugin-vue_export-helper-fP7Bc2kv.js">
  <link rel="modulepreload" crossorigin href="./assets/Navbar-Bk41hp-r.js">
  <link rel="modulepreload" crossorigin href="./assets/Checkbox-DOYBvQLN.js">
  <link rel="stylesheet" crossorigin href="./assets/_plugin-vue_export-helper-BebBUAXt.css">
  <link rel="stylesheet" crossorigin href="./assets/Navbar-dej49bs7.css">
  <link rel="stylesheet" crossorigin href="./assets/config-ByMCr56h.css">
</head>

<body id="app" v-cloak>
  <Navbar></Navbar>
  <div class="container">
    <h1 class="my-4">{{ $t('config.configuration') }}</h1>
    <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">{{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 buttons">
      <button class="btn btn-primary mr-3" @click="save">{{ $t('_common.save') }}</button>
      <button class="btn btn-success" @click="apply" v-if="saved && !restarted">{{ $t('_common.apply') }}</button>
    </div>
  </div>
</body>



