<template>
  <div class="bg-dark text-white">
    <div class="container">
      <div class="row py-4 text-center" id="header">
        <h1>Tropicananass Leds</h1>
      </div>

      <Reconnect></Reconnect>

      <ModeSelect mode_list="{Test, Artnet, Auto, Manual}"></ModeSelect>

      <div class="row pt-2 gy-2">
        <div class="col d-flex justify-content-center">
          <form
            id="mode-input"
            class="btn-group"
            role="group"
            aria-label="Select mode"
          >
            <input
              type="radio"
              class="btn-check"
              name="mode-selection"
              id="test-mode"
              autocomplete="off"
              value="0"
              checked
            />
            <input
              type="radio"
              class="btn-check"
              name="mode-selection"
              id="artnet-mode"
              autocomplete="off"
              value="1"
            />
            <input
              type="radio"
              class="btn-check"
              name="mode-selection"
              id="auto-mode"
              autocomplete="off"
              value="2"
            />
            <input
              type="radio"
              class="btn-check"
              name="mode-selection"
              id="manual-mode"
              autocomplete="off"
              value="3"
            />
          </form>
        </div>
        <div class="col d-flex justify-content-center">
          <form
            id="pattern-input"
            class="btn-group"
            role="group"
            aria-label="Select pattern"
          >
            <input
              type="radio"
              class="btn-check"
              name="pattern-selection"
              id="pulse-pattern"
              autocomplete="off"
              value="0"
              checked
            />
            <input
              type="radio"
              class="btn-check"
              name="pattern-selection"
              id="travel-pattern"
              autocomplete="off"
              value="1"
            />
            <input
              type="radio"
              class="btn-check"
              name="pattern-selection"
              id="strobe-pattern"
              autocomplete="off"
              value="2"
            />
          </form>
        </div>
      </div>

      <div class="row pt-2 gy-2">
        <legend class="col-12 col-sm-auto">Channel</legend>
        <!-- <div class="col d-flex justify-content-center">
                <form id="channelGlobal-input" class="btn-group" role="group" aria-label="Select channel">
                    <input type="radio" class="btn-check" name="channelGlobal-selection" id="all-channel" autocomplete="off" checked>
                    <input type="radio" class="btn-check" name="channelGlobal-selection" id="none-channel" autocomplete="off">
                </form>
            </div> -->
        <div class="col d-flex justify-content-center">
          <form
            id="channel-input"
            class="btn-group"
            role="group"
            aria-label="Select channel"
          >
            <!-- todo: Change to checkbox -->
            <input
              type="radio"
              class="btn-check"
              name="channel-selection"
              id="all-channel"
              autocomplete="off"
              checked
            />
            <input
              type="radio"
              class="btn-check"
              name="channel-selection"
              id="0-channel"
              autocomplete="off"
              checked
            />
            <input
              type="radio"
              class="btn-check"
              name="channel-selection"
              id="1-channel"
              autocomplete="off"
              checked
            />
            <input
              type="radio"
              class="btn-check"
              name="channel-selection"
              id="2-channel"
              autocomplete="off"
              checked
            />
            <input
              type="radio"
              class="btn-check"
              name="channel-selection"
              id="3-channel"
              autocomplete="off"
              checked
            />
            <input
              type="radio"
              class="btn-check"
              name="channel-selection"
              id="4-channel"
              autocomplete="off"
              checked
            />
            <input
              type="radio"
              class="btn-check"
              name="channel-selection"
              id="5-channel"
              autocomplete="off"
              checked
            />
            <input
              type="radio"
              class="btn-check"
              name="channel-selection"
              id="6-channel"
              autocomplete="off"
              checked
            />
            <input
              type="radio"
              class="btn-check"
              name="channel-selection"
              id="7-channel"
              autocomplete="off"
              checked
            />
          </form>
        </div>
      </div>

      <div class="row pt-2 gy-2">
        <label
          class="form-label col-9 col-sm-2 text-sm-end"
          for="formControlRange"
          >Sensitivity</label
        >
        <span class="col-3 col-sm-1 text-end">50</span>
        <div class="col col-sm-9">
          <input
            type="range"
            class="form-range"
            id="formControlRange"
            oninput="rangeCallback(this)"
          />
        </div>
      </div>

      <div class="row pt-2 gy-2">
        <label
          class="form-label col-9 col-sm-2 text-sm-end"
          for="formControlRange"
          >Gravity</label
        >
        <span class="col-3 col-sm-1 text-end">50</span>
        <div class="col col-sm-9">
          <input
            type="range"
            class="form-range col-auto"
            id="formControlRange"
            oninput="rangeCallback(this)"
          />
        </div>
      </div>

      <div class="row pt-2 gy-2">
        <div class="col">
          <div class="form-check form-switch">
            <input
              class="form-check-input"
              type="checkbox"
              id="modulateColor"
              onclick="colorModulateCallback(this)"
            />
            <label class="form-check-label" for="modulateColor"
              >Modulate color</label
            >
          </div>
        </div>
      </div>

      <div class="row pt-2 gy-2">
        <div id="mainPicker" class="col d-flex justify-content-center"></div>
        <div
          id="modulationPicker"
          class="col d-none d-flex justify-content-center"
        ></div>
      </div>

      <div class="row pt-2 gy-2">
        <label
          class="form-label col-9 col-sm-2 text-sm-end"
          for="formControlRange"
          >Modulation speed</label
        >
        <span class="col-3 col-sm-auto text-end" id="rangeval">50</span>
        <div class="col col-sm-9">
          <input
            type="range"
            class="form-range col-auto"
            id="formControlRange"
            oninput="rangeCallback(this)"
          />
        </div>
      </div>

      <div class="row pt-2 gy-2">
        <label
          class="form-label col-9 col-sm-2 text-sm-end"
          for="formControlRange"
          >Freq</label
        >
        <span class="col-3 col-sm-auto text-end" id="rangeval">50</span>
        <div class="col col-sm-9">
          <input
            type="range"
            class="form-range col-auto"
            id="formControlRange"
            oninput="rangeCallback(this)"
          />
        </div>
      </div>
    </div>
  </div>

  <h1>Hello !!</h1>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Welcome to Your Vue.js App" />
</template>

<script>
import Reconnect from "./components/Reconnect.vue";
import ModeSelect from "./components/ModeSelect.vue";

export default {
  name: "App",
  components: {
    Reconnect,
    ModeSelect,
  },
};
</script>

<style></style>
