<template>
  <div class="rt-signature">
    <div class="df-center">
      <div class="rt-signature__left">
        <img
          src="../../../../../assets/img/brand-forms/signature/royal-tulip/logo.jpg"
        />
      </div>

      <div class="rt-signature__right">
        <p v-if="getItemValue('fullname')" class="rt-signature__fullname">
          {{ getItemValue('fullname') }}
        </p>

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

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

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

        <div class="rt-signature__phones">
          <p v-if="getItemValue('phone')" class="rt-signature__phone">
            {{ getItemValue('phone') }}
          </p>

          <span v-if="getItemValue('phone') && getItemValue('cellphone')" />

          <p v-if="getItemValue('cellphone')" class="rt-signature__cellphone">
            {{ getItemValue('cellphone') }}
          </p>
        </div>

        <a
          v-if="getItemValue('email')"
          :href="`mailto:${getItemValue('email')}`"
          class="rt-signature__email"
        >
          {{ getItemValue('email') }}
        </a>

        <p class="rt-signature__print">
          {{ $_tr('customs.SIGNATURES.environment') }}
        </p>
      </div>
    </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/royal-tulip' as *;

.rt-signature {
  width: 565px;
  height: 157px;

  &__left {
    max-width: 216px;
  }

  &__right {
    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-s);
    font-family: Poppins, sans-serif;
  }

  &__fullname {
    color: #14322d;

    @include fontSize(20);
  }

  &__function {
    color: #b98c4b;
    text-transform: uppercase;

    @include fontSize(12);
  }

  &__phones {
    display: flex;
    align-items: center;
    margin-top: var(--spacing-l);

    p {
      line-height: 1;
    }

    span {
      position: relative;
      top: 1px;
      display: block;
      width: 1px;
      height: 5px;
      margin: 0 var(--spacing-xs);
      background: #516da5;
    }
  }

  &__hotel,
  &__address,
  &__phone,
  &__cellphone {
    color: #14322d;

    @include fontSize(8);
  }

  &__email {
    display: block;
    margin: var(--spacing-xs) 0;
    color: #b98c4b;

    @include fontSize(8);
  }

  &__print {
    color: #14322d;

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