<template>
  <div class="card shadowed-card">
    <div :class="cardStatusClass"></div>
    <div class="card-header" v-if="$slots.header">
      <slot name="hea"></slot>
      <slot name="title">
        <h4 class="card-title">{{ title }}</h4>
      </slot>
      <div class="card-options">
        <slot name="options"></slot>
      </div>
    </div>

    <div class="card-body">
      <div class="dimmer active" v-if="loading">
        <div class="loader"></div>
        <div class="dimmer-content">
          <slot></slot>
        </div>
      </div>
      <slot v-else></slot>
    </div>

    <div class="card-footer" v-if="$slots.footer">
     <slot name="footer"></slot> 
    </div>
  </div>
</template>

<script>
export default {
  name: 'EbCard',

  props: {
    title: {
      type: String
    },
    loading: {
      type: Boolean,
      default: false
    },
    status: {
      required: false,
      default: false,
      type: Boolean
    },
    statusPosition: {
      required: false,
      validator: val => ['left', 'top'],
      default: 'top'
    },
    statusColor: {
      required: false,
      validator: val =>
        [
          'link',
          'default',
          'primary',
          'secondary',
          'ghost',
          'danger',
          'dark',
          'success',
          'info',
          'warning',
          'blue',
          'azure',
          'indigo',
          'purple',
          'pink',
          'red',
          'orange',
          'yellow',
          'lime',
          'green',
          'teal',
          'cyan',
          'gray',
          'gray-dark',
          'facebook',
          'twitter',
          'google',
          'youtube',
          'vimeo',
          'instagram',
          'pinterest',
          'bitbucket'
        ].includes(val)
    }
  },

  computed: {
    cardStatusClass() {
      return [
        this.status ? 'card-status ' : '',

        this.status && this.statusColor ? 'bg-' + this.status : '',

        this.status && this.statusPosition
          ? ' card-status-' + this.statusPosition
          : ''
      ];
    }
  }
};
</script>

<style scoped>
.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 40, 100, 0.12);
  border-radius: 3px;
}

.card-title:only-child {
    margin-bottom: 0;
}
.card-header .card-title {
    margin-bottom: 0;
}
.card-title {
    font-size: 1.125rem;
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.card-title {
  font-size: 1.125rem;
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 0;
  padding: 1.5rem 1.5rem 0;
}

.card.shadowed-card {
  padding: 16px 24px;
  border-radius: 8px;
  border: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
}

.card-header:first-child {
  border-radius: calc(3px - 1px) calc(3px - 1px) 0 0;
}

.card-header {
  background: none;
  padding: 0.5rem 1.5rem;
  display: -ms-flexbox;
  display: flex;
  min-height: 3.5rem;
  -ms-flex-align: center;
  align-items: center;
}

.card-header {
  padding: 1.5rem 1.5rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 40, 100, 0.12);
}

.dimmer {
  position: relative;
}

.dimmer.active .loader {
  display: block;
}

.dimmer .loader {
  display: none;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.dimmer.active .dimmer-content {
  opacity: 0.5;
  pointer-events: none;
}

.loader {
  display: block;
  position: relative;
  height: 2.5rem;
  width: 2.5rem;
  color: #467fcf;
}

.loader::after {
  -webkit-animation: loader 0.6s linear;
  animation: loader 0.6s linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  border-radius: 50%;
  border: 3px solid;
  border-color: transparent;
  border-top-color: currentColor;
  box-shadow: 0 0 0 1px transparent;
}

.loader::before,
.loader::after {
  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
}

.loader::before {
  border-radius: 50%;
  border: 3px solid currentColor;
  opacity: 0.15;
}

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  margin: 0;
  padding: 1.5rem 1.5rem;
  position: relative;
}
.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.5rem;
}
</style>