<template>
  <div class="rooms-onboarding">
    <h1
      class="rooms-onboarding__heading"
      data-cy="page-title">Räume</h1>
    <rooms-illustration class="rooms-onboarding__illustration" />
    <p
      data-cy="rooms-onboarding-text"
      class="rooms-onboarding__text">
      Hier können Sie Räume erstellen, damit SchülerInnen zusammenarbeiten und Beiträge teilen können.
    </p>
    <div class="rooms-onboarding__button">
      <router-link
        :to="newRoomRoute"
        class="button button--primary"
        data-cy="create-room-button"
        v-if="isTeacher">Raum erstellen
      </router-link>

    </div>

  </div>
</template>

<script>
  import {NEW_ROOM_PAGE} from '@/router/room.names';
  import RoomsIllustration from '@/components/illustrations/RoomsIllustration';

  export default {
    props: {
      isTeacher: {
        type: Boolean,
        default: false,
      },
    },
    components: {RoomsIllustration},

    data() {
      return {
        newRoomRoute: NEW_ROOM_PAGE,
      };
    },
  };
</script>

<style scoped lang="scss">
  @import '~styles/helpers';

  .rooms-onboarding {
    @include onboarding-page;

    &__heading {
      margin-bottom: $large-spacing;
    }

    &__illustration {
      @include onboarding-illustration;
    }

    &__text {
      @include onboarding-text;
    }
  }
</style>
