<template>
  <modal
    :hide-header="false"
    :small="true"
    class="change-visibility">
    <h1
      class="change-visibility__heading"
      data-cy="modal-title"
      slot="header">Sichtbarkeit anpassen</h1>
    <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>
    <div slot="footer">
      <a
        class="button button--primary"
        data-cy="modal-save-button"
        @click="confirm">Speichern</a>
      <a
        class="button"
        @click="cancel">Abbrechen</a>
    </div>

  </modal>
</template>

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

  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>
