<template>
  <header class="full-width background-white top-padding-large bottom-margin-large">
    <div class="container-fluid flex flex-row middle-xs bottom-padding-medium">
      <div class="flex-1">
        <h1 class="bigger-text-x-small text-dark text-bold flex flex-row middle-xs">
          {{title}}
          <a
            v-if="help"
            :href="help"
            class="text-medium text-primary padding-x-small"
            target="_blank"
          >
            <i class="fas fa-question-circle"></i>
          </a>
        </h1>
        <div class="flex flex-row middle-xs top-margin-x-small">
          <div
            class="flex flex-row middle-xs"
            v-for="(breadcrumb, breadcrumbIndex) in breadcrumbs"
            :key="breadcrumbIndex"
          >
            <i class="fas fa-angle-right text-small text-gray padding-x-small" v-if="breadcrumbIndex !== 0"></i>
            <a :href="breadcrumb.href"
              :class="['text-small text-gray hover:text-primary text-decoration-none vertical-padding-x-small right-padding-x-small', {'left-padding-x-small': breadcrumbIndex !== 0}]"
            >{{breadcrumb.text}}</a>
          </div>
        </div>
      </div>
      <div
        v-if="hasDefaultSlot"
        class="header-actions flex"
      >
        <slot></slot>
      </div>
    </div>
    <div
      v-if="hasNotificationSlot"
      class="container-fluid"
    >
      <slot name="notification"></slot>
    </div>
    <div
      v-if="tabs && tabs.length"
      class="container-fluid"
    >
      <base-tabs
        :options="tabs"
        @click-tab="onChangeTab"
      ></base-tabs>
    </div>
  </header>
</template>

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

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