doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    meta(name='viewport' content='width=device-width, initial-scale=1')
    meta(name='description' content='This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.')
    meta(name='twitter:card' value='This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.')
    meta(property='og:title' content=title)
    meta(property='og:type' content='article')
    meta(property='og:url' content='http://contentful-example-app.herokuapp.com/')
    meta(property='og:image' content='http://contentful-example-app.herokuapp.com/images/logo.svg')
    meta(property='og:description' content='This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.')
    link(rel='apple-touch-icon' sizes='120x120' href='/apple-touch-icon.png')
    link(rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png')
    link(rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png')
    link(rel='manifest' href='/manifest.json')
    link(rel='mask-icon' href='/safari-pinned-tab.svg' color='#4a90e2')
    meta(name='theme-color' content='#ffffff')
  body
    .main
      .main__header
        header.header
          .header__upper-wrapper
            .header__upper.layout-centered
              .header__upper-first
                a#about-this-modal-trigger(href='#').header__title
                  svg.course__overview-icon
                    use(xlink:href='/icons/icons.svg#info')
                  span What is this example app?
              .header__upper-second
                .header__upper-copy
                  a.header__upper-link(href='https://images.contentful.com/82t39nctsu20/1JOkYZnY8YG0w88ImweME2/c8aef71dfe1ea633e16e17d99379416c/Github-repo_2x__1_.png' target='_blank' rel='noopener')
                    svg.header__upper-icon
                      use(xlink:href='/icons/icons.svg#github')
                    | View on Github

                .header__controls
                    .header__controls_group
                      form(action='' method='get')
                        .header__controls_label API: #{currentApi.label}
                        .header__controls_dropdown
                          .header__controls_help_text View the published or draft content by simply switching between the Deliver and Preview APIs.
                          button.header__controls_button(
                            type='submit'
                            name='api'
                            value='cda'
                            class=`${currentApi.id === 'cda' ? 'header__controls_button--active' : ''}`
                          ) Delivery (published content)
                          button.header__controls_button(
                            type='submit'
                            name='api'
                            value='cpa'
                            class=`${currentApi.id === 'cpa' ? 'header__controls_button--active' : ''}`
                          ) Preview (draft content)
                        input(type='hidden' name='locale' value=currentLocale.code)

                    .header__controls_group
                      form(action='' method='get')
                        input(type='hidden' name='api' value=currentApi.id)
                        .header__controls_label Locale: #{currentLocale.name}
                        .header__controls_dropdown
                          .header__controls_help_text Working with multiple languages? You can query the Content Delivery API for a specific locale.
                          each locale in locales
                            button.header__controls_button(type='submit' name='locale' value=locale.code class=`${locale.code === currentLocale.code ? 'header__controls_button--active' : ''}`)= `${locale.name} (${locale.code})`
                .header__upper-menu
                  a(href=`/settings${queryString}` class=(currentPath.startsWith('/settings') ? 'active' : '')) Settings
          .header__lower-wrapper
            .header__lower.layout-centered
              .header__logo
                a.header__logo-link(href=`/${queryString}`)
                  img(src='/images/logo-node.svg' alt='Contentful Example App')
              nav.header__navigation.main-navigation
                ul
                  li
                    a(href=`/${queryString}` class=(currentPath === '/'? 'active' : '')) Home
                  li
                    a(href=`/courses${queryString}` class=(currentPath.startsWith('/courses') ? 'active' : '') ) Courses
      .main__content
        block content

      .main__footer
        .layout-centered
          footer.footer
            .footer__upper
              nav.footer__navigation.main-navigation
                ul
                  li
                    a(href=`/${queryString}` class=(currentPath === '/'? 'active' : '')) Home
                  li
                    a(href=`/courses${queryString}` class=(currentPath.startsWith('/courses') ? 'active' : '') ) Courses
              .footer__apps
                //- a(href='#')
                //-   img(src='/images/badge-app-store.svg')
                //- a(href='#')
                //-   img(src='/images/badge-google-play.svg')
            .footer__lower
              .footer__disclaimer
                img.footer__disclaimer-logo(src='/images/contentful-logo.svg')
                p.footer__disclaimer-text
                  | Powered by Contentful. This website and the materials found on it are for demo purposes. You can use this to preview the content created on your Contentful account. 
                  a(href='https://images.contentful.com/82t39nctsu20/1JOkYZnY8YG0w88ImweME2/c8aef71dfe1ea633e16e17d99379416c/Github-repo_2x__1_.png' target='_blank' rel='noopener') View on Github
                  | .
              .footer__social
                p
                  a(href='https://www.facebook.com/contentful/' target='_blank' rel='noopener')
                    svg
                      use(xlink:href='/icons/icons.svg#facebook')
                  a(href='https://twitter.com/contentful' target='_blank' rel='noopener')
                    svg
                      use(xlink:href='/icons/icons.svg#twitter')
  section.modal#about-this-modal
    .modal__overlay.close
    .modal__wrapper
      h1.modal__title A referenceable example for developers using Contentful
      .modal__content
        p This is The Example App, an application built to serve you as a reference while building your own applications using Contentful. This app is an online learning platform which teaches you how Contentful was used to build this app (so meta)!
        p
        | If you prefer to start by getting your hands dirty with code, check out this app on 
        a(href='https://images.contentful.com/82t39nctsu20/1JOkYZnY8YG0w88ImweME2/c8aef71dfe1ea633e16e17d99379416c/Github-repo_2x__1_.png' target='_blank' rel='noopener') Github
        | .
      .modal__cta-wrapper
        a(href='#').modal__cta.close Ok, got it.
      .modal__close-wrapper
        a(href='#').modal__close-button.close
          svg
            use(xlink:href='/icons/icons.svg#cross')

  script(src='/scripts/index.js')