<template>
  <div class="code-preview-block">
    <div class="card card-block">
      <blockquote class="card-blockquote">
  <a href="javascript:;" class="copy-to-clipboard" @click="copyToClipboard">copy</a><pre>{{ code.trim().replaceAll('\\n', '\n') }}</pre>
      </blockquote>
    </div>
  </div>
</template>

<script>
export default {
  props: [ 'code' ],

  methods: {
    copyToClipboard(event) {
      const vm = this
      let copy_text = $(event.target).closest('blockquote').find('pre')[0].innerText
      vm.$copyText(copy_text)
    },
  },
}
</script>

<style lang="scss">
.code-preview-block {
  a.copy-to-clipboard {
    color: #5A9BEA;
    float: right;
    font-size: .8em;
  }

  .card {
    background: #1d1e3a;
    border-radius: .25rem;
    padding: 10px;
    box-shadow: 3px 3px 15px #aaa;

    blockquote {
      margin: 0;
      pre {
        color: #fff;
        font-size: .8em;
        margin: 0;
      }
    }
  }
}
</style>