{% extends 'layout.html' %}

{% block content %}
<link href="{{page.include_prefix}}assets/components.css" rel="stylesheet">
<script src="{{page.include_prefix}}assets/snippets.js"></script>
<script src="{{page.include_prefix}}assets/components.js"></script>
<link rel="stylesheet" href="{{page.include_prefix}}components/demos.css">

<div class="mdl-components mdl-js-components mdl-cell mdl-cell--12-col">
  <aside class="mdl-components__nav docs-text-styling mdl-shadow--4dp">
    {% for category in page.categories %}
    <a href="#{{ category.name }}-section" class="mdl-components__link mdl-component {{ category.name }}">
      <div class="mdl-components__link-image"
           style="background-image: url('{{page.include_prefix}}assets/comp_{{ category.name }}.png')">
      </div>
      <span class="mdl-components__link-text">{{ category.title }}</span>
    </a>
    {%- endfor %}
  </aside>
  <main class="mdl-components__pages">
    <section id="index-section" class="mdl-components-index mdl-components__page">
      <div class="mdl-components-index-text mdl-grid">
        <div class="mdl-components-text docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col">
          <dl class="mdl-components-dl">
            <dt class="mdl-components-dt">COMPONENTS</dt>
            <dd class="mdl_components-dd">
        Material Design Lite (MDL) is a library of components for web developers
        based on Google's Material Design Philosophy: "A visual language for our
        users that synthesizes the classic principles of good design with the
        innovation and possibility of technology and science." Understanding the
        goals and principles of Material Design is critical to the proper use of
        the Material Design Lite components. If you have not yet read the
        <a href="http://www.google.com/design/spec/material-design/introduction.html">Material Design Introduction</a>
        you should do so before attempting to use the components.
            </dd>
          </dl>
        </div>
      </div>
      <div class="mdl-components-img"></div>
    </section>

    {% for category in page.categories -%}
    <section id="{{ category.name }}-section" class="mdl-components__page mdl-grid">
      <div class="mdl-cell mdl-cell--12-col">
        <div class="docs-text-styling component-title">
          <h3>{{ category.title }}</h3>
          <p>{{ category.description }}</p>
        </div>

        {% if category.components.length > 1 %}
          <section class="docs-toc docs-text-styling">
            <nav class="section-content">
              <ul>
                {% for component in category.components %}
                  <li><a href="#{{ category.name }}-section/{{ component.name }}">{{ component.caption }}</a></li>
                {%- endfor %}
              </ul>
            </nav>
          </section>
        {%- endif %}

        {% for component in category.components %}

          {% if component.caption %}
            <span class="docs-text-styling">
              <h1 class="mdl-components__classname" id="{{ category.name }}-section/{{ component.name }}">{{ component.caption }}</h1>
            </span>
          {%- endif %}
          <!-- Add warning, if the component has one -->
          {% if component.warning %}
           <div class="mdl-components__warning"><b>Note: </b>{{ component.warning }}</div>
          {%- endif %}
          <!-- Generating snippets -->
          {% for snippet_group in component.snippets %}
            {% set snippet_group["component_name"] = component.name %}
            {% include "./snippets.html" with snippet_group only %}
          {%- endfor %}
          <!-- Adding the demo page -->
        {% set demo_css = "../../dist/components/" + component.name + "/demo.css" %}
          <style>
            {% include demo_css ignore missing %}
          </style>
          {% set demo_js = "../../dist/components/" + component.name + "/demo.js" %}
          <script>
            {% include demo_js ignore missing %}
          </script>
          {% set demo = "../../src/" + component.name + "/demo.html" %}
          {% include demo ignore missing %}
          <div class="docs-text-styling docs-readme">
            {% set doc = "../../dist/components/" + component.name + "/index.html" %}
            {% include doc ignore missing %}
          </div>
        {%- endfor %}
      </div>
    </section>
    {%- endfor %}
</main>
</div>

{% endblock %}