<template>
  <v-row>
    
  </v-row>
  <div> <!-- Zone pour publier sur MQTT --> 
 <!-- Zone pour afficher la console MQTT --> 
  </div>
  <v-container>
    <v-row>
      <!-- Colonne gauche avec les deux composants empilés -->
      <v-col cols="6">
        <!-- Composant 1 -->
        <v-row>
          <v-col>
            <PublishMQTTComponent />
            <MQTTColorPublisher />

          </v-col>
        </v-row>
      </v-col>

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

<script>
import PublishMQTTComponent from '@/components/MQTTDebugPublish.vue' // Importer le composant pour publier sur MQTT
import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue' // Importer le composant pour publier sur MQTT
import MQTTColorPublisher from '@/components/MQTTColorPublisher.vue' // Importer le composant pour publier sur MQTT

export default {
  components: { 
    PublishMQTTComponent, // Composant pour publier sur MQTT MQTTConsoleComponent // Composant pour la console MQTT
    MQTTConsoleComponent, // Composant pour la console MQTT
    MQTTColorPublisher, // Composant pour publier une couleur custom dans un topic
  }
}
</script>

<style>
@media (min-width: 1024px) {
  .card__title.primary {   background-color: #d42828; /* Changez la couleur en fonction de votre thème */
  }
  .card__title.feedback {   background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
  }
  .btn{ border-radius:30px!important; background-color: #d42828; /* Changez la couleur en fonction de votre thème */
  }
}
</style>
