<template>
  <div class="document-block">
    <document-icon class="document-block__icon"/>
    <a
      :href="value.url"
      class="document-block__link"
      target="_blank">{{ urlName }}</a>
    <a
      class="document-block__remove"
      v-if="showTrashIcon"
      @click="$emit('trash')">
      <trash-icon class="document-block__trash-icon"/>
    </a>
  </div>
</template>

<script>
  import DocumentIcon from '@/components/icons/DocumentIcon';
  import TrashIcon from '@/components/icons/TrashIcon';

  export default {
    props: {
      value: Object,
      showTrashIcon: Boolean,
    },

    components: {
      DocumentIcon,
      TrashIcon,
    },

    computed: {
      urlName: function() {
        if (this.value && this.value.url) {
          const parts = this.value.url.split('/');
          return parts[parts.length - 1]
        }
        return null;
      }
    }
  }
</script>

<style scoped lang="scss">
  @import '@/styles/_variables.scss';
  @import '@/styles/_functions.scss';
  @import '@/styles/_mixins.scss';

  .document-block {
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    align-items: center;

    &__icon {
      width: 30px;
      height: 30px;
    }

    &__link {
      text-decoration: underline;
    }

    &__remove {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
    }

    &__trash-icon {
      width: 25px;
      height: 25px;
      fill: $color-silver-dark;
      cursor: pointer;
      justify-self: center;
    }
  }
</style>
