<template>
  <div class="campanile brand-forms--card df-center">
    <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"
        cellpadding="0"
        :style="{ width: scaledValue(width), height: scaledValue(height) }"
      >
        <tr :style="{ width: '100%' }">
          <td
            :style="{
              width: scaledValue(29),
              height: scaledValue(29)
            }"
          >
            <span />
          </td>

          <td :style="{ width: scaledValue(226) }">
            <table
              border-spacing="0"
              border-collapse="collapse"
              cellspacing="0"
              cellpadding="0"
              :style="{ width: scaledValue(226) }"
            >
              <th
                :style="{
                  height: scaledValue(35)
                }"
              >
                <span />
              </th>

              <tr>
                <td
                  :style="{ width: scaledValue(113), height: scaledValue(113) }"
                >
                  <div
                    :style="{
                      width: scaledValue(113),
                      height: scaledValue(113),
                      background: '#00386a',
                      borderRadius: `${scaledValue(113 / 2)} ${scaledValue(
                        113 / 2
                      )} ${scaledValue(113 / 2)} ${scaledValue(113 / 2)}`
                    }"
                  >
                    <table
                      border-spacing="0"
                      border-collapse="collapse"
                      cellspacing="0"
                      cellpadding="0"
                      :style="{
                        width: scaledValue(113),
                        height: scaledValue(113)
                      }"
                    >
                      <th
                        :style="{
                          height: scaledValue(30)
                        }"
                      >
                        <span />
                      </th>

                      <tr>
                        <td>
                          <p
                            :style="{
                              color: '#fff',
                              fontFamily: 'Campanile',
                              textAlign: 'center',
                              fontSize: scaledValue(25),
                              margin: 0,
                              width: scaledValue(113)
                            }"
                          >
                            Hello,
                          </p>
                        </td>
                      </tr>

                      <th
                        :style="{
                          height: scaledValue(30)
                        }"
                      >
                        <span />
                      </th>
                    </table>
                  </div>
                </td>

                <td
                  :style="{ width: scaledValue(113), height: scaledValue(113) }"
                >
                  <div
                    :style="{
                      width: scaledValue(113),
                      height: scaledValue(113),
                      background: '#41b170',
                      borderRadius: `${scaledValue(113 / 2)} ${scaledValue(
                        113 / 2
                      )} ${scaledValue(113 / 2)} ${scaledValue(113 / 2)}`
                    }"
                  />
                </td>
              </tr>

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

          <td
            :style="{
              width: scaledValue(29),
              height: scaledValue(29)
            }"
          >
            <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"
        cellpadding="0"
        :style="{ width: scaledValue(width), height: scaledValue(height) }"
      >
        <tr :style="{ height: scaledValue(height) }">
          <td :style="{ width: scaledValue(45) }">
            <span />
          </td>

          <td
            :style="{
              width: scaledValue(190),
              align: 'center'
            }"
          >
            <div>
              <table
                border-spacing="0"
                border-collapse="collapse"
                cellspacing="0"
                cellpadding="0"
                :style="{ width: '100%' }"
              >
                <th
                  :style="{
                    height: scaledValue(
                      getItemValue('cellphone') && getItemValue('phone')
                        ? 20
                        : 30
                    )
                  }"
                >
                  <span />
                </th>

                <tr>
                  <td>
                    <img
                      :style="{
                        margin: 0,
                        width: scaledValue(95),
                        height: scaledValue(18)
                      }"
                      data-base64="true"
                      src="../../../../../assets/img/brand-forms/card/campanile/logo.png"
                      class="campanile__logo"
                    />
                  </td>
                </tr>

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

                <tr>
                  <td>
                    <p
                      :style="{
                        color: '#00386a',
                        fontFamily: 'Campanile',
                        fontSize: scaledValue(10),
                        margin: 0,
                        fontWeight: 700
                      }"
                    >
                      {{ getItemValue('fullname') }}
                    </p>
                  </td>
                </tr>

                <tr>
                  <td>
                    <p
                      :style="{
                        color: '#00386a',
                        fontFamily: 'Campanile',
                        fontSize: scaledValue(9),
                        margin: 0
                      }"
                    >
                      {{ getItemValue('function') }}
                    </p>
                  </td>
                </tr>

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

                <tr>
                  <td>
                    <p
                      :style="{
                        color: '#00386a',
                        fontFamily: 'Campanile',
                        fontSize: scaledValue(9),
                        margin: 0
                      }"
                    >
                      {{ getItemValue('email') }}
                    </p>
                  </td>
                </tr>

                <tr>
                  <td>
                    <p
                      :style="{
                        color: '#00386a',
                        fontFamily: 'Campanile',
                        fontSize: scaledValue(9),
                        margin: 0
                      }"
                    >
                      {{ getItemValue('cellphone') }}
                    </p>
                  </td>
                </tr>

                <tr>
                  <td>
                    <p
                      :style="{
                        color: '#00386a',
                        fontFamily: 'Campanile',
                        fontSize: scaledValue(9),
                        margin: 0
                      }"
                    >
                      {{ getItemValue('phone') }}
                    </p>
                  </td>
                </tr>

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

                <tr>
                  <td>
                    <p
                      :style="{
                        color: '#00386a',
                        fontFamily: 'Campanile',
                        fontSize: scaledValue(9),
                        margin: 0
                      }"
                    >
                      {{ getItemValue('hotel') }}
                    </p>
                  </td>
                </tr>

                <tr>
                  <td>
                    <p
                      :style="{
                        color: '#00386a',
                        fontFamily: 'Campanile',
                        fontSize: scaledValue(9),
                        margin: 0
                      }"
                    >
                      {{ getItemValue('address') }}
                    </p>
                  </td>
                </tr>

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

                <tr>
                  <td>
                    <p
                      :style="{
                        color: '#00386a',
                        fontFamily: 'Campanile',
                        fontSize: scaledValue(9),
                        margin: 0,
                        fontWeight: 700
                      }"
                    >
                      campanile.com
                    </p>
                  </td>
                </tr>
              </table>
            </div>
          </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: 186
    }
  }
}
</script>

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