<template>
  <div class="pc-card brand-forms--card df-center">
    <cut-line
      :card-width="scaledValue(width, false)"
      :card-height="scaledValue(height, false)"
      :size="scaledValue(cutLines, false)"
    >
      <table
        :style="{ width: scaledValue(width), height: scaledValue(height) }"
        border-spacing="0"
        border-collapse="collapse"
        cellspacing="0"
      >
        <tr>
          <td>
            <img
              :style="{
                margin: 0,
                width: scaledValue(260),
                height: scaledValue(166)
              }"
              src="../../../../../assets/img/brand-forms/card/royal-tulip/recto.jpg"
              data-base64="true"
            />
          </td>
        </tr>
      </table>
    </cut-line>

    <cut-line
      :card-width="scaledValue(width, false)"
      :card-height="scaledValue(height, false)"
      :size="scaledValue(cutLines, false)"
    >
      <table
        :style="{ width: scaledValue(width), height: scaledValue(height) }"
        border-spacing="0"
        border-collapse="collapse"
        cellspacing="0"
      >
        <tr :style="{ verticalAlign: 'top' }">
          <td :style="{ width: scaledValue(width) }">
            <table
              :style="{ width: '100%' }"
              border-spacing="0"
              border-collapse="collapse"
              cellspacing="0"
            >
              <tr>
                <td :style="{ height: scaledValue(8) }">
                  <span />
                </td>
              </tr>
              <tr>
                <td>
                  <table>
                    <tr>
                      <td :style="{ width: scaledValue(118) }">
                        <span />
                      </td>
                      <td>
                        <img
                          data-base64="true"
                          src="../../../../../assets/img/brand-forms/card/royal-tulip/logo.png"
                          :style="{
                            margin: 0,
                            width: scaledValue(20),
                            height: scaledValue(20)
                          }"
                        />
                      </td>
                      <td :style="{ width: scaledValue(118) }">
                        <span />
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td :style="{ height: scaledValue(8) }">
                  <span />
                </td>
              </tr>
              <tr>
                <td>
                  <p
                    :style="{
                      color: '#c88f3e',
                      fontFamily: 'GillSansStd',
                      fontSize: scaledValue(13),
                      margin: 0,
                      fontWeight: 700,
                      textAlign: 'center'
                    }"
                  >
                    {{ getItemValue('fullname') }}
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <p
                    :style="{
                      color: '#c88f3e',
                      fontFamily: 'GillSansStd',
                      fontSize: scaledValue(10),
                      margin: 0,
                      fontWeight: 300,
                      textAlign: 'center'
                    }"
                  >
                    {{ getItemValue('function') }}
                  </p>
                </td>
              </tr>
              <tr>
                <td :style="{ height: scaledValue(6) }">
                  <span />
                </td>
              </tr>
              <tr>
                <td>
                  <p
                    :style="{
                      color: '#c88f3e',
                      fontFamily: 'GillSansStd',
                      fontSize: scaledValue(7),
                      margin: 0,
                      fontWeight: 300,
                      textAlign: 'center'
                    }"
                  >
                    {{ getItemValue('phone') }}

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

                    {{ getItemValue('cellphone') }}
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <p
                    :style="{
                      color: '#c88f3e',
                      fontFamily: 'GillSansStd',
                      fontSize: scaledValue(7),
                      margin: 0,
                      fontWeight: 300,
                      textAlign: 'center'
                    }"
                  >
                    {{ getItemValue('email') }}
                  </p>
                </td>
              </tr>
              <tr>
                <td :style="{ height: scaledValue(6) }">
                  <span />
                </td>
              </tr>
              <tr>
                <td>
                  <table>
                    <tr>
                      <td :style="{ width: scaledValue(125) }">
                        <span />
                      </td>
                      <td>
                        <img
                          :style="{
                            margin: 0,
                            width: scaledValue(6),
                            height: scaledValue(6)
                          }"
                          src="../../../../../assets/img/brand-forms/card/royal-tulip/icon.png"
                          data-base64="true"
                        />
                      </td>
                      <td :style="{ width: scaledValue(125) }">
                        <span />
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td :style="{ height: scaledValue(6) }">
                  <span />
                </td>
              </tr>
              <tr>
                <td>
                  <p
                    :style="{
                      color: '#003782',
                      fontFamily: 'GillSansStd',
                      fontSize: scaledValue(7),
                      margin: 0,
                      fontWeight: 300,
                      textAlign: 'center'
                    }"
                  >
                    {{ getItemValue('hotel') }}
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <p
                    :style="{
                      color: '#003782',
                      fontFamily: 'GillSansStd',
                      fontSize: scaledValue(7),
                      margin: 0,
                      fontWeight: 300,
                      textAlign: 'center'
                    }"
                  >
                    {{ getItemValue('address') }}
                  </p>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </cut-line>
  </div>
</template>

<script>
import templateMixin from '../../../mixins/template-mixin'
import CutLine from '../../../utils/CutLine'

export default {
  name: 'signature-template',
  components: {
    CutLine
  },
  mixins: [templateMixin],
  data() {
    return {
      width: 260,
      height: 168
    }
  }
}
</script>

<style scoped lang="scss">
@use '../../../brands-utils/royal-tulip' as *;
</style>
