<template>
  <div v-if="hasWarning" class="alert alert-warning">
    {{ $t("household_members_editor.confirmation.there_are_warnings") }}
  </div>

  <p v-if="hasWarning">
    {{ $t("household_members_editor.confirmation.check_those_items") }}
  </p>

  <ul>
    <li v-for="(msg, i) in warnings" class="warning" :key="i">
      {{ $t(msg.m, msg.a) }}
    </li>
    <li v-for="(msg, i) in errors" class="error" :key="i">
      {{ msg }}
    </li>
  </ul>
</template>

<style scoped lang="scss"></style>

<script>
import { mapState } from "vuex";

export default {
  name: "Confirmation",
  computed: {
    ...mapState({
      hasWarnings: (state) =>
        state.warnings.length > 0 || state.errors.length > 0,
      warnings: (state) => state.warnings,
      errors: (state) => state.errors,
    }),
  },
};
</script>
