_layout.pug

doctype html
html
  head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible" content="IE=edge")

    title Parallel by Simon Singh
    meta(name="description" content="Weekly mathematics challenges for secondary school students.")

    //- Mobile Display
    meta(name="viewport", content="width=device-width, initial-scale=1, user-scalable=no")
    meta(name="format-detection", content="telephone=no")
    meta(http-equiv="cleartype", content="on")
    meta(name="msapplication-tap-highlight" content="no")

    //- iOS Web Apps
    meta(name="apple-mobile-web-app-capable", content="yes")
    meta(name="apple-mobile-web-app-title" content="Parallel by Simon Singh")
    meta(name="apple-mobile-web-app-status-bar-style" content="black")

    //- Web Apps and Images
    meta(name="mobile-web-app-capable", content="yes")
    meta(name="mobile-web-app-title", content="Parallel")
    meta(name="theme-color", content="#181824")
    link(rel="manifest", href="/manifest.json")

    //- Stylesheets
    link(href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,300,400italic" rel="stylesheet")
    link(href="/parallel.css?v=30" rel="stylesheet")

    if isProduction
      include scripts/newrelic.html

  body
    #vue
      .beta
        div You are on our Beta Testing Site!
        div The information & events on this page are for testing purposes and should not be followed. 
        a(href="https://parallel.org.uk") Click here to return to the production site.
      .headerWrapper
        .header
          if !sidebarDisabled
            #menu(v-on:click="showSidebar=true")
              svg(width=24 height=24)
                rect(y=2 width=24 height=3 fill="white")
                rect(y=10 width=24 height=3 fill="white")
                rect(y=18 width=24 height=3 fill="white")

          if path && !noNavigation
            div(class="homeButtonsLeft")
              a#home(href="/" title="Home" class="homeButton homeButtonWithSvg")
                include svgs/home.svg
                | Home

          if user
            div(class="homeButtonsRight")
              a#home(href="/account" title="Home" class="homeButton")
                | Settings
              a#home(href="/" title="Home" class="homeButton" @click="user.logout")
                | Sign out

          if noNavigation
            div#logo(href="/" title="Home" class=(sidebarDisabled ? 'sidebarDisabled' : ''))
          else 
            a#logo(href="/" title="Home" class=(sidebarDisabled ? 'sidebarDisabled' : ''))

      #shadow(v-on:click="showSidebar=false" v-bind:class="{visible: showSidebar}")

      #container
        if !sidebarDisabled
          .sidebar
            .sidebar-wrap(v-bind:class="{visible: showSidebar}")
              if user
                .sidebar-field.account
                  p #{user.first} #{user.last}
                  if user.schoolName
                    p.small= user.schoolName
                  p.small
                    if !user.code
                      | #{levelNames[user.level]}
                      span.dot •
                    a(href="/account") Settings
                    span.dot •
                    a(v-on:click="user.logout") Logout
                if user.code
                  .sidebar-field: a(href="/dashboard") Teacher Dashboard

              if !user
                .intros
                  a(href="/info/students")
                    include svgs/backpack.svg
                    | Students
                  a(href="/info/teachers")
                    include svgs/parent.svg
                    | Teachers
                  a(href="/info/parents")
                    include svgs/teacher.svg
                    | Parents

              .sidebar-circles-item: a(href="/circles")
                div Parallel Circles
                .sidebar-subtext(id="sidebar-circles-text") Interactive live maths sessions
                .status.live.hidden(id="sidebar-circles-marker") LIVE

              if !user
                div
                  .sidebar-field: a(href="/signup") Create a free account
                  .sidebar-field
                    a(v-on:click="user.showLogin = !user.showLogin") Login
                    form.login(v-bind:class="{active: user.showLogin}" v-on:submit="user.login")
                      .error(v-show="user.loginForm.error") {{user.loginForm.error}}
                      input(placeholder="Email" required type="email" v-model="user.loginForm.email" autocomplete="email")
                      input(placeholder="Password" v-if="!user.loginForm.reset" required type="password" v-model="user.loginForm.password" autocomplete="current-password")
                      p
                        button(type="submit") {{ user.loginForm.reset ? 'Reset' : 'Login' }}
                        a(v-on:click="user.toggleReset()") {{ user.loginForm.reset ? 'Back to login' : 'Reset password' }}

              if user && !user.code
                .sidebar-field: a(href="/awards")
                  div Your Awards
                  .sidebar-subtext(id="sidebar-circles-text") Badges are now part of the new Awards section

              if !user || user.code || user.level !== 'year6'
                div(class="toggle space-around")
                  for l in user ? user.sidebarLevels : levels
                    a(v-on:click=`user.setLevel('${l}')` v-bind:class=`{active: user.level == '${l}'}`)= levelNames[l]

              if user && !user.code
                script!= 'window.USER_LEVEL = "' + user.level + '";'
                script!= 'window.SIDEBAR_LEVELS = ' + JSON.stringify(user.sidebarLevels) + ';'

              for l in user ? user.sidebarLevels : levels
                nav(v-show=`user.level == '${l}'`)
                  for p in pages[l]
                    a(href=("/" + p.url) class=('/' + p.url === path ? 'active' : ''))
                      .title-meta PG #{p.index} #[span.spaced •] #{p.date}
                      .title= p.title
                      if user && user.answers[p.url] && user.answers[p.url].submitted
                        .status.score(class=scoreClass(user.answers[p.url].score)) #{user.answers[p.url].score}%
                      else if now <= p.deadline
                        .status NEW
        if content
          article(class=(sidebarDisabled ? 'sidebarDisabled' : ''))!= content
        else
          article(class=(sidebarDisabled ? 'sidebarDisabled' : '')): block content

      if user && !user.acceptedTerms && path !== '/privacy-notice'
        #accept-terms.modal
          .modal-background
          .modal-body
            h2 Privacy Updates
            form(v-on:submit="user.acceptTerms")
              p.checkbox
                input#terms-modal(type="checkbox" required)
                label(for="terms-modal") We will email you when a new Parallelogram challenge is released, when the next Parallel Circles session is scheduled, and when there are special competitions, prizes and opportunities. By checking this box you consent to receiving these emails, in accordance with our #[a(href="/privacy-notice" target="_blank") Data Protection Terms & Conditions].
              button(type="submit") Continue

      if user && !user.code && user.showWelcomeMsg
        .modal(v-if="showWelcomeMsg")
          .modal-background
          .modal-body
            h2 Welcome back to Parallel!
            p.text-center We’ve updated your level to #[strong #{levelNamesWithAges[user.level]}]. You can always change it on your #[a(href="/account") account settings] page. The first Parallelogram is now available, but officially it is launched in early September. We will be releasing new Parallelograms every week, from mid-September.
            button(type="submit" v-on:click="showWelcomeMsg = false") Continue

    footer
      a(href="/about") About
      | •
      a(href="/contact") Contact
      | •
      a(href="/privacy-notice") Privacy Notice
      br
      | Created by
      a(href="http://goodthinkingsociety.org" target="_blank") #[img(src="/images/good-thinking.png" width=10 height=16)] Good Thinking Society
      | and
      a(href="https://mathigon.org" target="_blank") #[img(src="/images/mathigon.png" width=16 height=16)] Mathigon

    if user && user.privacy && user.privacy.visible && !privacyModalDisabled
      iframe(src="/privacy-modal" id="privacy-iframe" style="height: 100%;width: 100%;position: absolute;z-index: 10000000000;top: 0;left: 0;border: none;")

    script(defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js")
    script(defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js")
    script(defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js")
    script(defer src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js")
    script(defer src="/parallel.js?v=36")

    script.
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q || []).push(arguments)},i[r].l=1 * new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-37525836-7', 'auto');
      ga('send', 'pageview');