<script setup lang="ts">
import { settingsStore as settings, onChange } from "../store/settingsStore.js";
import settings_hamlib from "./settings_hamlib.vue";
import settings_tci from "./settings_tci.vue";


</script>

<template>
  <div class="input-group input-group-sm mb-1">
    <span class="input-group-text" style="width: 180px">Rig Control</span>

    <select
      class="form-select form-select-sm"
      aria-label=".form-select-sm"
      id="rigcontrol_radiocontrol"
      @change="onChange"
      v-model="settings.remote.RADIO.control"
    >
      <option selected value="disabled">
        Disabled / VOX (no rig control - use with VOX)
      </option>
      <option selected value="rigctld">Rigctld (Hamlib)</option>
      <option selected value="tci">TCI</option>
    </select>
  </div>

  <hr class="m-2" />

  <nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-hamlib" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Hamlib</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-tci" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">TCI</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-hamlib" role="tabpanel" aria-labelledby="nav-hamlib-tab" tabindex="0"><settings_hamlib /></div>
  <div class="tab-pane fade" id="nav-tci" role="tabpanel" aria-labelledby="nav-tci-tab" tabindex="0"><settings_tci /></div>
</div>


  <hr class="m-2" />

</template>
