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.')
  body
    .main
      .main__header
        header.header
          .header__upper-wrapper
            .header__upper.layout-centered
              .header__upper-first
                .header__title
                  img(src='/images/icon-info.svg')
                  span Example Application
                .header__upper-copy
                  a(href=`/about${queryString}`) What is this?
              .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')
                    img.header__upper-icon(src='/images/icon-github.svg')
                    | View on Github

                .header__controls
                  form(action='' method='get')
                    .group
                      label(for='api') API:
                      select(name='api' onChange='this.form.submit()')
                        option(value='cda' selected=query.api === 'cda') Content Delivery API
                        option(value='cpa' selected=query.api === 'cpa') Content Preview API
                    .group
                      label(for='locale') Locale:
                      select(name='locale' onChange='this.form.submit()')
                        option(value='en-US' selected=query.locale === 'en-US') English
                        option(value='de-DE' selected=query.locale === 'de-DE') German
          .header__lower-wrapper
            .header__lower.layout-centered
              .header__logo
                a.header__logo-link(href='/')
                  img(src='/images/logo.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
                  li
                    a(href=`/about${queryString}` class=(currentPath.startsWith('/about') ? 'active' : '')) About
                  li
                    a(href=`/settings${queryString}` class=(currentPath.startsWith('/settings') ? 'active' : '')) Settings
      .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
                  li
                    a(href=`/about${queryString}` class=(currentPath.startsWith('/about') ? 'active' : '')) About
                  li
                    a(href=`/settings${queryString}` class=(currentPath.startsWith('/settings') ? 'active' : '')) Settings
              .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
                  | This website and the materials found on it are for demo purposes using Contentful. 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')
                    img(src='/images/icon-facebook.svg' alt='Our Facebook profile')
                  a(href='https://twitter.com/contentful' target='_blank' rel='noopener')
                    img(src='/images/icon-twitter.svg' alt='Our Twitter profile')
  script(src='/scripts/highlight.pack.js')
  script(src='/scripts/textFit.min.js')
  script(src='/scripts/index.js')