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