<template>
  <q-page class="w-page row col-12 items-start" :padding="padding">
    <transition appear enter-active-class="animated fadeIn">
      <div class="col-12" :class="{ 'offset-md-2': offset, 'col-md-8': offset }">
        <div class="row justify-between items-end no-wrap">
          <slot class="col" name="title">
            <div class="text-page-title">
              {{ title }}
            </div>
          </slot>
          <div class="row no-wrap col-auto">
            <slot name="title-center">
              <q-space />
            </slot>
          </div>
          <div class="row no-wrap col-auto">
            <slot name="title-right">
              <q-space />
            </slot>
          </div>
          <slot class="col-auto" name="action-btn" />
        </div>
        <div class="row q-col-gutter-sm q-mt-md">
          <div v-if="showInfo" class="col-xs-12 col-sm-auto" :class="ieClassOverrideInfoCard">
            <w-info-card :details="details">
              <template #items>
                <slot name="info" />
              </template>
              <template #actions>
                <w-btn v-if="buttonLabel" class="full-width" :label="buttonLabel" :icon-right="buttonIcon" color="primary" @click="$emit('btn-click')" />
                <slot name="buttons" />
              </template>
            </w-info-card>
          </div>
          <div class="col-sm col-xs-12 q-gutter-y-md" :class="ieClassOverridePageCard">
            <q-card class="full-width">
              <template v-if="$slots.filters">
                <q-card-section class="filters">
                  <div class="row">
                    <slot name="filters" />
                  </div>
                </q-card-section>
                <q-separator />
              </template>
              <q-img v-if="imgSrc" loading="eager" :src="imgSrc" style="display: block; margin-left: auto; margin-right: auto; width: 40%;" />
              <slot name="chip" />
              <q-card-section class="relative-position content">
                <slot />
                <q-inner-loading :showing="loading" />
              </q-card-section>
            </q-card>
            <slot name="footer" />
          </div>
        </div>
      </div>
    </transition>
    <slot name="dialogs" />
  </q-page>
</template>

<script>
export default {
  name: "WPage",
  props: {
    offset: {
      type: Boolean,
      default: false,
    },
    padding: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    details: {
      type: Array,
      default: null,
    },
    imgSrc: {
      type: String,
      default: null,
    },
    buttonLabel: {
      type: String,
      default: null,
    },
    buttonIcon: {
      type: String,
      default: "fal fa-check"
    },
    withdrawLabel: {
      type: String,
      default: null,
    },
    withdrawIcon: {
      type: String,
      default: "fal fa-times"
    },
  },
  emits: ["btn-click"],
  computed: {
    showInfo() {
      return this.details || this.$slots.info;
    },
    // IE does not handle col-auto + col if col content would overlap it's given area. Fixed sizing is required.
    ieClassOverridePageCard() {
      return {
        "col-sm-8": this.$q.platform.is.ie && this.showInfo,
      };
    },
    ieClassOverrideInfoCard() {
      return {
        "col-sm-4": this.$q.platform.is.ie,
      };
    },
  },
};
</script>

