{% set active_page = 'Dialog' -%}

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

{% block styles %}
  <style>
    .portal-dialog-demo {
      position: relative;
      width: 320px;
      z-index: auto;
      margin-top: 0;
      margin-bottom: 150px;
    }
    .demo-row {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 48px 0;
    }
    .demo-row > * {
      margin: 16px;
    }
  </style>
{% endblock %}

{% block content %}
  <div class="portal-pages__header">
    <svg class="portal-pages__header-icon" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="64" height="64" viewBox="0 0 64 64">
      <g class="nc-icon-wrapper">
        <path fill="none" stroke-width="2" stroke-miterlimit="10" d="M18 32.066L2 39l30 12 30-12-16-6.933"></path>
        <path fill="none" stroke-width="2" stroke-miterlimit="10" d="M32 38l30-12-30-13L2 26z"></path>
      </g>
    </svg>
  </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">Dialog</h3>
          <p class="mdc-typography--body1">Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.</p>
          <p class="mdc-typography--body1">Dialogs contain text and UI controls. They retain focus until dismissed or a required action has been taken.</p>
          <p class="mdc-typography--body1">Use dialogs sparingly because they are interruptive.</p>
          <p class="mdc-typography--body1">Dialogs should never be obscured, either by other elements or the screen edge.</p>
          <p class="mdc-typography--body1">Some dialog types include:</p>
          <ul class="portal-list mdc-typography--body1">
            <li><strong>Alerts</strong> are urgent interruptions that inform about a situation and require acknowledgement.</li>
            <li><strong>Simple menus</strong> display options for list items, whereas <strong>simple dialogs</strong> can provide details or actions about a list item.</li>
            <li><strong>Confirmation dialogs</strong> require users to explicitly confirm a choice.</li>
          </ul>
          <aside id="mdc-dialog-default"
            class="mdc-dialog"
            role="alertdialog"
            aria-hidden="true"
            aria-labelledby="mdc-dialog-default-label"
            aria-describedby="mdc-dialog-default-description">
            <div class="mdc-dialog__surface">
              <header class="mdc-dialog__header">
                <h2 id="mdc-dialog-default-label" class="mdc-dialog__header__title">
                  Use Google's location service?
                </h2>
              </header>
              <section id="mdc-dialog-default-description" class="mdc-dialog__body">
                Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
              </section>
              <footer class="mdc-dialog__footer">
                <button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--cancel">Decline</button>
                <button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--accept">Accept</button>
              </footer>
            </div>
            <div class="mdc-dialog__backdrop"></div>
          </aside>
          <aside id="mdc-dialog-with-list"
            class="mdc-dialog"
            role="alertdialog"
            aria-hidden="true"
            aria-labelledby="mdc-dialog-with-list-label"
            aria-describedby="mdc-dialog-with-list-description">
            <div class="mdc-dialog__surface">
              <header class="mdc-dialog__header">
                <h2 id="mdc-dialog-with-list-label" class="mdc-dialog__header__title">
                  Choose a Ringtone
                </h2>
              </header>
              <section id="mdc-dialog-with-list-description" class="mdc-dialog__body mdc-dialog__body--scrollable">
                <ul class="mdc-list">
                  <li class="mdc-list-item">None</li>
                  <li class="mdc-list-item">Callisto</li>
                  <li class="mdc-list-item">Ganymede</li>
                  <li class="mdc-list-item">Luna</li>
                  <li class="mdc-list-item">Marimba</li>
                  <li class="mdc-list-item">Schwifty</li>
                  <li class="mdc-list-item">Callisto</li>
                  <li class="mdc-list-item">Ganymede</li>
                  <li class="mdc-list-item">Luna</li>
                  <li class="mdc-list-item">Marimba</li>
                  <li class="mdc-list-item">Schwifty</li>
                </ul>
              </section>
              <footer class="mdc-dialog__footer">
                <button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--cancel">Decline</button>
                <button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--accept">Accept</button>
              </footer>
            </div>
            <div class="mdc-dialog__backdrop"></div>
          </aside>
          <div class="demo-row">
            <button id="default-dialog-activation" class="mdc-button mdc-button--raised">Show Dialog</button>
            <button id="dialog-with-list-activation" class="mdc-button mdc-button--raised">Show Scrolling Dialog</button>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endblock %}

{% block scripts %}
<script>
  (function() {
    mdc.dialog.MDCDialog.attachTo(document.querySelector('.mdc-dialog'));

    const dialog = new mdc.dialog.MDCDialog(document.querySelector('#mdc-dialog-default'));
    dialog.listen('MDCDialog:accept', function() {
      console.log('accepted');
    });
    dialog.listen('MDCDialog:cancel', function() {
      console.log('canceled');
    });
    document.querySelector('#default-dialog-activation').addEventListener('click', function (evt) {
      dialog.lastFocusedTarget = evt.target;
      dialog.show();
    });
    const dialogScrollable = new mdc.dialog.MDCDialog(document.querySelector('#mdc-dialog-with-list'));
    document.querySelector('#dialog-with-list-activation').addEventListener('click', function (evt) {
      dialogScrollable.lastFocusedTarget = evt.target;
      dialogScrollable.show();
    });
  })();
</script>
{% endblock %}