<template>
<Sidebar />
<Content>
  <template v-slot:title>Settings</template>
  <template v-slot:content>
    <h3>Channels</h3>
    <table class="table">
      <thead>
        <th scope="col">Name</th>
        <th scope="col">Key</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 text-end"><i class="deleteChannel bi bi-trash-fill text-danger text-end"></i></td>
        </tr>
      </tbody>
    </table>
    <h3>Add channel</h3>
    <div class="row mb-3">
      <div class="col">
        <input type="text" class="form-control" placeholder="Channel name" aria-label="Channel name">
      </div>
      <div class="col">
        <input type="password" class="form-control" placeholder="Channel key" aria-label="Channel key">
      </div>
    </div>
    <button type="submit" class="btn btn-primary float-end">Add channel</button>
  </template>
</Content>

</template>

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

const channelStore = useChannelStore()
</script>

<style scope>
.deleteChannel {
  cursor: pointer;
}
</style>