<template>
  <QuickNav />

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Breadcrumb -->
    <div class="mb-8">
      <!-- Back -->
      <div class="text-lg text-center font-light relative px-7">
        <h1
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        >
          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </h1>
      </div>

      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
        Notification Types
      </h1>
    </div>

    <!-- eslint-disable prettier/prettier -->
    <div>
      <p>There are two types of notifications:</p>

      <h2 class="text-xl font-semibold mt-4">Reminder Notifications</h2>
      <div>
        <p>
          The Reminder Notification will be sent to you daily with a specific message,
          at whatever time you choose. Use it to remind
          yourself to act, for example: pause and consider who has given you
          something, so you can record thanks in here.
        </p>
        <p>
          This is a reliable message, but it doesn't contain any details about
          activity that might be especially interesting to you.
        </p>
      </div>

      <h2 class="text-xl font-semibold mt-4">New Activity Notifications</h2>
      <div>
        <p>
          The New Activity Notification will be sent to you when there is new, relevant activity 
          for you. 
          It will only trigger if something involves you or a project of interest; it will not
          bug you for other, general activity.
        </p>
        <p>
          This type is not as reliable as a Reminder Notification because mobile devices often 
          suppress such notifications to save battery. (If you want to quickly check for relevant 
          activity daily, use the Reminder Notification and open the app and look for a large green 
          button that points out new activity that is personal to you. We are working on other 
          ways to notify you more reliably. 
          <router-link class="text-blue-500" to="/help">
            go here to follow us or contact us
            <font-awesome icon="chevron-right" class="fa-fw"></font-awesome>
          </router-link>.)
        </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 HelpNotificationTypesView extends Vue {}
</script>
