<template>
  <q-dialog
    v-model="isOpened"
    position="right"
    full-height
    maximized
    persistent
  >
    <q-card class="dialog-content full-width full-height">
      <header>Скачать пакет запросов ЛД</header>
      <main>
        <upload-status
          status="pending"
          label="В процессе разработки :)"
          :reverse-labels-order="true"
          :label-size="16"
        />
      </main>
      <footer>
        <r-btn
          outline
          label="Отмена"
          icon="pgs-close"
          color="primary"
          :disable="loading"
          @click="isOpened = false"
        />
        <r-btn
          action
          label="Скачать"
          :disable="true"
          icon-right="pgs-shevron-right-off"
        />
      </footer>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { Component, PropSync } from 'vue-property-decorator';
import Vue from 'vue';
import UploadStatus from '@/components/common/upload-status/index.vue';

@Component({
  components: { UploadStatus },
})
export default class DownloadPersonalFiles extends Vue {
  @PropSync('opened', { default: true }) isOpened: boolean;
}
</script>

<style lang="scss" scoped>
.dialog-content {
  display: grid;
  width: 600px !important;
  height: 100%;
  display: grid;
  gap: 12px;
  grid-template-rows: min-content 1fr min-content;
  background: white;
  z-index: 10;
}

header {
  padding: 8px;
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.015em;
  color: rgba(2, 12, 18, 0.9);
}

main {
  overflow: auto;
  padding: 8px;
}

footer {
  display: flex;
  justify-content: space-between;
  background: rgba(15, 32, 160, 0.08);
  position: sticky;
  bottom: 0;
  padding: 8px;
}
</style>
