<template>
  <QuickNav />

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Sub View Heading -->
    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
      <h1 class="grow text-xl text-center font-semibold leading-tight">
        Notification Types
      </h1>

      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>

      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </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>
