<template>
  <modal
    :hide-header="true"
    :small="true"
    data-cy="deactivate-person-modal"
    class="deactivate-user">
    <h3 class="deactivate-user__heading">
      <template v-if="myself">
        Mich
      </template>
      <template v-else>
        Person
      </template>
      deaktivieren
    </h3>
    <p
      class="deactivate-user__text deactivate-user__paragraph"
      data-cy="modal-body-text">
      <template v-if="myself">
        Möchten Sie die Klasse <strong class="deactivate-user__text--strong">{{ schoolClass }}</strong> verlassen?
      </template>
      <template v-else>
        Möchten Sie <strong
        class="deactivate-user__text--strong">{{ name }}</strong> in der
        Klasse
        <strong class="deactivate-user__text--strong">{{ schoolClass }}</strong> deaktivieren?
      </template>
    </p>
    <ul class="deactivate-user__list">
      <li class="deactivate-user__text deactivate-user__list-item">
        <template v-if="myself">
          Sie können
        </template>
        <template v-else>
          Diese Person kann
        </template>
        in Zukunft keine Inhalte mehr erfassen, bearbeiten und teilen.
      </li>
      <li class="deactivate-user__text deactivate-user__list-item">
        <template v-if="myself">
          Sie können
        </template>
        <template v-else>
          Diese Person kann
        </template>
        weiterhin Module und Instrumente lesen.
      </li>
      <li class="deactivate-user__text deactivate-user__list-item">
        <template v-if="myself">
          Sie können der Klasse jederzeit wieder beitreten.
        </template>
        <template v-else>
          Sie können diese Person jederzeit wieder aktivieren.
        </template>
      </li>
    </ul>
    <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';

  export default {
    components: {
      Modal
    },

    computed: {
      myself() {
        return this.$modal.state.payload.myself;
      },
      name() {
        return this.$modal.state.payload.name;
      },
      schoolClass() {
        return this.$modal.state.payload.className;
      }
    },

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

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

  .deactivate-user {
    &__heading {
      margin-bottom: $medium-spacing;
    }

    &__list {
      padding-left: $medium-spacing;
    }

    &__list-item {
      list-style: disc;
    }

    &__text {
      @include regular-text;
      margin-bottom: $medium-spacing;

      &--strong {
        font-weight: 600;
      }
    }
  }
</style>
