<template>
<h3>Channels</h3>
<table class="table mb-5">
  <thead>
    <th scope="col">Name</th>
    <th scope="col">Key</th>
    <th scope="col">Remember</th>
    <th scope="col" class="text-end">Delete</th>
  </thead>
  <tbody>
    <tr v-for="channel in channelStore.channels" :key="channel.id">
      <td class="w-25">{{ channel.name }}</td>
      <td class="w-25"><Key :channel="channel" /></td>
      <td class="w-25">
        <div class="form-check form-switch">
          <input v-if="channel.name === 'Default'" class="form-check-input" type="checkbox" checked disabled>
        </div>
      </td>
      <td class="w-25 text-end"><i v-if="channel.name !== 'Default'" class="text-danger text-end bi bi-trash-fill"></i></td>
    </tr>
  </tbody>
</table>
</template>

<script setup>
import { useChannelStore } from '../../stores/channelStore'
import Key from '../common/Key.vue'

const channelStore = useChannelStore()
</script>

<style scope>
i {
  cursor: pointer;
}
</style>