<template>
  <div class="kyriad-direct-signature">
    <div class="df-center-y">
      <div class="kyriad-direct-signature__infos">
        <p class="kyriad-direct-signature__name">
          {{ getItemValue('name') }}
        </p>

        <p class="kyriad-direct-signature__surname">
          {{ getItemValue('surname') }}
        </p>

        <p class="kyriad-direct-signature__function">
          {{ getItemValue('function') }}
        </p>

        <p class="kyriad-direct-signature__email">
          {{ getItemValue('email') }}
        </p>

        <p class="kyriad-direct-signature__website">kyriaddirect.com</p>

        <p v-if="getItemValue('phone')" class="kyriad-direct-signature__phone">
          <span>{{ $_tr('customs.SIGNATURES.phone') }}.:</span>

          {{ getItemValue('phone') }}
        </p>

        <p
          v-if="getItemValue('cellphone')"
          class="kyriad-direct-signature__cellphone"
        >
          <span>{{ $_tr('customs.SIGNATURES.mobile') }}.:</span>
          {{ getItemValue('cellphone') }}
        </p>

        <p class="kyriad-direct-signature__hotel">
          {{ getItemValue('hotel') }}
        </p>

        <p class="kyriad-direct-signature__address">
          {{ getItemValue('address') }}
        </p>

        <p class="kyriad-direct-signature__environment">
          {{ $_tr('customs.SIGNATURES.environment') }}
        </p>
      </div>

      <img
        class="kyriad-direct-signature__logo"
        src="../../../../../assets/img/brand-forms/signature/kyriad-direct/logo.jpg"
      />
    </div>
  </div>
</template>

<script>
import templateMixin from '../../../mixins/template-mixin'

export default {
  name: 'signature-template',
  mixins: [templateMixin]
}
</script>

<style scoped lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;
@use '../../../brands-utils/kyriad-direct' as *;

.kyriad-direct-signature {
  width: 833px;

  > div {
    padding: var(--spacing-xs) var(--spacing-s) var(--spacing-xs)
      calc(var(--spacing-l) + var(--spacing-xs));
    background: #24b7d6;
    align-items: stretch;
    justify-content: space-between;
  }

  &__infos {
    position: relative;
    width: 265px;
    padding: var(--spacing-s) 0;

    p {
      color: var(--color-light);
    }
  }

  &__logo {
    width: 530px;
  }

  &__name,
  &__surname {
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    font-family: 'Arial Black', sans-serif;

    @include fontSize(22);
  }

  &__function,
  &__email,
  &__website,
  &__phone,
  &__cellphone,
  &__hotel,
  &__address {
    font-family: 'Arial', sans-serif;
  }

  &__email,
  &__website,
  &__phone,
  &__cellphone,
  &__hotel,
  &__address {
    font-size: var(--font-size-tiny);
  }

  &__email,
  &__phone span,
  &__cellphone span,
  &__hotel {
    font-weight: var(--font-weight-bold);
  }

  &__function {
    display: inline-block;
    margin-bottom: var(--spacing-s);
    text-transform: uppercase;

    @include fontSize(12);

    &::after {
      display: block;
      width: 100%;
      height: 2px;
      margin-top: var(--spacing-xs);
      background: var(--color-light);
      content: '';
    }
  }

  &__cellphone {
    margin-bottom: var(--spacing-s);
  }

  &__environment {
    position: absolute;
    right: 7px;
    bottom: 12px;

    @include fontSize(7);
  }
}
</style>
