{% set active_page = 'Select' -%}

{% extends "layouts/" + layout + ".html" %}

{% block styles %}
  <style>
    .portal-pages__header__form {
      margin-top: 0;
      margin-bottom: 150px;
    }
  </style>
{% endblock %}

{% block content %}
  <div class="portal-pages__header">
    <div class="mdc-select portal-pages__header__form" role="listbox">
      <div class="mdc-select__surface" tabindex="0">
        <div class="mdc-select__label">Pick a Food Group</div>
        <div class="mdc-select__selected-text"></div>
        <div class="mdc-select__bottom-line"></div>
      </div>
      <div class="mdc-menu mdc-select__menu">
        <ul class="mdc-list mdc-menu__items">
          <li class="mdc-list-item" role="option" tabindex="0">
            Bread, Cereal, Rice, and Pasta
          </li>
          <li class="mdc-list-item" role="option" tabindex="0">
            Vegetables
          </li>
          <li class="mdc-list-item" role="option" tabindex="0">
            Fruit
          </li>
          <li class="mdc-list-item" role="option" tabindex="0">
            Milk, Yogurt, and Cheese
          </li>
          <li class="mdc-list-item" role="option" tabindex="0">
            Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts
          </li>
          <li class="mdc-list-item" role="option" tabindex="0">
            Fats, Oils, and Sweets
          </li>
        </ul>
      </div>
    </div>
  </div>
  <section class="portal-pages__content">
    <div class="mdc-layout-grid">
      <div class="mdc-layout-grid__inner">
        <div class="mdc-layout-grid__cell--span-1-desktop"></div>
        <div class="mdc-layout-grid__cell--span-10-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone portal-pages__content-inner portal-pages__content-inner-noanimation">
          <h3 class="portal-pages__heading">Select</h3>
          <p class="mdc-typography--body1">MDC Select provides Material Design single-option and multi-option select menus.</p>
          <p class="mdc-typography--body1">It functions analogously to the browser’s native <i>select</i> element, and includes a gracefully degraded version that can be used in conjunction with the browser’s native element.</p>
          <p class="mdc-typography--body1">Both are fully accessible, and fully RTL-aware.</p>
          <h3 class="portal-pages__subheading">Fully-Featured Component</h3>
          <div id="js-select" class="mdc-select" role="listbox">
            <div class="mdc-select__surface" tabindex="0">
              <div class="mdc-select__label">Food Group</div>
              <div class="mdc-select__selected-text"></div>
              <div class="mdc-select__bottom-line"></div>
            </div>
            <div class="mdc-menu mdc-select__menu">
              <ul class="mdc-list mdc-menu__items">
                <li class="mdc-list-item" role="option" id="fruit-roll-ups" tabindex="0">
                  Fruit Roll Ups
                </li>
                <li class="mdc-list-item" role="option" id="cotton-candy" tabindex="0">
                  Candy (cotton)
                </li>
                <li class="mdc-list-item" role="option" id="vegetables" aria-disabled="true" tabindex="0">
                  Vegetables
                </li>
                <li class="mdc-list-item" role="option" id="noodles" tabindex="0">
                  Noodles
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endblock %}

{% block scripts %}
  <script>
    (function() {
      const MDCSelect = mdc.select.MDCSelect;
      const selects = document.querySelectorAll('.mdc-select');
      for (let i = 0; i < selects.length; i++) {
        new MDCSelect(selects[i]);
      }
    })();
  </script>
{% endblock %}