<!DOCTYPE html>
<html lang="{{ metaLanguage }}">
  <head>
    <meta charset="utf-8" />

    <title>{{ title }}</title>
    <base href="{{ baseHref }}" />

    <meta name="description" content="{{ metaDescription }}" />
    <meta name="keywords" content="{{ metaKeywords }}" />
    <meta name="author" content="{{ metaPublisher }}" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="application-name" content="phpMyFAQ {{ phpmyfaqversion }}" />
    <meta name="robots" content="{{ metaRobots }}" />
    <meta name="revisit-after" content="7 days" />

    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="{{ baseHref }}assets/dist/styles.css" />

    <link rel="shortcut icon" href="{{ baseHref }}assets/themes/{{ tplSetName }}/img/favicon.ico" />
    <link rel="apple-touch-icon" href="{{ baseHref }}assets/themes/{{ tplSetName }}/img/apple-touch-icon.png" />
    <link rel="canonical" href="{{ currentPageUrl }}" />

    <script>
      if (self === top) {
        document.documentElement.style.display = 'block';
      } else {
        top.location = self.location;
      }
    </script>
    <style>
      html {
        display: none;
      }
    </style>
  </head>
  <body dir="{{ dir }}">
    <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
      <div class="container">
        <a class="navbar-brand" id="phpmyfaq-logo" title="{{ header }}" href="{{ faqHome }}">
          <img src="{{ baseHref }}assets/themes/{{ tplSetName }}/img/logo.png" alt="phpMyFAQ" />
        </a>
      </div>
    </nav>

    <div class="pmf-wrapper pmf-main">
      <div class="container">
        <div class="row">
          <div class="col-md-6 offset-3">
            <section>
              <div class="login-panel panel panel-default">
                <div class="panel-heading">
                  <header>
                    <h3 class="panel-title text-center">phpMyFAQ Password</h3>
                  </header>
                </div>
                <div class="panel-body">
                  <form id="formValues" action="#" method="post">
                    <fieldset>
                      <div class="form-group row">
                        <input
                          type="text"
                          name="username"
                          class="form-control form-control-lg"
                          placeholder="{{ msgUsername }}"
                          required
                        />
                      </div>

                      <div class="form-group row">
                        <input
                          type="email"
                          name="email"
                          class="form-control form-control-lg"
                          placeholder="{{ msgEmail }}"
                          required
                        />
                      </div>

                      <div class="form-group row">
                        <button class="btn btn-lg btn-primary btn-block" type="submit" id="changepassword">
                          {{ msgSubmit }}
                        </button>
                      </div>
                    </fieldset>
                  </form>
                </div>
              </div>

              <div id="loader"></div>
              <div id="changepasswords"></div>

              <script type="text/javascript">
                document.addEventListener('DOMContentLoaded', () => {
                  $('#changepassword').on('click', () => {
                    saveFormValues('changepassword', 'changepassword');
                  });
                  $('form#formValues').on('submit', () => {
                    return false;
                  });
                });
              </script>
            </section>
          </div>
        </div>
      </div>
    </div>

    <footer class="pmf-footer font-small pt-4">
      <div class="container">
        <div class="row">
          <div class="col-md-6 mb-4">
            <ul class="pmf-footer-menu">
              <li class="foot-menu-item">
                {{ faqOverview }}
              </li>
              <li class="foot-menu-item">
                {{ showSitemap }}
              </li>
              <li class="foot-menu-item">
                {{ msgGlossary }}
              </li>
              <li class="foot-menu-item">
                {{ msgContact }}
              </li>
            </ul>
          </div>
          <div class="col-md-6 mb-4">
            <form action="{{ renderUri }}" method="post" accept-charset="utf-8" class="pmf-footer-language">
              {{ switchLanguages }}
              <input type="hidden" name="action" value="" />
            </form>
          </div>
        </div>
      </div>
      <div class="text-center py-3">{{ copyright }}</div>
      [debugMode]
      <div class="container debug-mode">
        <hr />
        <h4>DEBUG INFORMATION</h4>
        <div class="row">
          <div class="col-12">
            <h5>DATABASE QUERIES</h5>
            {{ debugQueries }}
          </div>
        </div>
      </div>
      [/debugMode]
    </footer>

    <script src="{{ baseHref }}assets/dist/vendors.js"></script>
    <script src="{{ baseHref }}assets/dist/phpmyfaq.js"></script>
    <script src="{{ baseHref }}assets/dist/frontend.js"></script>
    <script>
      window.addEventListener('load', () => {
        window.cookieconsent.initialise({
          palette: {
            popup: {
              background: '#252e39',
            },
            button: {
              background: '#14a7d0',
            },
          },
        });
      });
    </script>
  </body>
</html>
