<template>
  <v-container>
    <v-row>
      <!-- Colonne gauche avec les trois composants empilés -->
      <v-col cols="6" class="d-flex flex-column" style="align-items: stretch; height: 100%;">
        <PublishMQTTComponent />
        <MQTTColorPublisher />
        <WSDebugControl />
      </v-col>

      <!-- Colonne droite avec le composant unique -->
      <v-col cols="6">
        <MQTTConsoleComponent />
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
import PublishMQTTComponent from '@/components/MQTTDebugPublish.vue';
import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue';
import MQTTColorPublisher from '@/components/MQTTColorPublisher.vue';
import WSDebugControl from '@/components/WSDebugControl.vue';
</script>

<style scoped>
@media (min-width: 1024px) {
  .card__title.primary {
    background-color: rgba(var(--v-theme-primary)); /* Couleur basée sur le thème */
  }
  .card__title.feedback {
    background-color: rgba(var(--v-theme-success)); /* Couleur basée sur le thème */
  }
  .btn {
    border-radius: 30px !important;
    background-color: rgba(var(--v-theme-primary)); /* Couleur basée sur le thème */
  }
}
</style>
