<template>
  <!-- QUICK NAV -->
  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
    <ul class="flex text-2xl p-2 gap-2">
      <!-- Home Feed -->
      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
          <fa icon="house-chimney" class="fa-fw"></fa>
        </router-link>
      </li>
      <!-- Search -->
      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link
          :to="{ name: 'discover' }"
          class="block text-center py-3 px-1"
        >
          <fa icon="magnifying-glass" class="fa-fw"></fa>
        </router-link>
      </li>
      <!-- Projects -->
      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link
          :to="{ name: 'projects' }"
          class="block text-center py-3 px-1"
        >
          <fa icon="folder-open" class="fa-fw"></fa>
        </router-link>
      </li>
      <!-- Contacts -->
      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link
          :to="{ name: 'contacts' }"
          class="block text-center py-3 px-1"
        >
          <fa icon="users" class="fa-fw"></fa>
        </router-link>
      </li>
      <!-- Profile -->
      <li class="basis-1/5 rounded-md text-slate-400">
        <router-link
          :to="{ name: 'account' }"
          class="block text-center py-3 px-1"
        >
          <fa icon="circle-user" class="fa-fw"></fa>
        </router-link>
      </li>
    </ul>
  </nav>

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24">
    <!-- Heading -->
    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
      Help
    </h1>

    <div>
      <h2 class="text-xl font-semibold">Introduction</h2>
      <p>
        This app is a window into data that you and your friends own, focused on
        gifts and collaboration.
      </p>

      <h2 class="text-xl font-semibold">How do I backup all my data?</h2>
      <p>
        There are two parts to backup your data: the identifier secrets and the
        other data such as settings, contacts, etc.
      </p>

      <div class="px-4">
        <h2 class="text-xl font-semibold">
          How do I backup my identifier (secret) data?
        </h2>
        <ul class="list-disc list-inside">
          <li>
            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page.
          </li>
          <li>
            Click on "Backup Identifier Seed" and follow the instructions.
          </li>
        </ul>

        <h2 class="text-xl font-semibold">
          How do I backup my other (non-identifier-secret) data?
        </h2>
        <ul class="list-disc list-inside">
          <li>
            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page.
          </li>
          <li>
            Click on "Download Settings...". That will save a file to your
            downloads folder. That is your backup, so put it someplace where you
            won't lose it.
          </li>
        </ul>
      </div>

      <h2 class="text-xl font-semibold">How do I restore my data?</h2>
      <p>
        There are two parts to restore your data: the identity secrets and the
        other data such as settings, contacts, etc.
      </p>

      <div class="px-4">
        <h2 class="text-xl font-semibold">
          How do I restore my identifier (secret) data?
        </h2>
        <ul class="list-disc list-inside">
          <li>
            You only have one identifier at a time. If you have an identifier on
            Your Identity <fa icon="circle-user" class="fa-fw" /> page, you'll
            need to clear it out;
            <a
              href="https://www.lifewire.com/how-to-clear-cache-2617980"
              class="text-blue-500"
            >
              here are some helpful instructions.
            </a>
            But beware! This will also clear out your settings and contact data,
            so be sure to back that up first.
          </li>
          <li>
            <router-link class="text-blue-500" to="/">
              Go to the start
            </router-link>
            and choose "Yes" to enter the identity you backed up.
          </li>
        </ul>

        <h2 class="text-xl font-semibold">
          How do I restore my other (non-identifier-secret) data?
        </h2>
        <ul class="list-disc list-inside">
          <li>Make sure you have your backup file (above), then contact us.</li>
        </ul>
      </div>

      <h2 class="text-xl font-semibold">
        How do I add someone to my contacts?
      </h2>
      <p>
        Tell them to copy their ID, which typically starts with "did:ethr:...",
        and send it to you. Go to the Contacts
        <fa icon="circle-user" class="fa-fw" /> page and enter that into the top
        form. You may add a name by adding a comma followed by their name; you
        may also add their public key by adding another comma followed by the
        key.
      </p>

      <h2 class="text-xl font-semibold">
        I know there is a record from someone, so why can't I see that info?
      </h2>
      <p>
        Sometimes someone else has made claims -- meaning they have given time,
        or recognized time given, or declared a project -- but you cannot see
        anything associated with them. The reason may be because they have not
        given you permission to see their information. Ask them to add you to
        their contact list and make sure the eye next to your name is open like
        this
        <fa icon="eye" class="fa-fw" /> and not closed like this
        <fa icon="eye-slash" class="fa-fw" />.
      </p>
    </div>
  </section>
</template>
