<template>
  <div class="privacy-policy">
    <div v-if="!isDesktop" class="line">
      <div class="line__emoji">🚫🍪</div>
      <div>No cookies!</div>
    </div>
    <div v-if="isDesktop" class="line">
      <div class="line__emoji">🚫🌐</div>
      <div>
        Everything is offline, except single request GitHub
        to check for updates on application start.
      </div>
    </div>
    <div class="line">
      <div class="line__emoji">🚫👀</div>
      <div>No user behavior / IP address collection!</div>
    </div>
    <div class="line">
      <div class="line__emoji">🤖</div>
      <div>
        All transparent: Deployed automatically from the master branch
        of the <a :href="repositoryUrl" target="_blank">source code</a> with no changes.
      </div>
    </div>
    <div v-if="!isDesktop" class="line">
      <div class="line__emoji">📈</div>
      <div>
        Basic <a href="https://aws.amazon.com/cloudfront/reporting/" target="_blank">CDN statistics</a>
        are collected by AWS but they cannot be traced to you or your behavior.
        You can download the offline version if you don't want any CDN data collection.
      </div>
    </div>
    <div class="line">
      <div class="line__emoji">🎉</div>
      <div>
        As almost no data is collected, the application gets better
        only with your active feedback.
        Feel free to <a :href="feedbackUrl" target="_blank">create an issue</a> 😊</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Environment } from '@/application/Environment/Environment';
import { ApplicationFactory } from '@/application/ApplicationFactory';
import { IApplication } from '@/domain/IApplication';

@Component
export default class PrivacyPolicy extends Vue {
  public repositoryUrl = '';

  public feedbackUrl = '';

  public isDesktop = Environment.CurrentEnvironment.isDesktop;

  public async created() {
    const app = await ApplicationFactory.Current.getApp();
    this.initialize(app);
  }

  private initialize(app: IApplication) {
    const { info } = app;
    this.repositoryUrl = info.repositoryWebUrl;
    this.feedbackUrl = info.feedbackUrl;
  }
}
</script>

<style scoped lang="scss">
@use "@/presentation/assets/styles/main" as *;

.privacy-policy {
  display: flex;
  flex-direction: column;
  font-family: $font-normal;
  text-align:center;

  .line {
    display: flex;
    flex-direction: column;

    &:not(:first-child) {
      margin-top:0.2rem;
    }
  }
}
</style>
