<template type="text/x-template" id="skeleton">
  <span
    :style="{ height, width: computedWidth, 'background-color': bgcolor }"
    class="SkeletonBox"
  />
</template>


<template id="vue-datepicker">
<div class="row bgbox">
  <div class="col-md-6">

    <div app-field-wrapper="from_date" class="form-group">
      <?php /* <label for="date-from" class="control-label">From date</label>*/ ?>
      <div class="input-group date">
        <input type="text" id="date-from" name="date_from" v-model="frm" v-on:change="changeFrom"autocomplete="off" class="form-control" placeholder="<?= _l('filter_start_date'); ?>">
        <div class="input-group-addon">
          <i class="fa fa-calendar calendar-icon"></i>
        </div>
      </div>
    </div>

  </div>
  <div class="col-md-6">
    <div app-field-wrapper="date_to" class="form-group">
      <?php /* <label for="date-to" class="control-label">To date</label>*/ ?>
      <div class="input-group date">
        <input type="text" id="date-to" name="date_to" v-model="to" v-on:change="changeFrom" autocomplete="off" class="form-control" placeholder="<?= _l('filter_end_date'); ?>">
        <div class="input-group-addon">
          <i class="fa fa-calendar calendar-icon"></i>
        </div>
      </div>
    </div>
  </div>

</div>
</template>

<template type="text/x-template" id="chart-loader">
  <div>
    <p>Chart loader {{ is_loading }}</p>
    <slot :chartdata="request_data" :testprop="'test property'"></slot>
  </div>
</template>

<template type="text/x-template" id="chart-column">
  <div>
    <p>Test chart data {{ is_loading }}</p>

    <p v-if="chartdata.test">{{ chartdata.test }}</p>
    <p v-if="chartdata.global !== undefined ">{{ chartdata.global.from_date }}</p>


  </div>
</template>
