<template>
  <SfModal id="privacy-policy" :visible="true" :title="modalTitle">
    <transition name="sf-fade" mode="out-in">
      <div class="modal-content">
        <h2>{{ "Datenschutz-erklärung der eClear AG" }}</h2>
        <p>
          {{
            "Mit der folgenden Datenschutzerklärung möchten wir Sie darüber aufklären, welche Arten Ihrer personenbezogenen Daten (nachfolgend auch kurz als „Daten“ bezeichnet) wir zu welchen Zwecken, auf welcher Rechtsgrundlage und in welchem Umfang verarbeiten. Personenbezogene Daten sind Daten, mit denen Sie persönlich identifiziert werden können. Die Datenschutzerklärung gilt für alle von uns durchgeführten Verarbeitungen personenbezogener Daten, sowohl im Rahmen der Erbringung unserer Leistungen als auch insbesondere auf unseren Webseiten, in mobilen Applikationen sowie innerhalb externer Onlinepräsenzen, wie z.B. unserer Social-Media-Profile (nachfolgend zusammenfassend bezeichnet als „Onlineangebot“)."
          }}
        </p>
        <p>
          {{ "Die verwendeten Begriffe sind nicht geschlechtsspezifisch." }}
        </p>
      </div>
    </transition>
  </SfModal>
</template>
<script>
import { SfModal } from "@highdigital/vuet";
export default {
  name: "Imprint",
  components: {
    SfModal,
  },
  data() {
    return {};
  },
  computed: {
    modalTitle() {
      return this.isLogIn ? "Log In" : "Join Vue Storefront";
    },
  },
  watch: {
    isLogIn() {
      this.email = "";
      this.password = "";
      this.createAccount = false;
      this.rememberMe = false;
      this.firstName = "";
      this.lastName = "";
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@highdigital/vuet/styles";
.modal-content,
.aside {
  display: flex;
  flex-direction: column;
}
.form {
  width: 100%;
  &__element {
    margin: var(--spacer-base) 0;
  }
  &__checkbox {
    margin: var(--spacer-xl) 0 var(--spacer-2xl) 0;
  }
  &__submit {
    margin: var(--spacer-xl) 0 0 0;
  }
}
.action-button {
  margin: var(--spacer-xl) 0;
}
.aside {
  margin: 0 0 var(--spacer-xl) 0;
  &__heading {
    --heading-title-color: var(--c-primary);
    margin: 0 0 var(--spacer-sm) 0;
  }
}
</style>
