<template>
  <div class="itf-alert-banner" :class="styleVariant">
    <div v-if="count" class="itf-alert-banner__counter px-2 bg-danger text-white fw-bold text-smaller text-decoration-none d-block rounded-pill">
      {{ count > 99 ? '99+' : count }}
    </div>
    <div v-if="$listeners.close" class="itf-alert-banner__close position-absolute text-muted cursor-pointer" @click="$emit('close')">
      <itf-icon new name="close-alt" :size="20" />
    </div>
    <div v-if="multiple" class="itf-alert-banner__panel itf-alert-banner__multiple h-100 position-absolute rounded-3 border bg-muted-2"></div>
    <div class="itf-alert-banner__panel h-100 rounded-3 border bg-muted-2 d-flex gap-2 gap-md-3 align-items-start align-items-md-center">
      <slot name="icon">
        <div v-if="icon" class="itf-alert-banner__icon rounded-2 bg-danger flex-shrink-0 d-flex align-items-center justify-content-center">
          <itf-icon new :name="icon" :size="24" class="text-white" />
        </div>
      </slot>
      <div class="itf-alert-banner__content flex-grow-1 d-flex flex-column">
        <div class="fw-bold"><slot name="title">{{title}}</slot></div>
        <div class="small text-muted"><slot></slot></div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.itf-alert-banner {
  width: 100%;
  position: relative;
  max-width: 420px;

  &__counter {
    top: -12px;
    right: -12px;
    position: absolute;
    z-index: 4;
    padding-top: 3px;
    padding-bottom: 3px;
    min-width: 24px;
    text-align: center;
    @media (max-width: 768px) {
      right: 0;
    }
  }
  &__close {
    top: 8px;
    right: 8px;
    z-index: 3;
    @media (max-width: 768px) {
      top: 12px;
      right: 12px;
    }
  }
  &__panel {
    position: relative;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    z-index: 2;
    @media (max-width: 768px) {
      flex-direction: column;
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }
  }
  &__icon {
    width: 48px;
    height: 48px;
    @media (max-width: 768px) {
      width: 32px;
      height: 32px;
    }

    ::v-deep .itf-icon {

      svg {
        @media (max-width: 768px) {
          width: 16px!important;
          height: 16px!important;
        }
      }
    }
  }
  &__content {
    @media (max-width: 768px) {
      gap: 0.25rem;
    }
  }
  &__multiple {
    top: -4px;
    right: -4px;
    z-index: 1;
    width: 100%;
    @media (max-width: 768px) {
      width: calc(100% - 8px);
      right: 4px;
    }
  }

  &.mobile-content-row {

    @media (max-width: 768px) {
      .itf-alert-banner__panel {
        flex-direction: row;
        padding-right: 2.5rem;
      }
      .itf-alert-banner__content {
        gap: 0;
      }
    }
  }
}
</style>
<script>
import { Vue, Component, Prop } from 'vue-property-decorator';
import itfIcon from '@itfin/components/src/components/icon/Icon';
import itfPanelLink from '@itfin/components/src/components/panels/PanelLink.vue';

export default @Component({
  name: 'itfAlertBanner',
  components: {
    itfIcon,
    itfPanelLink,
  },
})
class AlertBanner extends Vue {
  @Prop(String) title;
  @Prop(String) icon;
  @Prop() count;
  @Prop(Boolean) multiple;
  @Prop({ type: String, default: '' }) styleVariant;
}
</script>
