<template>
  <div class="alert fade show text-center mb-0" role="alert"
    :class="[ isDismissible ? 'alert-dismissible' : '', this.alertClass ]"
    >
    <p class="m-0 fw-bold alert-heading">{{alertHeadline}}</p>
    <p class="m-0 text-body">{{alertCopy}}</p>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.7 23.7" xml:space="preserve">
        <path d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581 1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21 .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z"/>
      </svg>
    </button>
  </div>
</template>

<script>
export default {
  name: "alert",
  props: {
    alertHeadline: String,
    alertCopy: String,
    isDismissible: Boolean,
    /*
    alertClass class names:
    alert-sucess (green)
    alert-danger (red)
    alert-warning (yellow)
    alert-info (blue)
    */
    alertClass: String
  }
};
</script>

<style lang="scss">
.alert {
  button {
    display: none;
  }
  .btn-close {
    background: none;
    opacity: 1;
  }
  &.alert-dismissible {
    button {
      display: flex;
    }
  }
  &.alert-info {
    .alert-heading {
      color: $blue-700;
    }
    svg {
      fill: $blue-700;
      width: 1rem;
      height: 1rem;
    }
  }
  &.alert-danger {
    .alert-heading {
      color: $red-700;
    }
    svg {
      fill: $red-700;
      width: 1rem;
      height: 1rem;
    }
  }
  &.alert-warning {
    .alert-heading {
      color: $yellow-700;
    }
    svg {
      fill: $yellow-700;
      width: 1rem;
      height: 1rem;
    }
  }
  &.alert-success {
    .alert-heading {
      color: $green-700;
    }
    svg {
      fill: $green-700;
      width: 1rem;
      height: 1rem;
    }
  }
}
</style>
