{% extends 'layout.html' %}

{% block content %}
<link rel="stylesheet" href="{{page.include_prefix}}assets/customizer.css">
<div class="mdl-gen mdl-cell mdl-cell--12-col">
  <div class="mdl-grid">
    <div class="mdl-gen__panel mdl-gen__panel--left mdl-cell mdl-cell--6-col-desktop mdl-cell--8-col">
      <div id="wheel">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <defs>
            <filter id="drop-shadow">
              <feGaussianBlur in="SourceAlpha" stdDeviation="3.2" />
              <feOffset dx="0" dy="0" result="offsetblur" />
              <feFlood flood-color="rgba(0,0,0,1)" />
              <feComposite in2="offsetblur" operator="in" />
              <feMerge>
                <feMergeNode />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
          </defs>
          <g class="wheel--maing"></g>
        </svg>
        <div class="mdl-gen-download">
          <a href="#" id="download" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--fab"><i class="material-icons">file_download</i></a>
        </div>
      </div>
    </div>
    <div class="mdl-gen__panel--right mdl-gen__panel mdl-cell mdl-cell--6-col-desktop mdl-cell--8-col">
      <div class="mdl-gen__desc docs-text-styling">
        <strong>Custom CSS theme builder</strong>
        <p>Click on the color wheel to choose a primary (1) and accent (2) color to preview the theme below. When you’ve selected a color combination you like, either reference our <a href="#cdn-code">hosted CSS</a> or download the CSS by clicking the white button in the middle. You will need to include MDL’s JavaScript alongside your customised CSS to get the full experience. This is included in our default Download from the <a href="../started/index.html#download">Getting Started guide</a>.</p>
      </div>
      <div class="mdl-gen__preview">
        <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
          <header class="mdl-layout__header">
            <svg class="mdl-layout-icon" width="411px" height="406px" viewBox="0 0 411 406" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g transform="translate(-51.000000, -54.000000)" fill="currentColor">
                  <path d="M253.532807,381.627 L205.905373,459.1512 L75.2987939,365.2047 L137.208794,290.0547 L51,265.8834 L100.217083,116.7498 L183.176447,150.0543 L176.402456,54 L337.901996,54 L331.203531,149.0202 L409.306732,116.4465 L461.243662,265.7448 L371.760263,290.7036 L429.826513,365.6628 L302.333596,459.2493 L253.532807,381.627 Z M222.176831,106.2 L291.098533,106.2 L282.729084,224.796484 L383.182429,182.939488 L404.947387,245.446521 L297.795289,275.304737 L368.114228,365.995226 L313.701833,405.9 L252.592681,308.789934 L192.876775,405.9 L137.348587,365.995226 L212.130699,275.304737 L105.539492,245.446521 L126.18666,182.939488 L230.548276,224.796484 L222.176831,106.2 Z"></path>
                </g>
              </g>
            </svg>
            <div class="mdl-layout__header-row">
              <span class="mdl-layout-title">Theme Preview</span>
            </div>
          </header>
          <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">Theme Preview</span>
            <nav class="mdl-navigation">
              <a class="mdl-navigation__link" href="#">Some</a>
              <a class="mdl-navigation__link" href="#">Links</a>
              <a class="mdl-navigation__link" href="#">Here</a>
            </nav>
          </div>
          <main class="mdl-layout__content">
            <h3>Try it out</h3>
            <p>
              Lorem ipsum dolor sit amet.
            </p>
            <button class="mdl-button mdl-button--colored mdl-button--raised mdl-js-button mdl-js-ripple-effect">BUTTON</button>
            <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">
              <i class="material-icons">email</i>
            </button>
          </main>
        </div>
      </div>
    </div>
    <div class="mdl-gen__cdn mdl-cell mdl-cell--12-col">
      <div class="code-with-text" id="cdn-code">
        CSS hosted on our CDN (17.6kB gzipped):
        <pre class="demo-code language-markup codepen-button-disabled"><code class="language-markup mdl-gen__cdn-link" data-language="markup"> &lt;link rel="stylesheet" href="$$hosted_libs_prefix$$/$$version$$/material.$primary-$accent.min.css" /&gt; </code></pre>
      </div>
    </div>
  </div>
</div>
<script src="{{page.include_prefix}}assets/customizer.js"></script>
<script>init();</script>
{% endblock %}