<template>
  <div class="CardHeader">
    <div class="CardHeader_Row CardHeader_Row__Center">
      <div class="CardHeader_BackButtonSection">
        <q-btn
          class="CardHeader_BackButton"
          icon="pgs-arrow-left"
          dense
          size="sm"
          @click="bgoBack"
        />
      </div>
      <div>
        <div class="CardHeader_Container row">
          <div class="CardHeader_SectionHeadline">
            <slot name="section-headline">
              <span v-if="!!sectionHeadline">{{ sectionHeadline }}</span>
              <!-- <span>
                <q-skeleton v-if="loading" type="text" />
                <template v-else>
                  {{ sectionHeadline }}
                </template>
              </span> -->
            </slot>
          </div>
          <div class="CardHeader_Content col-shrink order-status">
            <q-skeleton
              v-if="loading && !!$slots.default"
              type="QBadge"
              class="full-height"
              style="width: 170px"
            />
            <slot v-else />
          </div>
        </div>
      </div>
      <div class="CardHeader_Separator" style="flex-grow: 1" />
      <div class="CardHeader_ActionButtons">
        <div class="row justify-end q-gutter-y-sm">
          <q-skeleton type="QBtn" v-if="loading" />
          <slot name="action-buttons" v-else>
            <!-- <div :key="createUUID()" v-for="button in visibleCustomComponents">
              <component
                :key="createUUID()"
                :common="common"
                :button-settings="button"
                :model="model"
                :user-task="userTask"
                :disable-all-buttons="disableAllButtons"
                :is="components[button.componentPath]"
                :disable="disableAllButtons || button.props.disable"
                v-bind="button.componentProps"
                @submit="submit"
                @update="update"
                @commonModels="upCommonModels"
              >
                <q-tooltip v-if="!!button.tooltip">
                  {{ button.tooltip }}
                </q-tooltip>
              </component>
            </div> -->
          </slot>
        </div>
      </div>
    </div>
    <div class="CardHeader_Row CardHeader_Row__Top">
      <div class="CardHeader_HeadlineGroup">
        <div class="CardHeader_Headline">
          <slot name="headline">
            <q-skeleton v-if="loading" type="text" height="26px" />
            <template v-else>
              <span>{{ headline }}</span>
            </template>
          </slot>
        </div>
        <div class="CardHeader_SubLine">
          <slot name="subline">
            <q-skeleton v-if="loading" height="15px" />
            <template v-else>
              {{ subline }}
            </template>
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.CardHeader {
  background-color: rgba(53, 126, 172, 0.05);
  display: flex;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 16px;

  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;
  }

  &_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;
  }
}
</style>

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