<template>
  <div class="module-settings">
    <h1 class="module-settings__page-title">Einstellungen</h1>
    <section class="module-settings__section">
      <h2 class="module-settings__heading">Lösungen</h2>
      <p class="module-settings__paragraph">Wollen Sie die Lösungen in diesem Modul für Lernende anzeigen?</p>
      <toggle-solutions-for-module />
    </section>
    <section class="module-settings__section">
      <h2 class="module-settings__heading">Sichtbarkeit</h2>
      <p class="module-settings__paragraph">Haben Sie die Sichtbarkeit für eine andere Klasse bereits angepasst? Dann
      können Sie diese Anpassungen hier
      übernehmen</p>
    </section>
    <section class="module-settings__section">
      <router-link
        :to="{name: 'visibility'}"
        data-cy="select-school-class-button"
        class="button button--primary"
      >Klasse auswählen</router-link>
    </section>
  </div>
</template>

<script>
  import Checkbox from '@/components/ui/Checkbox';
  import ToggleSolutionsForModule from '@/components/toggle-menu/ToggleSolutionsForModule';

  export default {
    components: {
      ToggleSolutionsForModule,
      Checkbox
    }
  };
</script>

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

  .module-settings {
    @include settings-page;
  }
</style>
