<template>
  <div class="pc-signature">
    <div class="df-center-y">
      <div class="pc-signature__infos">
        <p class="pc-signature__fullname">
          {{ getItemValue('fullname') }}
        </p>

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

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

        <p v-if="getItemValue('phone')" class="pc-signature__phone">
          Tel.: {{ getItemValue('phone') }}
        </p>

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

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

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

        <p class="pc-signature__website">premiereclasse.com</p>

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

      <img
        src="../../../../../assets/img/brand-forms/signature/pc/essential.jpg"
        class="pc-signature__baseline"
      />

      <img
        src="../../../../../assets/img/brand-forms/signature/pc/logo.jpg"
        class="pc-signature__logo"
      />
    </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/premiere-classe' as *;

.pc-signature {
  width: 833px;

  > div {
    align-items: stretch;
  }

  &__infos {
    position: relative;
    width: 288px;
    padding: var(--spacing-l) calc(var(--spacing-l) + var(--spacing-xs));
    background: #3e505e;

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

  &__baseline {
    width: 340px;
  }

  &__logo {
    width: 205px;
  }

  &__fullname {
    display: inline-block;
    padding: 0 var(--spacing-xs);
    background: #fdc41f;
    text-transform: uppercase;
    font-family: 'Rubrik', sans-serif;
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
  }

  &__function {
    margin-top: 6px;
    text-transform: uppercase;
    font-family: 'Reso', sans-serif;
    font-weight: var(--font-weight-bold);

    @include fontSize(12);

    &::after {
      display: block;
      width: 14px;
      height: 3px;
      margin: var(--spacing-xs) 0 var(--spacing-s);
      background: #fdc41f;
      content: '';
    }
  }

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

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

  &__website {
    font-weight: var(--font-weight-bold);
  }

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

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