<template>
  <div class="q-pa-md q-gutter-y-md">
    <div
      class="flex justify-between items-center bg-white q-pa-md rounded-borders"
    >
      <div class="column justify-center text-h5" style="min-height: 36px">
        {{ $t('reports.reports') }}
      </div>
    </div>
    <div 
      class="reports__list bg-white rounded-borders q-pa-md"
      :style="{
        'grid-template-rows': `repeat(${Math.round(reports.length / 2)}, 1fr)`,
      }"
    >
      <q-btn
        v-for="(report, index) in reports"
        :key="report.id"
        :ref="report.id"
        class="reports__button"
        no-caps
        :to="{
          name: 'reports-list',
          params: {
            parentId: report.id,
            parent: report,
          },
        }"
        align="left"
      >
        <div class="flex no-wrap">
          <div style="min-width: 2.5rem" class="self-center text-right q-pr-md">{{ index + 1 }}</div>
          <div>{{ report.name }}</div>
        </div>
      </q-btn>
    </div>
  </div>
</template>

<script lang="ts" src="./list.ts"></script>

<style lang="sass">
.reports
  &__button
    background: #E0E0E0
    color: #000000
    display: block
    width: 70%
    min-width: 100%
    white-space: normal
    text-align: left
    span
      text-align: left
  &__list
    display: grid
    grid-auto-flow: column
    grid-gap: 16px 16px
.active_btn
  border: 2px solid #426b8c
</style>
