<template>
  <div class="ti-signature">
    <div class="df-center">
      <div class="ti-signature__left">
        <img
          v-if="getItemValue('template') === 'a'"
          src="../../../../../assets/img/brand-forms/signature/tulip-inn/blue.jpg"
        />

        <img
          v-else
          src="../../../../../assets/img/brand-forms/signature/tulip-inn/pink.jpg"
        />
      </div>

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

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

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

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

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

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

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

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

        <p class="ti-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/tulip-inn' as *;

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

  &__left {
    max-width: 216px;
  }

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

  &__fullname {
    color: #516da5;
    font-weight: var(--font-weight-bold);

    @include fontSize(21);
  }

  &__function {
    color: #81bfdc;
    text-transform: uppercase;
    font-weight: 200;

    @include fontSize(12);
  }

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

    p {
      line-height: 1;
    }

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

  &__hotel,
  &__address,
  &__phone,
  &__cellphone {
    color: #516da5;
    font-weight: var(--font-weight-bold);

    @include fontSize(10);
  }

  &__email {
    display: block;
    margin: 0 0 var(--spacing-s);
    color: #81bfdc;
    font-weight: var(--font-weight-bold);

    @include fontSize(8);
  }

  &__print {
    color: #516da5;

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