<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 {{ $flavor.textModule }} für die Lernenden der ausgewählten Klasse anzeigen?
      </p>
      <toggle-solutions-for-module />
    </section>
    <section class="module-settings__section">
      <h2 class="module-settings__heading">Änderungen</h2>
      <p class="module-settings__paragraph">
        Haben Sie Änderungen für eine andere Klasse bereits vorgenommen? 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 ToggleSolutionsForModule from '@/components/toggle-menu/ToggleSolutionsForModule.vue';

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

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

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