<template>
  <div class="kd-card brand-forms--card df-center">
    <cut-line
      :card-width="scaledValue(width, false)"
      :card-height="scaledValue(height, false)"
      :size="scaledValue(cutLines, false)"
      background="#29b9d6"
    >
      <table
        border-spacing="0"
        border-collapse="collapse"
        cellspacing="0"
        :style="{
          width: scaledValue(width),
          height: scaledValue(height),
          background: '#29b9d6'
        }"
      >
        <tr :style="{ verticalAlign: 'middle' }">
          <td :style="{ width: scaledValue(72) }">
            <span />
          </td>

          <td :style="{ width: scaledValue(140) }">
            <table
              border-spacing="0"
              border-collapse="collapse"
              cellspacing="0"
              :style="{ width: '100%' }"
            >
              <tr>
                <td :style="{ height: scaledValue(65) }">
                  <span />
                </td>
              </tr>

              <tr>
                <td>
                  <img
                    data-base64="true"
                    src="../../../../../assets/img/brand-forms/card/kyriad-direct/logo-2.png"
                    :style="{ width: scaledValue(140) }"
                  />
                </td>
              </tr>

              <tr>
                <td :style="{ height: scaledValue(65) }">
                  <span />
                </td>
              </tr>
            </table>
          </td>

          <td :style="{ width: scaledValue(72) }">
            <span />
          </td>
        </tr>
      </table>
    </cut-line>

    <cut-line
      :card-width="scaledValue(width, false)"
      :card-height="scaledValue(height, false)"
      :size="scaledValue(cutLines, false)"
    >
      <table
        border-spacing="0"
        border-collapse="collapse"
        cellspacing="0"
        :style="{
          width: scaledValue(width),
          height: scaledValue(height),
          background: '#fff'
        }"
      >
        <tr :style="{ verticalAlign: 'middle' }">
          <td>
            <table>
              <tr>
                <td>
                  <table>
                    <tr>
                      <td :style="{ height: scaledValue(21) }">
                        <span />
                      </td>
                    </tr>

                    <tr>
                      <td :style="{ width: scaledValue(84) }">
                        <span />
                      </td>

                      <td :style="{ width: scaledValue(112) }">
                        <img
                          data-base64="true"
                          src="../../../../../assets/img/brand-forms/card/kyriad-direct/logo-1.png"
                          :style="{ width: scaledValue(112) }"
                        />
                      </td>

                      <td :style="{ width: scaledValue(84) }">
                        <span />
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>

              <tr>
                <td :style="{ height: scaledValue(10) }">
                  <span />
                </td>
              </tr>

              <tr>
                <td>
                  <p
                    :style="{
                      color: '#29b9d6',
                      fontFamily: 'Knockout-49Liteweight',
                      fontSize: scaledValue(12),
                      margin: 0,
                      textAlign: 'center'
                    }"
                  >
                    {{ getItemValue('fullname') }}
                  </p>
                </td>
              </tr>

              <tr>
                <td>
                  <p
                    :style="{
                      color: '#29b9d6',
                      fontFamily: 'Knockout-33JuniorHeviwt',
                      fontSize: scaledValue(7),
                      margin: 0,
                      textAlign: 'center'
                    }"
                  >
                    {{ getItemValue('function') }}
                  </p>
                </td>
              </tr>

              <tr>
                <td :style="{ height: scaledValue(15) }">
                  <span />
                </td>
              </tr>

              <tr>
                <td>
                  <p
                    :style="{
                      color: '#29b9d6',
                      fontFamily: 'Knockout-49Liteweight',
                      fontSize: scaledValue(6.5),
                      margin: 0,
                      textAlign: 'center',
                      letterSpacing: scaledValue(0.5)
                    }"
                  >
                    {{ getItemValue('email') }}
                  </p>
                </td>
              </tr>

              <tr>
                <td>
                  <p
                    :style="{
                      color: '#29b9d6',
                      fontFamily: 'Knockout-49Liteweight',
                      fontSize: scaledValue(6.5),
                      margin: 0,
                      textAlign: 'center',
                      letterSpacing: scaledValue(0.5)
                    }"
                  >
                    <template v-if="getItemValue('phone')">
                      Tel. {{ getItemValue('phone') }}
                    </template>
                    <template
                      v-if="getItemValue('phone') && getItemValue('cellphone')"
                    >
                      -
                    </template>
                    <template v-if="getItemValue('cellphone')">
                      Mob. {{ getItemValue('cellphone') }}
                    </template>
                  </p>
                </td>
              </tr>

              <tr>
                <td>
                  <p
                    :style="{
                      color: '#29b9d6',
                      fontFamily: 'Knockout-49Liteweight',
                      fontSize: scaledValue(6.5),
                      margin: 0,
                      textAlign: 'center',
                      letterSpacing: scaledValue(0.5)
                    }"
                  >
                    {{ getItemValue('hotel') }} - {{ 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: 'CardTemplate',
  components: {
    CutLine
  },
  mixins: [templateMixin],
  data() {
    return {
      width: 285,
      height: 168.3
    }
  }
}
</script>

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