<template>
  <div class="document-block">
    <document-icon class="document-block__icon"></document-icon>
    <a :href="value.url" class="document-block__link" target="_blank">{{urlName}}</a>
  </div>
</template>

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

  export default {
    props: ['value'],

    components: {
      DocumentIcon
    },

    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">
  .document-block {
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;

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

    &__link {
      text-decoration: underline;
    }
  }
</style>
