<template>
  <div class="d-flex">
    <div class="flex-grow-1 vb-body-left">
      <vue-perfect-scrollbar class="scroll-area">
        <div class="p-20">
          <b-form-textarea
            maxlength="799"
            id="textarea"
            style="text-align: justify"
            v-model="sms.smsbody"
            placeholder="Enter Your SMS..."
            rows="10"
            max-rows="10"
          />
          <span v-if="sms.smsbody.length == 799">You can send maximum 5 SMS</span>
          <span
            class="smscounter"
          >{{ Math.floor( (160+sms.smsbody.length)/160) }} / {{sms.smsbody.length}}</span>
        </div>
      </vue-perfect-scrollbar>
    </div>
    <div class="vb-body-right">
      <vue-perfect-scrollbar class="scroll-area">
        <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-if="sideTabsTemp.tabdetails" v-bind:class="{ vactive: sideTabsTemp.tabdetails }" class="ve-nav-img" src="../assets/img/details.png" alt>
                                <img v-if="!sideTabsTemp.tabdetails" class="ve-nav-img" src="../assets/img/details-black.png" alt>
                            </a>
              </li>-->
              <!-- <li>
                            <a href="#" @click="sideTabsTemp.tabdetails = false, sideTabsTemp.tabcontent = true, sideTabsTemp.tabbody = false">
                                <img v-if="sideTabsTemp.tabcontent" v-bind:class="{ vactive: sideTabsTemp.tabcontent }" class="ve-nav-img" src="../assets/img/content.png" alt>
                                <img v-if="!sideTabsTemp.tabcontent" class="ve-nav-img" src="../assets/img/content-black.png" alt>
                            </a>
              </li>-->
            </ul>
          </div>
        </div>
        <!-- <div v-if="sideTabsTemp.tabcontent">
                <div class="vb-p-10">
                    <div class="vb-widgets-box font-center  brn">
                        <span class="ti-shortcode font-40" style="color:#6C9229;"></span>
                        <p style="color:#6C9229; font-size:15px;">Short Code</p>

                    </div>
                </div>
        </div>-->
        <!-- <div v-if="sideTabsTemp.tabdetails">
                <tabdetails :templateDetails="templateDetails"></tabdetails>
        </div>-->
      </vue-perfect-scrollbar>
    </div>
  </div>
</template>

<script>
import tabdetails from "@/temp/comman/details";
export default {
  props: {
    sms: Object,
    templateDetails: Object,
    sideTabsTemp: Object
  },
  name: "app",
  components: {
    tabdetails
  },
  data: function() {
    return {};
  },
  computed: {},

  methods: {}
};
</script>
