<template>
  <div class="project-widget" :class="widgetClass">
    <router-link :to="{name: 'project', params: {slug: slug}}" tag="div" class="project-widget__content">
            <h3 class="project-widget__title">{{title}}</h3>

      <entry-count-widget entry-count="4"></entry-count-widget>
      <owner-widget name="Hans Muster"></owner-widget>

    </router-link>
    <widget-footer
      entity="Eintrag"
    ></widget-footer>
  </div>
</template>

<script>
  import OwnerWidget from '@/components/portfolio/OwnerWidget';
  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
  import WidgetFooter from '@/components/WidgetFooter';

  export default {
    props: ['title', 'appearance', 'slug'],

    components: {
      WidgetFooter,
      EntryCountWidget,
      OwnerWidget
    },

    computed: {
      widgetClass() {
        return `project-widget--${this.appearance}`;
      }
    }
  }
</script>

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

  .project-widget {
    border-radius: $default-border-radius;
    background-color: $color-accent-4;
    @include widget-shadow;
    box-sizing: border-box;

    display: -ms-grid;
    @supports (display: grid) {
      display: grid;
    }
    grid-template-rows: 150px 1fr;

    &__content {
      padding: 23px;
      cursor: pointer;
    }

    &__title {
      font-size: toRem(22px);
      font-weight: 600;
    }

    @include skillbox-colors;
  }
</style>
