{% set active_page = 'Input' -%}

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

{% block styles %}
  <style>
    .portal-pages__header__form {
      margin-top: 0;
      margin-bottom: 150px;
    }
    .mdc-text-field--textarea:not(.mdc-text-field--disabled) {
      border-color: rgba(0,0,0,0.1);
    }
    .mdc-text-field--textarea:not(.mdc-text-field--disabled) textarea {
      height: 190px;
    }
    .mdc-text-field:not(.portal-pages__header__form), .mdc-text-field input {
      width: 100%;
    }
  </style>
{% endblock %}

{% block content %}
  <div class="portal-pages__header">
    <div class="mdc-text-field portal-pages__header__form">
      <input type="text" id="my-text-field" class="mdc-text-field__input">
      <label class="mdc-floating-label" for="my-text-field">Hint text</label>
      <div class="mdc-line-ripple"></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">Inputs</h3>
          <p class="mdc-typography--body1">Inputs typically reside in forms but can appear in other places, like dialog boxes and search.</p>
          <p class="mdc-typography--body1">The following input types can be used:</p>
          <ul class="portal-list mdc-typography--body1 portal-list--columns-2">
            <li>date</li>
            <li>datetime-local</li>
            <li>email</li>
            <li>month</li>
            <li>number</li>
            <li>password</li>
            <li>search</li>
            <li>tel</li>
            <li>text</li>
            <li>time</li>
            <li>url</li>
            <li>week</li>
          </ul>

          <div class="mdc-layout-grid">
            <div class="mdc-layout-grid__inner">
              <div class="mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
                <h3 class="portal-pages__subheading">
                  Text field
                </h3>
                <div class="mdc-text-field mdc-text-field--fullwidth portal-text-field--fullwidth">
                  <input type="text" class="mdc-text-field__input" id="full-func-text-field" aria-controls="my-text-field-helper-text">
                  <label for="full-func-text-field" class="mdc-floating-label">Message</label>
                  <div class="mdc-line-ripple"></div>
                </div>
                <p id="my-text-field-helper-text" class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent">
                    Input field with hints and placeholder
                </p>

                <h3 class="portal-pages__subheading">
                  Text field box
                </h3>
                <div id="tf-box-example" class="mdc-text-field mdc-text-field--box">
                  <input required pattern=".{8,}" type="text" id="tf-box" class="mdc-text-field__input">
                  <label for="tf-box" class="mdc-floating-label">Your Name</label>
                  <div class="mdc-line-ripple"></div>
                </div>
                <h3 class="portal-pages__subheading">
                  Text Field - Leading/Trailing icons
                </h3>
                <div id="tf-box-leading-example"
                  class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon">
                  <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
                  <input type="text" id="tf-box-leading" class="mdc-text-field__input">
                  <label for="tf-box-leading" class="mdc-floating-label">Your name</label>
                  <div class="mdc-line-ripple"></div>
                </div>
                <br>
                <div id="tf-box-trailing-example"
                  class="mdc-text-field mdc-text-field--box mdc-text-field--with-trailing-icon">
                  <input type="text" id="tf-box-trailing" class="mdc-text-field__input">
                  <label for="tf-box-trailing" class="mdc-floating-label">Your other name</label>
                  <i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
                  <div class="mdc-line-ripple"></div>
                </div>
              </div>
              <div class="mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
                <h3 class="portal-pages__subheading">
                  Password field with validation
                </h3>
                <div class="mdc-text-field mdc-text-field--fullwidth portal-text-field--fullwidth">
                  <input required pattern=".{8,}" type="password" class="mdc-text-field__input" id="pw"
                    aria-controls="pw-validation-msg"
                    autocomplete="current-password">
                  <label for="pw" class="mdc-floating-label">Choose password</label>
                  <div class="mdc-line-ripple"></div>
                </div>
                <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"
                    id="pw-validation-msg">
                  Must be at least 8 characters long
                </p>

                <h3 class="portal-pages__subheading">
                  Text Field and Textarea
                </h3>

                <div id="demo-fullwidth-wrapper">
                  <div class="mdc-text-field mdc-text-field--fullwidth">
                    <input class="mdc-text-field__input" type="text" placeholder="Subject" aria-label="Subject">
                    <div class="mdc-line-ripple"></div>
                  </div><br>
                  <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--fullwidth full-width-textarea-example">
                    <textarea id="full-width-textarea" class="mdc-text-field__input" rows="8"></textarea>
                    <label for="full-width-textarea" class="mdc-floating-label">Textarea Label</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endblock %}

{% block scripts %}
  <script>
    (function() {
      const tfRoot = document.querySelectorAll('.mdc-text-field');
      for (let i = 0; i < tfRoot.length; i++) {
        new mdc.textField.MDCTextField(tfRoot[i]);
      }
    })();
  </script>
{% endblock %}