<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)"
      background="#3d4e5a"
    >
      <table
        border-spacing="0"
        border-collapse="collapse"
        cellspacing="0"
        :style="{
          width: scaledValue(width),
          height: scaledValue(height),
          background: '#3d4e5a'
        }"
      >
        <tr>
          <td :style="{ width: scaledValue(24) }">
            <span />
          </td>

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

              <tr>
                <td>
                  <p
                    :style="{
                      color: '#fff',
                      margin: 0,
                      fontWeight: 700,
                      fontSize: scaledValue(25),
                      fontFamily: 'Rubrik'
                    }"
                  >
                    {{ getItemValue('firstname') }}
                  </p>
                </td>
              </tr>

              <tr>
                <td>
                  <p
                    :style="{
                      color: '#fff',
                      margin: 0,
                      fontWeight: 200,
                      fontSize: scaledValue(19),
                      fontFamily: 'Rubrik'
                    }"
                  >
                    {{ getItemValue('lastname') }}
                  </p>
                </td>
              </tr>

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

              <tr>
                <td>
                  <table
                    border-spacing="0"
                    border-collapse="collapse"
                    cellspacing="0"
                    :style="{ width: scaledValue(5) }"
                  >
                    <tr>
                      <td
                        :style="{
                          width: scaledValue(5),
                          height: scaledValue(2),
                          background: '#fdc41f',
                          borderRadius: `${scaledValue(5)} ${scaledValue(
                            5
                          )} ${scaledValue(5)} ${scaledValue(5)}`
                        }"
                      />
                    </tr>
                  </table>
                </td>
              </tr>

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

              <tr>
                <td>
                  <p
                    :style="{
                      color: '#fff',
                      margin: 0,
                      fontWeight: 700,
                      fontSize: scaledValue(14),
                      fontFamily: 'Reso'
                    }"
                  >
                    {{ getItemValue('function') }}
                  </p>
                </td>
              </tr>

              <tr>
                <td>
                  <p
                    :style="{
                      color: '#fff',
                      margin: 0,
                      fontWeight: 700,
                      fontSize: scaledValue(10),
                      fontFamily: 'Reso'
                    }"
                  >
                    {{ getItemValue('email') }}
                  </p>
                </td>
              </tr>

              <tr v-if="getItemValue('phone')">
                <td>
                  <p
                    :style="{
                      color: '#fff',
                      margin: 0,
                      fontSize: scaledValue(10),
                      fontFamily: 'Reso'
                    }"
                  >
                    Tel : {{ getItemValue('phone') }}
                  </p>
                </td>
              </tr>

              <tr>
                <td>
                  <table
                    border-spacing="0"
                    border-collapse="collapse"
                    :style="{ width: '100%' }"
                  >
                    <tr>
                      <td
                        v-if="getItemValue('phone')"
                        :style="{ width: scaledValue(15) }"
                      >
                        <span />
                      </td>

                      <td>
                        <p
                          :style="{
                            color: '#fff',
                            margin: 0,
                            fontSize: scaledValue(10),
                            fontFamily: 'Reso'
                          }"
                        >
                          {{
                            !getItemValue('phone') && getItemValue('cellphone')
                              ? `Tel : ${getItemValue('cellphone')}`
                              : getItemValue('cellphone')
                          }}
                        </p>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>

              <tr>
                <td>
                  <p
                    :style="{
                      color: '#fff',
                      margin: 0,
                      fontSize: scaledValue(9),
                      fontFamily: 'Reso'
                    }"
                  >
                    <span :style="{ fontWeight: 700 }">
                      {{ getItemValue('hotel') }}
                    </span>
                    <br />{{ getItemValue('address') }}
                  </p>
                </td>
              </tr>

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

              <tr>
                <td>
                  <table
                    border-spacing="0"
                    border-collapse="collapse"
                    cellspacing="0"
                    :style="{ width: '100%' }"
                  >
                    <tr>
                      <td>
                        <p
                          :style="{
                            display: 'inline-block',
                            color: '#fff',
                            margin: 0,
                            background: '#fdc41f',
                            fontWeight: 700,
                            fontFamily: 'Rubrik',
                            textTransform: 'uppercase',
                            fontSize: scaledValue(9),
                            padding: scaledValue(1)
                          }"
                        >
                          premiereclasse.com
                        </p>
                      </td>
                    </tr>

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

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

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

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

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

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

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

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