<script setup lang="ts">
import { useCommentaryStore } from '../stores/commentary';

const commentaryStore = useCommentaryStore();
</script>

<template>
  <div class="commentary-panel">
    <div class="row items-center q-mb-md">
      <div class="text-h4">
        Commentary
      </div>
      <QSpace />
      <QBtn
        color="secondary"
        outline
        icon="swap_horiz"
        label="Intercambiar lados"
        @click="commentaryStore.swapCommentators"
      />
    </div>

    <div class="row q-col-gutter-lg">
      <div class="col-12 col-md-6">
        <QCard
          flat
          bordered
        >
          <QCardSection>
            <div class="text-subtitle1 text-weight-bold">
              Left side
            </div>
          </QCardSection>
          <QSeparator />
          <QCardSection>
            <QInput
              v-model="commentaryStore.leftCommentator"
              label="Commentator"
              dense
              outlined
            />
          </QCardSection>
        </QCard>
      </div>

      <div class="col-12 col-md-6">
        <QCard
          flat
          bordered
        >
          <QCardSection>
            <div class="text-subtitle1 text-weight-bold">
              Right side
            </div>
          </QCardSection>
          <QSeparator />
          <QCardSection>
            <QInput
              v-model="commentaryStore.rightCommentator"
              label="Commentator"
              dense
              outlined
            />
          </QCardSection>
        </QCard>
      </div>
    </div>
  </div>
</template>

<style scoped>
.commentary-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>
