<template>
  <div class="section-block" @click="navigate()" :class="{'section-block--navigatable': route}">
    <div class="section-block__title block-title">
      <h2 class="block-title__title">{{title}}</h2>
      <h3 class="block-title__subtitle small-emph">{{subtitle}}</h3>
    </div>
    <div class="section-block__content section-content">
      <div class="section-content__subsection subsection">
        <a class="subsection__content small-emph" v-if="route">
          {{linkText}}
        </a>
        <span class="subsection__content subsection__content--disabled" v-if="!route">Noch nicht verfügbar</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['title', 'subtitle', 'route', 'link-text'],
    methods: {
      navigate() {
        if (this.route) {
          this.$router.push(this.route);
        }
      }
    }
  }
</script>

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

  .section-block {
    border-radius: $default-border-radius;
    width: 100%;
    border: solid 1px $color-lightgrey-2;
    box-shadow: 5px 5px 21px 0px rgba(219, 219, 219, 1);
    overflow: hidden;

    &--navigatable {
      cursor: pointer;
    }

    &__title {
      background-color: $color-brand;
      padding: 20px;
    }
  }

  .block-title {
    &__title, &__subtitle {
      color: $color-white;
    }
  }

  .section-content {
    padding: 60px 15px 15px;

    &__subsection {
      padding-bottom: 15px;
    }
  }

  .subsection {
    &__content {
      font-family: $sans-serif-font-family;
      font-weight: 600;
      color: $color-brand;

      &--disabled {
        color: $color-grey;
      }
    }
  }

</style>
