<template>
  <div class="gt-signature">
    <div class="df-center">
      <div class="gt-signature__left">
        <p v-if="getItemValue('fullname')" class="gt-signature__fullname">
          {{ getItemValue('fullname') }}
        </p>

        <p v-if="getItemValue('title')" class="gt-signature__title">
          {{ getItemValue('title') }}
        </p>

        <p v-if="getItemValue('address')" class="gt-signature__address">
          <span>{{ getItemValue('hotel') }}</span>
          <br />
          {{ getItemValue('address') }}
        </p>

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

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

        <p class="gt-signature__brand">goldentulip.com</p>
      </div>

      <div class="gt-signature__right">
        <img
          src="../../../../../assets/img/brand-forms/signature/golden-tulip/illustration.png"
        />

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

.gt-signature {
  width: 840px;
  height: 291px;

  > div {
    align-items: stretch;
  }

  > img {
    width: 100%;
  }

  &__left {
    width: 40%;
    padding: var(--spacing-l) calc(var(--spacing-l) + var(--spacing-xl));
    background: #fdd61d;
  }

  &__right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    min-height: 210px;
    background: #002f40;

    img {
      position: relative;
      top: -12px;
    }

    p {
      position: absolute;
      bottom: 10px;
      left: 32px;
      color: var(--color-light);

      @include fontSize(12);
    }
  }

  p:not(.gt-signature__fullname):not(.gt-signature__print) {
    font-family: 'Metric', sans-serif;

    @include fontSize(15);
  }

  &__fullname {
    font-family: 'Dala Floda', Serif;

    @include fontSize(23);
  }

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

  &__address {
    margin: var(--spacing-s) 0;

    span {
      font-weight: var(--font-weight-bold);
    }
  }

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

  &__brand {
    margin-top: var(--spacing-s);
    color: var(--color-light);
    font-weight: var(--font-weight-bold);
  }
}
</style>
