<template>
  <div class="service-unavailable">
    <h1>Vorübergehend nicht erreichbar</h1>
    <p>{{ message }}</p>
    <p class="hint">
      Es liegt vermutlich ein technisches Problem vor (z.&nbsp;B. die Datenbank). Bitte laden Sie die Seite in einigen Minuten erneut.
    </p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'ServiceUnavailableComponent',
  computed: {
    ...mapGetters(['menuLoadError']),
    message() {
      return (
        this.menuLoadError ||
        'Die Website ist vorübergehend nicht vollständig erreichbar.'
      );
    },
  },
};
</script>

<style scoped>
.service-unavailable {
  padding: 20px;
}
.hint {
  color: #444;
  margin-top: 1rem;
}
</style>
