const template = html`
  <div>
    <div class="row">
      <hi></hi>
      <statistics></statistics>
      <quicklinks></quicklinks>
    </div>
    <div class="row">
      <div class="widget-classic">
        
          <ul class="nav nav-tabs">
            <li role="presentation" :class="{ active: activeTab == 1 }">
              <a @click="setTab(1)">My Tasks</a>
            </li>
            <li role="presentation":class="{ active: activeTab == 2 }">
              <a @click="setTab(2)">Repairs</a></li>
            <li role="presentation":class="{ active: activeTab == 3 }">
              <a @click="setTab(3)">Remote Support</a>
            </li>
          </ul>
          <div class="widget-content">
          <mytasks v-if="activeTab == 1"></mytasks>
          <statistics v-if="activeTab == 2"></statistics>
          <quicklinks v-if="activeTab == 3" ></quicklinks>
          </div>
        </div>
      </div>
    </div>
  </div>
`;
import hi from "./hi.js";
import statistics from "./statistics.js";
import quicklinks from "./quicklinks.js";
import mytasks from "./mytasks/main.js";
export default {
  data: function() {
    return {
      name: "Sam Cross",
      MessageOfDay: "this is a message of the day",
      activeTab: 1
    };
  },
  components: {
    hi,
    statistics,
    quicklinks,
    mytasks
  },
  methods: {
    setTab(tab) {
      this.activeTab = tab;
    }
  },
  template
};
