<template>
  <div class="Header">
    <div class="Header_Row Header_Row__Center">
      <div class="Header_BackButtonSection" v-if="parrentComponents">
        <q-btn
          class="Header_BackButton"
          icon="pgs-arrow-left"
          dense
          size="sm"
          @click="bgoBack"
        />
      </div>
      <div class="Header_Headline">
        <slot name="headline">
          <q-skeleton v-if="loading" type="text" height="26px" />
          <template v-else>
            <span>{{ headline }}</span>
          </template>
        </slot>
      </div>
      <div class="Header_Separator" style="flex-grow: 1" />
      <div class="Header_ActionButtons">
        <q-skeleton type="QBtn" v-if="loading" />
        <slot name="action-buttons" v-else />
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.Header {
  display: flex;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 16px;
  padding-bottom: 28px;

  flex-flow: column nowrap;

  &_Row {
    display: flex;
    flex-flow: row nowrap;

    margin-bottom: 8px;
    &:last-child {
      margin-bottom: 0;
    }

    &__Center {
      align-items: center;
    }
  }

  &_BackButtonSection {
    flex: none;
    padding-right: 8px;
  }

  &_BackButton {
    border: 1px solid rgba(1, 72, 116, 0.18) !important;
    border-radius: 24px !important;
    color: #1491CF !important;
    padding-left: 4px;
    padding-right: 4px;
  }

  &_Headline {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 26px;
    letter-spacing: -0.02em;
    color: rgba(2, 12, 18, 0.9);
  }

  &_SectionHeadline {
    overflow-x: hidden;
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    padding: 0 8px 0px 8px;
    color: rgba(2, 12, 18, 0.58);
  }

  &_HeadlineGroup {
    padding-bottom: 8px;
  }

  &_Headline {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: rgba(2, 12, 18, 0.9);
  }

  &_SubLine {
    font-family: 'Golos UI', sans-serif;
    font-style: normal;
    font-size: 14px;
    line-height: 16px;
    color: rgba(2, 12, 18, 0.59);
    margin-top: 12px;
  }

  &_Separator {
    min-width: 16px;
  }

  &_ActionButtons {
    flex-flow: row nowrap;
    justify-content: flex-end;

    & > * {
      margin-right: 8px;
    }
    & > *:last-child {
      margin-right: 0;
    }
  }
}
</style>

<script lang="ts" src="./index.ts" />
