{% set active_page = 'Snackbar' -%}

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

{% block styles %}
  <style>
    .portal-pages__header .mdc-snackbar--active {
      transform: none;
    }
    .mdc-snackbar--demo {
      opacity: 0;
    }
    .mdc-snackbar--demo.mdc-snackbar--active {
      opacity: 1;
    }
    .portal-pages__header .mdc-snackbar {
      position: relative;
      left: auto;
      margin-top: 0;
      margin-bottom: 150px;
    }
    /* Needs to go above footer */
    .mdc-snackbar--demo {
      bottom: 48px;
    }
    .demo-row {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .demo-row > div {
      margin: 16px;
    }
  </style>
{% endblock %}

{% block content %}
  <div class="portal-pages__header">
    <div class="mdc-snackbar mdc-snackbar--active mdc-elevation--z12"
        aria-live="assertive"
        aria-atomic="true"
        aria-hidden="true">
      <div class="mdc-snackbar__text">Message sent</div>
      <div class="mdc-snackbar__action-wrapper">
        <button type="button" class="mdc-snackbar__action-button" aria-hidden="false">Undo</button>
      </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">Snackbar</h3>
          <p class="mdc-typography--body1">Snackbars provide brief feedback about an operation through a message at the bottom of the screen.</p>
          <p class="mdc-typography--body1">Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons.</p>
          <p class="mdc-typography--body1">Only one snackbar may be displayed at a time. Each snackbar may contain a single action, neither of which may be "Dismiss" or "Cancel".</p>

          <p class="mdc-typography--body1">Snackbars animate upwards from the bottom edge of the screen.</p>
          <div class="demo-row">
            <div class="mdc-text-field">
              <input type="text" id="message" class="mdc-text-field__input" value="Message deleted">
              <label class="mdc-floating-label" for="message">Message Text</label>
              <div class="mdc-line-ripple"></div>
            </div>


            <div class="mdc-text-field">
              <input type="text" id="action" class="mdc-text-field__input" value="Close">
              <label class="mdc-floating-label" for="action">Action Text</label>
              <div class="mdc-line-ripple"></div>
            </div>

            <button type="button" class="mdc-button mdc-button--raised" id="show-snackbar">Show</button>
            <div id="mdc-js-snackbar"
              class="mdc-snackbar mdc-snackbar--demo"
              aria-live="assertive"
              aria-atomic="true"
              aria-hidden="true">
              <div class="mdc-snackbar__text"></div>
              <div class="mdc-snackbar__action-wrapper">
                <button type="button" class="mdc-snackbar__action-button"></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endblock %}

{% block scripts %}
  <script>
    (function() {
      const MDCSnackbar = mdc.snackbar.MDCSnackbar;
      const MDCTextField = mdc.textField.MDCTextField;
      const messageInput = document.getElementById('message');
      const actionInput = document.getElementById('action');
      const snackbar = new MDCSnackbar(document.getElementById('mdc-js-snackbar'));
      const snackbarElement = document.querySelector('.mdc-snackbar');
      const textElements = document.querySelectorAll('.mdc-text-field');

      new MDCSnackbar(snackbarElement);
      for (let i = 0; i < textElements.length; i++) {
        new MDCTextField(textElements[i]);
      }

      document.getElementById('show-snackbar').addEventListener('click', function() {
        console.log(snackbar);
        snackbar.dismissesOnAction = true;
        const data =  {
          message: messageInput.value,
          timeout: 4000
        };

        if (actionInput.value) {
          data.actionText = actionInput.value;
          data.actionHandler = function() {
            console.log(data);
          }
        }
        snackbar.show(data);
      });
    })();
  </script>
{% endblock %}