{% set active_page = '404' -%}

{% extends "layouts/no-layout.html" %}

{% block styles %}{% endblock %}

{% block content %}
  <div class="mdc-layout-grid mdc-layout-grid--fullheight">
    <div class="mdc-layout-grid__inner">
      <div class="mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-1-tablet mdc-layout-grid__cell--span-4-phone"></div>
      <div class="mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-6-tablet mdc-layout-grid__cell--span-4-phone">
        <div class="mdc-card portal-card--error portal-card--error-404 portal-card--hero mdc-elevation--z24 portal-text-center">
          <div class="portal-card__content">
            <section>
              <h1 class="mdc-typography--headline mdc-theme--secondary">Page not found</h1>
              <p class="mdc-typography--body1">Sorry the page you were looking for could not be found.</p>
            </section>
            <form>
              <div class="mdc-text-field mdc-text-field--fullwidth portal-text-field--fullwidth mdc-text-field--dense mdc-text-field--with-trailing-icon">
                <input type="text" class="mdc-text-field__input" id="search">
                <label for="search" class="mdc-floating-label">Search Portal</label>
                <i class="material-icons mdc-text-field__icon" tabindex="0">search</i>
                <div class="mdc-line-ripple"></div>
              </div>
            </form>
            <div class="portal-card__content--column-actions">
              <a href="index.html" class="mdc-button">Go Home</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
<script>
  (function() {
    const tfRoot = document.querySelector('.mdc-text-field');
    const tf = new mdc.textField.MDCTextField(tfRoot);
  })();
</script>
{% endblock %}