<template>
  <div
    class="flex middle-xs center-xs center-middle-fixed full-width full-height"
    :class="[{'overlay-black-6': overlay}]"
    style="z-index:10"
  >

    <div
      :class="[`vue-modal-${size}`, {'full-height': fullHeight}]"
      class="flex flex-column flex-nowrap background-white shadow-large rounded-x-small full-width hidden-overflow"
    >
      <header v-if="$slots.header || title" class="flex-auto full-width">
        <slot name="header">
          <div v-if="title && size !== 'small'" class="flex flex-row flex-nowrap middle-xs full-width bottom-border-gray">
            <div v-if="$slots.aside">
              <base-button
                size="large"
                square
                apperance="white"
                @click.native="onClickAside">
                <template #icon>
                  <i class="fas fa-bars"></i>
                </template>
              </base-button>
            </div>
            <span
              class="flex-1 text-medium text-dark text-bold text-ellipsis vertical-padding-medium right-padding-medium"
              :class="[{'left-padding-medium': !$slots.aside}]">
              {{title}}
            </span>
            <div class="left-border-gray">
              <base-button
                size="large"
                apperance="white"
                square
                :disabled="disabled"
                @click.native="$emit('close')">
                <template #icon>
                  <i class="fas fa-times" />
                </template>
              </base-button>
            </div>
          </div>

          <div v-if="title && size === 'small'" class="flex flex-row flex-nowrap between-xs middle-xs horizontal-padding-medium top-padding-medium">
            <span class="text-medium text-dark text-bold text-ellipsis">{{title}}</span>
            <div>
              <base-button
                size="small"
                apperance="white"
                square
                :disabled="disabled"
                @click.native="$emit('close')">
                <template #icon>
                  <i class="fas fa-times"></i>
                </template>
              </base-button>
            </div>
          </div>
        </slot>
      </header>

      <div v-if="$slots.default" class="flex flex-row flex-nowrap flex-1 full-width auto-overflow rel">
        <aside
          v-if="$slots.aside"
          v-show="showAside"
          class="flex flex-column flex-nowrap flex-start background-white right-border-gray"
        >
          <div v-if="$slots.asideHeader" class="full-width">
            <slot name="asideHeader"></slot>
          </div>
          <div class="flex-1 full-width auto-overflow">
            <slot name="aside"></slot>
          </div>
          <div v-if="$slots.asideFooter" class="full-width">
            <slot name="asideFooter"></slot>
          </div>
        </aside>

        <div class="flex-1 full-width" :class="{'hidden-overflow': !slotDefaultOverflowAuto}">
          <slot></slot>
        </div>
      </div>

      <footer v-if="$slots.footer" class="flex-auto full-width">
        <slot name="footer"></slot>
      </footer>
    </div>

    <slot name="modal"></slot>
  </div>
</template>

<style src="../../identity.css"></style>
<style scoped src="./styles.css" /></style>

<script src="./scripts.js"></script>