<template>
  <div class="d-flex">
    <div class="flex-grow-1 vb-body-left">
      <div class="d-flex justify-content-center">
        <h3 class="pY-20">Please Select Channel</h3>
      </div>
    </div>

    <div class="vb-body-right">
      <div class="vb-header-right">
        <div class="vb-navbar-right">
          <ul>
            <li>
              <a
                href="#"
                @click="
                  (sideTabsTemp.tabdetails = true),
                    (sideTabsTemp.tabcontent = false),
                    (sideTabsTemp.tabbody = false)
                "
              >
                <img
                  v-bind:class="{ vactive: sideTabsTemp.tabdetails }"
                  class="ve-nav-img"
                  src="../assets/img/details.png"
                  alt
                />
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div v-if="sideTabsTemp.tabdetails">
        <tabdetails :templateDetails="templateDetails"></tabdetails>
      </div>
    </div>
  </div>
</template>

<script>
import tabdetails from "@/temp/comman/details";
export default {
  props: {
    templateDetails: Object,
    sideTabsTemp: Object,
  },
  components: {
    tabdetails,
  },
};
</script>

<style></style>
