<template>
  <div class="section-block">
    <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">
        <h4 class="subsection__title small-emph">Zuletzt bearbeitet</h4>
        <p class="subsection__content small-emph">
          {{lastModified}}
        </p>
      </div>
      <div class="section-content__subsection">
        <h4 class="subsection_title small-emph">Aktivität</h4>
        <p class="subsection__content small-emph">
          {{lastModified}}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['title', 'subtitle', 'lastModified', 'activities']
  }
</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;

   &__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;
    }
  }

</style>
