<template>
  <div class="campanile-signature">
    <div class="df-center-y">
      <div class="campanile-signature__logo">
        <img
          src="../../../../../assets/img/brand-forms/signature/campanile/logo.svg"
        />

        <p>
          {{ $_tr('customs.SIGNATURES.campanile.baseline') }}
        </p>
      </div>

      <div class="campanile-signature__infos df-center-y">
        <div>
          <p
            v-if="getItemValue('fullname')"
            class="campanile-signature__fullname"
          >
            {{ getItemValue('fullname') }}
          </p>

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

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

          <p
            v-if="getItemValue('cellphone') || getItemValue('phone')"
            class="campanile-signature__phone"
          >
            <template v-if="getItemValue('phone')">
              {{ getItemValue('phone') }}
            </template>

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

            <template v-if="getItemValue('cellphone')">
              {{ getItemValue('cellphone') }}
            </template>
          </p>

          <p class="campanile-signature__email">
            campanile.com
            <span v-if="getItemValue('email')">
              | {{ getItemValue('email') }}
            </span>
          </p>
        </div>

        <img
          v-if="imageUrl"
          :src="imageUrl"
          class="campanile-signature__environment"
        />
      </div>
    </div>
  </div>
</template>

<script>
const imagesSignature = import.meta.glob(
  '../../../../../assets/img/brand-forms/signature/campanile/do-not-print-*.png',
  { eager: true, import: 'default' }
)
import templateMixin from '../../../mixins/template-mixin'

export default {
  name: 'signature-template',
  mixins: [templateMixin],
  computed: {
    imageUrl() {
      const lang = this.$_currentLang
      const path = `../../../../../assets/img/brand-forms/signature/campanile/do-not-print-${lang}.png`

      return imagesSignature[path] || ''
    }
  }
}
</script>

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

.campanile-signature {
  padding: calc(var(--spacing-l) + var(--spacing-xs)) var(--spacing-xl);
  font-family: Campanile, sans-serif;
  background: var(--color-light);

  > img,
  > div {
    width: 620px;
  }

  > img {
    margin-top: var(--spacing-s);
    border-top: 1px solid #172940;
  }

  &__logo {
    padding: var(--spacing-l) var(--spacing-m) var(--spacing-l) 0;
    margin-right: var(--spacing-m);
    border-right: 1px solid #172940;

    img {
      display: block;
      width: 100px;
      margin: auto;
    }

    p {
      margin-top: var(--spacing-s);
      text-align: center;
      font-weight: var(--font-weight-bold);

      @include fontSize(12);
    }
  }

  &__infos {
    width: calc(100% - 271px);
    justify-content: space-between;

    p:not(.campanile-signature__fullname) {
      color: #172940;
    }
  }

  &__fullname {
    color: #4eb16d;
    font-size: var(--font-size-h3);
  }

  &__function {
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;

    @include fontSize(12);
  }

  &__address,
  &__phone,
  &__email {
    @include fontSize(10);
  }

  &__address,
  &__email {
    font-weight: var(--font-weight-bold);
  }

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

  &__environment {
    margin-left: var(--spacing-m);
    width: 100px;
  }
}
</style>
