<template>
  <div>
    <v-card style="margin-top: 3px">
      <v-card-title>
        <v-skeleton-loader type="heading" />
      </v-card-title>
      <v-skeleton-loader type="table-thead" />
      <v-skeleton-loader type="table-row-divider@3" />
      <v-container fluid>
        <v-row align="start" align-content="start">
          <v-col>
            <v-row>
              <v-col>
                <v-skeleton-loader type="chip" />
              </v-col>
              <v-col>
                <v-skeleton-loader type="chip" />
              </v-col>
            </v-row>
            <v-row>
              <v-col>
                <v-skeleton-loader type="chip"/>
              </v-col>
              <v-col>
                <v-skeleton-loader type="chip" />
              </v-col>
            </v-row>
          </v-col>
          <v-col align-self="center">
            <v-row>
              <v-col>
                <v-skeleton-loader type="chip" />
              </v-col>
              <v-col>
                <v-skeleton-loader type="chip" />
              </v-col>
            </v-row>
            <v-card outlined>
              <v-row>
                <v-skeleton-loader type="list-item" />
                <v-spacer />
              </v-row>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </div>
</template>

<script>
export default {
  name: 'TableSkeleton'
}
</script>

<style scoped></style>
