<template>
  <div class="hotpay-badge-ssl" :class="theme">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212 228">
      <g v-if="theme === 'dark'"><g fill="none" fill-rule="evenodd"><path fill="#242424" d="M0 23l22.7 169.7 83.7 35.3 85-35.3 20-169.8L107.2 0"/><path fill="#FFC20F" d="M28.5 188.2l78 32.8 79-32.8L204.3 28l-97-21.4L7 28l21.3 160.2zm78 35.6L26 190v-.7L4.3 26l1.2-.3L107 4l100 22-19 164-81.6 33.8z"/><path fill="#128ECE" d="M67.3 28.2l-4 4 4 3.7 3.8-4M54.6 30.8L51 34.4l3.6 3.6 3.6-3.6M42 33.4l-3.4 3.4L42 40l3.3-3.2M29.2 36l-3 3 3 3.2 3-3M144.3 28.2l3.8 4-3.7 3.7-4-4M157 30.8l3.6 3.6L157 38l-3.7-3.6M169.6 33.4l3.4 3.4-3.4 3.3-3.3-3.2M182.3 36l3 3-3 3.2-3-3M12.8 194h186v-42.4h-186"/><path fill="#FFC20F" d="M102.5 22.2c0-1.8 1.5-3.3 3.3-3.3 2 0 3.4 1.4 3.4 3.2v2h-6.7v-2zm4.2 8.4l-.2.3v1.8c0 .3 0 .5-.3.6-.6.3-1 0-1-.6v-2l-.3-.2c-.6-.4-.8-1.2-.5-1.8.2-.6 1-1 1.6-1 .8.3 1.3 1 1.3 1.6 0 .5-.2 1-.6 1.2zm-6.8-8.4v2h-.3c-.8 0-1.6.8-1.6 1.7v8.5c0 1 1 1.6 1.7 1.6h12c1 0 1.7-.6 1.7-1.5V26c0-1-.7-1.7-1.6-1.7v-2c0-3.4-2.7-6-6-6s-6 2.6-6 6z"/></g></g>
      <g v-else><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M107 0L0 23l22.7 169.7 83.7 35.3 85-35.3 20-169.8"/><path fill="#FFC20F" d="M28.5 188.2l78 32.8 79-32.8L204.3 28l-97-21.4L7 28l21.3 160.2zm78 35.6L26 190v-.7L4.3 26l1.2-.3L107 4l100 22-19 164-81.6 33.8z"/><path fill="#128ECE" d="M67.3 28.2l-4 4 4 3.7 3.8-4M54.6 30.8L51 34.4l3.6 3.6 3.6-3.6M42 33.4l-3.4 3.4L42 40l3.3-3.2M29.2 36l-3 3 3 3.2 3-3M144.3 28.2l3.8 4-3.7 3.7-4-4M157 30.8l3.6 3.6L157 38l-3.7-3.6M169.6 33.4l3.4 3.4-3.4 3.3-3.3-3.2M182.3 36l3 3-3 3.2-3-3M12.8 194h186v-42.4h-186"/><path fill="#FFC20F" d="M102.5 22.2c0-1.8 1.5-3.3 3.3-3.3 2 0 3.4 1.4 3.4 3.2v2h-6.7v-2zm4.2 8.4l-.2.3v1.8c0 .3 0 .5-.3.6-.6.3-1 0-1-.6v-2l-.3-.2c-.6-.4-.8-1.2-.5-1.8.2-.6 1-1 1.6-1 .8.3 1.3 1 1.3 1.6 0 .5-.2 1-.6 1.2zm-6.8-8.4v2h-.3c-.8 0-1.6.8-1.6 1.7v8.5c0 1 1 1.6 1.7 1.6h12c1 0 1.7-.6 1.7-1.5V26c0-1-.7-1.7-1.6-1.7v-2c0-3.4-2.7-6-6-6s-6 2.6-6 6z"/></g></g>

      <text font-size="64" font-weight="800" transform="translate(100 120)" class="content">
        <tspan text-anchor="middle" x="9" y="0">SSL</tspan>
      </text>

      <text font-size="15" font-weight="700" transform="translate(.5 -1)">
        <tspan x="35" y="179">{{ data.safe }}</tspan>
      </text>
    </svg>
  </div>
</template>

<style lang="scss" scoped>
  @import '../stylesheets/variables.scss';

  .hotpay-badge-ssl {
    position: relative;
    text-align: center;
    text-transform: uppercase;

    svg {
      width: 100%;
    }

    text,
    .content {
      fill: #fff;
    }
  }

  .light {
    .content {
      fill: #000;
    }
  }
</style>

<script>
  export default {
    name: 'HotpayBadgeSsl',
    props: {
      theme: String,
      data: Object
    },
    computed: {
      y () {
        if (this.theme === 'light') {
          return 173
        }

        return 171
      }
    }
  }
</script>
