{% set active_page = 'Linear Progress' -%}

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

{% block styles %}
  <style>
    .portal-linear-progress-demo {
      margin-left: auto;
      margin-right: auto;
      width: 100%;
    }
    .portal-linear-progress-demo--small {
      max-width: 200px;
    }
    .portal-pages__header__indicator {
      margin-top: 0;
      margin-bottom: 150px;
    }
    figcaption {
      font-size: .7em;
      margin-bottom: 48px;
      opacity: .7;
    }
  </style>
{% endblock %}

{% block content %}
  <div class="portal-pages__header">
    <div role="progressbar" class="mdc-linear-progress mdc-linear-progress--indeterminate portal-linear-progress-demo portal-linear-progress-demo--small portal-pages__header__indicator">
      <div class="mdc-linear-progress__buffering-dots"></div>
      <div class="mdc-linear-progress__buffer"></div>
      <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
        <span class="mdc-linear-progress__bar-inner"></span>
      </div>
      <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
        <span class="mdc-linear-progress__bar-inner"></span>
      </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">
          <h3 class="portal-pages__heading">Linear Progress Indicators</h3>
          <p class="mdc-typography--body1">Progress and activity indicators are visual indications of an app loading content.</p>
          <p class="mdc-typography--body1">A single visual indicator should be used to represent each type of operation. For example, a refresh operation should display either a refresh bar or an activity circle, but not both.</p>
          <ul class="portal-list mdc-typography--body1">
            <li><strong>Determinate indicators</strong> display how long an operation will take.</li>
            <li><strong>Indeterminate indicators</strong> visualize an unspecified wait time.</li>
          </ul><br>

          <figure class="portal-linear-progress-demo">
            <div role="progressbar" class="mdc-linear-progress">
              <div class="mdc-linear-progress__buffering-dots"></div>
              <div class="mdc-linear-progress__buffer"></div>
              <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
                <span class="mdc-linear-progress__bar-inner"></span>
              </div>
              <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
                <span class="mdc-linear-progress__bar-inner"></span>
              </div>
            </div>
            <figcaption>Determinate</figcaption>
          </figure>

          <figure class="portal-linear-progress-demo">
            <div role="progressbar" class="mdc-linear-progress mdc-linear-progress--indeterminate">
              <div class="mdc-linear-progress__buffering-dots"></div>
              <div class="mdc-linear-progress__buffer"></div>
              <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
                <span class="mdc-linear-progress__bar-inner"></span>
              </div>
              <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
                <span class="mdc-linear-progress__bar-inner"></span>
              </div>
            </div>
            <figcaption>Indeterminate</figcaption>
          </figure>

          <figure class="portal-linear-progress-demo">
            <div role="progressbar" class="mdc-linear-progress" data-buffer="true">
              <div class="mdc-linear-progress__buffering-dots"></div>
              <div class="mdc-linear-progress__buffer"></div>
              <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
                <span class="mdc-linear-progress__bar-inner"></span>
              </div>
              <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
                <span class="mdc-linear-progress__bar-inner"></span>
              </div>
            </div>
            <figcaption>Buffer</figcaption>
          </figure>

          <figure class="portal-linear-progress-demo">
            <div role="progressbar" class="mdc-linear-progress mdc-linear-progress--reversed">
              <div class="mdc-linear-progress__buffering-dots"></div>
              <div class="mdc-linear-progress__buffer"></div>
              <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
                <span class="mdc-linear-progress__bar-inner"></span>
              </div>
              <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
                <span class="mdc-linear-progress__bar-inner"></span>
              </div>
            </div>
            <figcaption>Reversed</figcaption>
          </figure>

          <figure class="portal-linear-progress-demo">
            <div role="progressbar" class="mdc-linear-progress mdc-linear-progress--indeterminate mdc-linear-progress--reversed">
              <div class="mdc-linear-progress__buffering-dots"></div>
              <div class="mdc-linear-progress__buffer"></div>
              <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
                <span class="mdc-linear-progress__bar-inner"></span>
              </div>
              <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
                <span class="mdc-linear-progress__bar-inner"></span>
              </div>
            </div>
            <figcaption>Indeterminate Reversed</figcaption>
          </figure>

          <figure class="portal-linear-progress-demo">
            <div role="progressbar" class="mdc-linear-progress mdc-linear-progress--reversed" data-buffer="true">
              <div class="mdc-linear-progress__buffering-dots"></div>
              <div class="mdc-linear-progress__buffer"></div>
              <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
                <span class="mdc-linear-progress__bar-inner"></span>
              </div>
              <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
                <span class="mdc-linear-progress__bar-inner"></span>
              </div>
            </div>
            <figcaption>Buffer Reversed</figcaption>
          </figure>

          <figure class="portal-linear-progress-demo">
            <div role="progressbar" class="mdc-linear-progress demo-linear-progress--custom" data-buffer="true">
              <div class="mdc-linear-progress__buffering-dots"></div>
              <div class="mdc-linear-progress__buffer"></div>
              <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
                <span class="mdc-linear-progress__bar-inner"></span>
              </div>
              <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
                <span class="mdc-linear-progress__bar-inner"></span>
              </div>
            </div>
            <figcaption>Custom Colors with Buffer</figcaption>
          </figure>

          <figure class="portal-linear-progress-demo">
            <div class="mdc-slider" id="portal-slider-demo" tabindex="0" role="slider"
                aria-valuemin="0" aria-valuemax="100" aria-valuenow="40"
                aria-label="Select Value">
              <div class="mdc-slider__track-container">
                <div class="mdc-slider__track"></div>
              </div>
              <div class="mdc-slider__thumb-container">
                <svg class="mdc-slider__thumb" width="21" height="21">
                  <circle cx="10.5" cy="10.5" r="7.875"></circle>
                </svg>
                <div class="mdc-slider__focus-ring"></div>
              </div>
            </div>
          </figure>
        </div>
      </div>
    </div>
  </section>
{% endblock %}

{% block scripts %}
<script>
  (function() {
    const determinates = document.querySelectorAll('.mdc-linear-progress');

    for (let i = 0, determinate; determinate = determinates[i]; i++) {
      const linearProgress = mdc.linearProgress.MDCLinearProgress.attachTo(determinate);
      linearProgress.progress = 0.5;
      if (determinate.dataset.buffer) {
        linearProgress.buffer = 0.75;
      }
    }
    const element = document.getElementById('portal-slider-demo');
    mdc.slider.MDCSlider.attachTo(element);
  })();
</script>
{% endblock %}