<template>
  <modal
    :hide-header="false"
    :small="true"
    class="change-visibility"
  >
    <template #header>
      <h1
        class="change-visibility__heading"
        data-cy="modal-title"
      >
        Sichtbarkeit anpassen
      </h1>
    </template>
    <div class="change-visibility__content">
      <radiobutton
        :checked="!restricted"
        :class="{ 'change-visibility__radio--selected': !restricted }"
        data-cy="select-option"
        class="change-visibility__radio"
        label="Raumeinträge sind für alle Lernenden sichtbar"
        @input="restrict(false)"
      />
      <radiobutton
        :checked="restricted"
        :class="{ 'change-visibility__radio--selected': restricted }"
        data-cy="select-option"
        class="change-visibility__radio"
        label="Lernende sehen nur die eigenen Beiträge"
        @input="restrict(true)"
      />
    </div>
    <template #footer>
      <div>
        <a
          class="button button--primary"
          data-cy="modal-save-button"
          @click="confirm"
          >Speichern</a
        >
        <a
          class="button"
          @click="cancel"
          >Abbrechen</a
        >
      </div>
    </template>
  </modal>
</template>

<script>
import Modal from '@/components/Modal.vue';
import Radiobutton from '@/components/Radiobutton.vue';

export default {
  components: {
    Radiobutton,
    Modal,
  },

  data() {
    return {
      restricted: false,
    };
  },

  mounted() {
    this.restricted = this.$modal.state.payload.restricted;
  },

  methods: {
    restrict(restricted) {
      this.restricted = restricted;
    },
    confirm() {
      this.$modal.confirm(this.restricted);
    },
    cancel() {
      this.$modal.cancel();
    },
  },
};
</script>

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

.change-visibility {
  &__heading {
    @include modal-heading;
  }

  &__content {
    display: flex;
    flex-direction: column;
    padding: $medium-spacing 0;
  }

  &__radio:first-of-type {
    margin-bottom: $medium-spacing;
  }
}
</style>
