<template>
  <div class="dashboard">
    <div class="title" v-if="this.title">
      <q-skeleton type="text" />
    </div>
    <div class="charts">
      <q-card flat bordered class="chart_area" v-for="chart in this.fakeCharts">
        <q-item-section>
          <q-item-label>
            <q-skeleton
              type="text"
              width="250px"
              class="bg-grey-3"
              style="margin-left: 125px; margin-top: 10px"
            />
          </q-item-label>
        </q-item-section>

        <q-skeleton
          height="450px"
          width="450px"
          class="bg-grey-3"
          style="margin-left: 25px; margin-top: 10px"
        />
      </q-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "BsDashboardSkeleton",
  props: ["title", "fakeCharts"],
};
</script>

<style scoped>
.dashboard {
  /* height: 100%; */
  background-color: #f7f7f7;
}
.title {
  background-color: #f7f7f7;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 15px;
  align-items: center;
}

.charts {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  height: auto;
  background-color: #f7f7f7;
  font-family: "SourceSansPro";
  font-weight: 500;
  justify-content: center;
  align-content: space-around;
  align-items: center;
  font-size: 16px;
}

.chart_area {
  min-height: 1px;
  float: left;
  margin: 10px;
  height: 500px;
  width: 500px;
}
</style>
