<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>

    <p>
      To invite someone the easiest way, send them a link that you generate from
      this page:
      <router-link
        :to="{ name: 'invite-one' }"
        class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
      >
        <fa icon="envelope-open-text" class="fa-fw text-xl"
      /></router-link>
    </p>
    <p>Then watch that page to see when they accept their invite.</p>
    <p>
      (That page is also reachable from the Contacts <fa icon="users" /> page
      though the invitation <fa icon="envelope-open-text" /> icon.)
    </p>

    <h1 class="mt-4 font-bold text-xl">Next Steps</h1>
    Although not totally necessary, backups are important to understand.

    <div class="ml-4">
      <h1 class="font-bold text-xl">Without a backup, you can lose data.</h1>
      <div>
        <p>
          Exporting backups (from the Account <fa icon="circle-user" /> screen)
          is important for the case where they lose their device. This is
          especially true for the Identifier Seed: that is theirs and and theirs
          alone, and currently nobody else can recover it if they lose it. The
          good thing is that anyone can create a new account and simply inform
          their network of their new ID.
        </p>
      </div>
    </div>

    <h1 class="mt-4 font-bold text-xl">Advanced</h1>
    The following are optional steps for even more functionality.

    <!-- eslint-disable prettier/prettier -->
    <div class="ml-4">

      <h1 class="font-bold text-xl">Add Contact & Register</h1>
      <p>
        You share even more information such as your picture and name when
        you share with your QR code at these links: <fa icon="qrcode" />
      </p>
      <p>
        Scanning
        those with your cameras will automatically register people and add them
        to each other's contact lists.
      </p>
      <p>
        The following are more detailed manual steps:
      </p>
      <div>
        <p>
          1) Have them follow their yellow prompts.
        </p>
        <p>
          2) Scan their QR, or have them tap on it to copy their info and send it to you.
          Then you can add them to your Contacts <fa icon="users" />
        </p>
        <p>
          3) You can register them at their info page <fa icon="circle-info" />
          and click on the register button <fa icon="person-circle-question" />
        </p>
        <p>
          4) Add yourself to their Contacts <fa icon="users" />
        </p>
      </div>

      <h1 class="font-bold text-xl">Install</h1>
      <div>
        <p>
          Have them visit TimeSafari.app in a browser, preferably Chrome or Safari,
          and then look for the "Install" selection which adds this app to their desktop.
          This enables other things, like the ability to "share" a photo from their
          device directly to Time Safari, and it makes notifications more reliable.
        </p>
      </div>

      <h1 class="font-bold text-xl">Enable Notifications</h1>
      <div>
        <p>
          Enable notifications from the Account page <fa icon="circle-user" />.
          Those notifications might show up on the device depending on your settings.
          For the most reliable habits, set an alarm or do some other ritual to record gratitude every day.
        </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>