<!DOCTYPE html>
<html lang="en" class="h-100">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="<%= pageDescription %>" />

    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15/css/all.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.6/dist/materia/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-vue@2.21/dist/bootstrap-vue.min.css" />
    <%- defineContent("ContentHead") %>

    <title><%= pageTitle %> | My Wellness Complete</title>
  </head>
  <body class="d-flex flex-column h-100">
    <section id="app" class="h-100">
      <header>
        <b-navbar toggleable="md" type="dark" variant="dark">
          <section class="container">
            <b-navbar-brand href="/">
              <i class="fas fa-heartbeat fa-fw text-danger align-middle"></i>
              <span class="align-middle">
                M<span class="d-none d-md-inline">y</span>

                W<span class="d-none d-md-inline">ellness</span>

                C<span class="d-none d-md-inline">omplete</span>
              </span>
            </b-navbar-brand>

            <b-navbar-toggle target="nav-main"></b-navbar-toggle>

            <b-collapse id="nav-main" is-nav>
              <b-navbar-nav>
                <b-nav-item href="/app/">Home</b-nav-item>
                <b-nav-item-dropdown text="Wellness dimensions">
                  <b-dropdown-item href="/app/emotional">Emotional</b-dropdown-item>
                  <b-dropdown-item href="/app/environmental">Environmental</b-dropdown-item>
                  <b-dropdown-item href="/app/financial">Financial</b-dropdown-item>
                  <b-dropdown-item href="/app/mental">Mental</b-dropdown-item>
                  <b-dropdown-item href="/app/physical">Physical</b-dropdown-item>
                  <b-dropdown-item href="/app/social">Social</b-dropdown-item>
                  <b-dropdown-item href="/app/spiritual">Spiritual</b-dropdown-item>
                  <b-dropdown-item href="/app/vocational">Vocational</b-dropdown-item>
                </b-nav-item-dropdown>
              </b-navbar-nav>

              <b-navbar-nav class="ml-auto">
                <b-nav-item-dropdown right>
                  <template #button-content>
                    <template v-if="profile.hasLogin">
                      <b-img
                        v-bind:src="profile.picture"
                        v-bind:alt="profile.name"
                        class="mx-1"
                        rounded="circle"
                        width="52"
                      ></b-img>
                    </template>
                    <template v-else>
                      <span class="fa-stack fa-2x">
                        <i class="fas fa-circle fa-stack-2x text-muted"></i>
                        <i class="fas fa-user fa-stack-1x text-dark"></i>
                      </span>
                    </template>
                  </template>
                  <b-dropdown-item href="/logout" v-if="profile.hasLogin">Log out</b-dropdown-item>
                  <b-dropdown-item href="/login" v-else>Log in</b-dropdown-item>
                </b-nav-item-dropdown>
              </b-navbar-nav>
            </b-collapse>
          </section>
        </b-navbar>
      </header>
      <section class="container flex-grow-1 py-3">
        <h1 class="border-bottom border-primary mb-3"><%= pageTitle %></h1>
        <b-alert v-if="alert" v-bind:variant="alert.variant" show>{{ alert.message }}</b-alert>
        <%- body %>
      </section>
      <footer>
        <section class="container text-center">
          <section class="d-inline border-top border-muted px-2 py-1">
            MWC &copy; <%= (new Date()).getFullYear() %> | All rights reserved.
          </section>
        </section>
      </footer>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.21/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17/lodash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-vue@2.21/dist/bootstrap-vue.min.js"></script>
    <script type="text/javascript">
      'use strict';

      var storageKey = 'wellness';
      var defaultObject = { wellness: [] };

      function loadFromLocalStorage() {
        return JSON.parse(localStorage.getItem(storageKey) || JSON.stringify(defaultObject));
      }

      function saveToLocalStorage(array) {
        if (!_.isArray(array)) return false;

        var data = _.cloneDeep(defaultObject);
        data.wellness = array;

        localStorage.setItem(storageKey, JSON.stringify(data));
        return true;
      }
    </script>
    <%- defineContent("ContentScripts") %>
    <script type="text/javascript">
      (function () {
        'use strict';

        var noop = () => {};
        var bundle = window.Bundle || {};
        if (!bundle.data) bundle.data = {};
        if (!bundle.methods) bundle.methods = {};
        if (!bundle.computed) bundle.computed = {};
        if (!bundle.mounted) bundle.mounted = noop;

        bundle.data.profile = JSON.parse('<%- JSON.stringify(profile) %>');
        bundle.data.alert = bundle.data.alert || false;

        new Vue({
          el: '#app',
          data: bundle.data,
          methods: bundle.methods,
          computed: bundle.computed,
          mounted: bundle.mounted,
        });
      })();
    </script>
  </body>
</html>
