<template>
  <!-- Don't include nav buttons since this is shown in a different window. -->

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Breadcrumb -->
    <div class="mb-8">
      <!-- Don't include 'back' button since this is shown in a different window. -->
      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
        Time Safari Onboarding Instructions
      </h1>
    </div>

    <!-- eslint-disable prettier/prettier -->
    <div class="ml-4">
      <h1 class="font-bold text-xl">Install</h1>
      <div>
        <p>
          1) Have them visit TimeSafari.app in a browser, preferably Chrome or Safari.
        </p>
        <p>
          2) Have them "Install" the site to their desktop.
        </p>
      </div>

      <h1 class="font-bold text-xl">Add Contact & Register</h1>
      <div>
        <p>
          3) Have them follow their yellow prompts.
        </p>
        <p>
          4) Add them to your contacts <fa icon="users" />
        </p>
        <p>
          5) Register them <fa icon="person-circle-question" />
        </p>
        <p>
          6) Add yourself to their contacts <fa icon="users" />
        </p>
      </div>

      <h1 class="font-bold text-xl">Enable Notifications</h1>
      <div>
        <p>
          7) Enable notifications from <fa icon="circle-user" />
        </p>
      </div>

      <h1 class="font-bold text-xl">Discuss Backups</h1>
      <div>
        <p>
          8) Exporting backups <fa icon="circle-user" /> are important if they lose their phone --- especially for the Identifier Seed!
        </p>
      </div>

    </div>
    <!-- eslint enable -->
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";

import QuickNav from "@/components/QuickNav.vue";

@Component({ components: { QuickNav } })
export default class Help extends Vue {}
</script>
