<template>
  <div class="ti-card brand-forms--card df-center">
    <cut-line
      :card-width="scaledValue(width, false)"
      :card-height="scaledValue(height, false)"
      :size="scaledValue(cutLines, false)"
      :background="getItemValue('template') === 'a' ? '#a092c6' : '#f2a0a2'"
    >
      <table
        :style="{ width: scaledValue(width), height: scaledValue(height) }"
        border-spacing="0"
        border-collapse="collapse"
        cellspacing="0"
      >
        <tr>
          <td>
            <img
              v-if="getItemValue('template') === 'a'"
              :style="{
                margin: 0,
                width: scaledValue(280),
                height: scaledValue(182)
              }"
              src="../../../../../assets/img/brand-forms/card/tulip-inn/purple.jpg"
              data-base64="true"
            />

            <img
              v-else-if="getItemValue('template') === 'b'"
              :style="{
                margin: 0,
                width: scaledValue(280),
                height: scaledValue(182)
              }"
              src="../../../../../assets/img/brand-forms/card/tulip-inn/pink.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)"
      :background="getItemValue('template') === 'a' ? '#a092c6' : '#f2a0a2'"
    >
      <table
        :style="{ width: scaledValue(width), height: scaledValue(height) }"
        border-spacing="0"
        border-collapse="collapse"
        cellspacing="0"
      >
        <tr :style="{ verticalAlign: 'top' }">
          <td :style="{ width: scaledValue(35) }">
            <span />
          </td>

          <td :style="{ width: scaledValue(216) }">
            <table
              :style="{ width: '100%' }"
              border-spacing="0"
              border-collapse="collapse"
              cellspacing="0"
            >
              <tr>
                <td :style="{ height: scaledValue(10) }">
                  <span />
                </td>
              </tr>
              <tr>
                <td>
                  <table>
                    <tr>
                      <td :style="{ width: scaledValue(123) }">
                        <span />
                      </td>
                      <td>
                        <img
                          :style="{
                            margin: 0,
                            width: scaledValue(86),
                            height: scaledValue(22.2)
                          }"
                          src="../../../../../assets/img/brand-forms/card/tulip-inn/logo.png"
                          data-base64="true"
                        />
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td :style="{ height: scaledValue(25) }">
                  <span />
                </td>
              </tr>
              <tr>
                <td>
                  <p
                    :style="{
                      color: '#ffffff',
                      fontFamily: 'Overpass',
                      fontSize: scaledValue(11),
                      margin: 0,
                      fontWeight: 700,
                      lineHeight: 0.6
                    }"
                  >
                    {{ getItemValue('fullname') }}
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <p
                    :style="{
                      color: '#ffffff',
                      fontFamily: 'Overpass',
                      fontSize: scaledValue(9),
                      margin: 0,
                      lineHeight: 0.6
                    }"
                  >
                    {{ getItemValue('function') }}
                  </p>
                </td>
              </tr>
              <tr>
                <td :style="{ height: scaledValue(8) }">
                  <span />
                </td>
              </tr>
              <tr>
                <td>
                  <p
                    :style="{
                      color: '#ffffff',
                      fontFamily: 'Overpass',
                      fontSize: scaledValue(7),
                      margin: 0,
                      lineHeight: 0.8
                    }"
                  >
                    {{ getItemValue('cellphone') }}
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <p
                    :style="{
                      color: '#ffffff',
                      fontFamily: 'Overpass',
                      fontSize: scaledValue(7),
                      margin: 0,
                      lineHeight: 0.8
                    }"
                  >
                    {{ getItemValue('phone') }}
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <p
                    :style="{
                      color: '#ffffff',
                      fontFamily: 'Overpass',
                      fontSize: scaledValue(7),
                      margin: 0,
                      lineHeight: 0.8
                    }"
                  >
                    {{ getItemValue('email') }}
                  </p>
                </td>
              </tr>
              <tr>
                <td :style="{ height: scaledValue(8) }">
                  <span />
                </td>
              </tr>
              <tr>
                <td>
                  <p
                    :style="{
                      color: '#ffffff',
                      fontFamily: 'Overpass',
                      fontSize: scaledValue(7),
                      margin: 0,
                      lineHeight: 0.8
                    }"
                  >
                    {{ getItemValue('hotel') }}
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <p
                    :style="{
                      color: '#ffffff',
                      fontFamily: 'Overpass',
                      fontSize: scaledValue(7),
                      margin: 0,
                      lineHeight: 0.8
                    }"
                  >
                    {{ getItemValue('address') }}
                  </p>
                </td>
              </tr>
              <tr>
                <td :style="{ height: scaledValue(8) }">
                  <span />
                </td>
              </tr>
            </table>
          </td>

          <td :style="{ width: scaledValue(15) }">
            <span />
          </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: 280,
      height: 184
    }
  }
}
</script>

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

.ti-card {
  p {
    line-height: 1.5 !important;
  }
}
</style>
