{% set active_page = "Theming" -%}

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

{% block content %}
  <section 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="M7 1h48v17H7z"></path>
        <path fill="none" stroke-width="2" stroke-miterlimit="10" d="M2 9h5"></path><path fill="none" stroke-width="2" stroke-miterlimit="10" d="M55 9h6v15H32v17"></path>
        <path fill="none" stroke-width="2" stroke-miterlimit="10" d="M28 42h8v21h-8z"></path>
      </g>
    </svg>
  </section>
  <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">
          <div class="mdc-layout-grid__cell--span-8-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
            <h2 class="portal-pages__heading">Theming</h2>
            <p class="mdc-typography--body1">
              Portal is based on the fantastic Material Design Components framework from Google.  This allows us to use CSS variables to change the colors of all the material components that make up the page.
            </p>
            <p class="mdc-typography--body1">
              Go ahead and play with the color options below and create your own theme.
            </p>
            <div class="mdc-layout-grid portal-pages__content-grid">
              <div class="mdc-layout-grid__inner">
                <div class="mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
                  <h3 class="portal-pages__subheading">Side Navigation Colors</h3>
                  <div class="portal-pages__content-grid-row">
                    <span class="mdc-typography--body1 portal-pages__content-label">Toolbars Background</span>
                    <input class="portal-theming-input-js portal-pages__content-theme-color" type="color" name="--mdc-theme-primary-dark">
                  </div>
                  <div class="portal-pages__content-grid-row">
                    <span class="mdc-typography--body1 portal-pages__content-label">Toolbars Text Color</span>
                    <input class="portal-theming-input-js portal-pages__content-theme-color" type="color" name="--mdc-theme-text-primary-on-primary-dark">
                  </div>
                  <div class="portal-pages__content-grid-row">
                    <span class="mdc-typography--body1 portal-pages__content-label">Dark Sidenav</span>
                    <div class="mdc-switch">
                      <input type="checkbox" id="portal-dark-sidenav-switch" class="mdc-switch__native-control" checked>
                      <div class="mdc-switch__background">
                        <div class="mdc-switch__knob"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
                  <h3 class="portal-pages__subheading">Main Content Colors</h3>
                  <div class="portal-pages__content-grid-row">
                    <span class="mdc-typography--body1 portal-pages__content-label">Content Toolbars Background</span>
                    <input class="portal-theming-input-js portal-pages__content-theme-color" type="color" name="--mdc-theme-primary-light">
                  </div>
                  <div class="portal-pages__content-grid-row">
                    <span class="mdc-typography--body1 portal-pages__content-label">Content Toolbars Text Color</span>
                    <input class="portal-theming-input-js portal-pages__content-theme-color" type="color" name="--mdc-theme-text-primary-on-primary-light">
                  </div>
                  <div class="portal-pages__content-grid-row">
                    <span class="mdc-typography--body1 portal-pages__content-label">Dark Content</span>
                    <div class="mdc-switch">
                      <input type="checkbox" id="portal-dark-content-switch" class="mdc-switch__native-control">
                      <div class="mdc-switch__background">
                        <div class="mdc-switch__knob"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="mdc-layout-grid portal-pages__content-grid">
              <div class="mdc-layout-grid__inner">
                <div class="mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
                  <h3 class="portal-pages__subheading">Primary colors </h3>
                  <div class="portal-pages__content-grid-row">
                    <span class="mdc-typography--body1 portal-pages__content-label">Primary Background Color</span>
                    <input class="portal-theming-input-js portal-pages__content-theme-color" type="color" name="--mdc-theme-primary">
                  </div>
                  <div class="portal-pages__content-grid-row">
                    <span class="mdc-typography--body1 portal-pages__content-label">Primary Text Color</span>
                    <input class="portal-theming-input-js portal-pages__content-theme-color" type="color" name="--mdc-theme-text-primary-on-primary">
                  </div>
                  <div class="portal-pages__content-grid-row portal-pages__content-grid-row--center">
                    <button class="mdc-fab mdc-theme--text-primary-on-primary mdc-theme--primary-bg material-icons" aria-label="Favorite">
                      <span class="mdc-fab__icon">
                        favorite
                      </span>
                    </button>
                  </div>
                </div>
                <div class="mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
                  <h3 class="portal-pages__subheading">Secondary colors </h3>
                  <div class="portal-pages__content-grid-row">
                    <span class="mdc-typography--body1 portal-pages__content-label">Secondary Background Color</span>
                    <input class="portal-theming-input-js portal-pages__content-theme-color" type="color" name="--mdc-theme-secondary">
                  </div>
                  <div class="portal-pages__content-grid-row">
                    <span class="mdc-typography--body1 portal-pages__content-label">Secondary Text Color</span>
                    <input class="portal-theming-input-js portal-pages__content-theme-color" type="color" name="--mdc-theme-text-primary-on-secondary">
                  </div>
                  <div class="portal-pages__content-grid-row portal-pages__content-grid-row--center">
                    <button class="mdc-fab material-icons" aria-label="Favorite">
                      <span class="mdc-fab__icon">
                        favorite
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endblock %}

{% block scripts %}
  <script>
    (function() {
      /**
       * Color inputs
       */
      const inputs = document.querySelectorAll('.portal-theming-input-js');
      // Set values and listeners.
      inputs.forEach(function(input) {
        // Get initial value.
        let value = window.getComputedStyle(document.documentElement).getPropertyValue(input.name);
        // Trim whitespace.
        value = value.trim();
        // Make sure it is 6 digits.
        if (value.length === 4) {
          value = hex3To6(value);
        }
        // Update input.
        input.value = value;
        // Watch for changes.
        input.addEventListener('input', function() {
          document.documentElement.style.setProperty(input.name, this.value);
        });
      });

      /**
       * Dark sidenav switch
       */
      const sidenavWrapper = document.querySelector('.portal-navigation');
      document.querySelector('#portal-dark-sidenav-switch').addEventListener('change', function(e) {
        if (true === e.target.checked) {
          sidenavWrapper.classList.remove('portal-navigation--light');
        } else {
          sidenavWrapper.classList.add('portal-navigation--light');
        }
      });

      /**
       * Dark sidenav switch
       */
      const contentWrapper = document.querySelector('.portal-main__content');
      const sideNav = document.querySelector('.portal-navigation');
      console.log(sideNav);
      document.querySelector('#portal-dark-content-switch').addEventListener('change', function(e) {
        if (true === e.target.checked) {
          // Add Dark class.
          contentWrapper.classList.add('mdc-theme--dark');
          // Remove text color class.
          contentWrapper.classList.remove('mdc-theme--text-primary-on-background');
          // Add dark text color class.
          contentWrapper.classList.add('mdc-theme--text-primary-on-dark');
          // Change background color.
          document.documentElement.style.setProperty('--mdc-theme-background', '#424242');
        } else {
          // Remove Dark class.
          contentWrapper.classList.remove('mdc-theme--dark');
          // Remove text color class.
          contentWrapper.classList.remove('mdc-theme--text-primary-on-dark');
          // Add dark text color class.
          contentWrapper.classList.add('mdc-theme--text-primary-on-background');
          // Change background color.
          document.documentElement.style.setProperty('--mdc-theme-background', '#ffffff');
        }
      });


      function hex3To6(color) {
        return '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
      };
    })();

  </script>
{% endblock %}