{% extends 'layout.html' %}

{% block content %}
<link href="{{page.include_prefix}}/assets/components.css" rel="stylesheet">
<script src="{{page.include_prefix}}/assets/components.js"></script>
<link rel="stylesheet" href="/components/demos.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css" rel="stylesheet">

<aside class="mdl-components">
  <div class="scroll">
  {% for component in page.components %}
    <a href="#{{ component.name }}" class="mdl-components__link mdl-component {{ component.name }} {% if loop.first %}active{%- endif %}">
      <img src="/assets/comp_{{ component.name }}.png">&nbsp;
      <span class="center">{{ component.title }}</span>
    </a>
  {%- endfor %}
  </div>
</aside>

{% for component in page.components -%}
{% set demo_css = "../../src/" + component.name + "/demo.css" %}
<style>
{% include demo_css ignore missing %}
</style>
{% set demo_js = "../../src/" + component.name + "/demo.js" %}
<script>
{% include demo_js ignore missing %}
</script>
<section class="mdl-component {{ component.name }} mdl-grid mdl-cell mdl-cell--12-col {% if loop.first %}active{%- endif %}">
  <div class="mdl-cell mdl-cell--12-col">
    <h1>{{ component.title }}</h1>
    <p>{{ component.description }}</p>
    <br><br>
    {% set demo = "../../src/" + component.name + "/demo.html" %}
    {% include demo ignore missing %}
    {% set doc = "../../dist/components/" + component.name + "/index.html" %}
    {% include doc ignore missing %}
  </div>
</section>
{%- endfor %}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>

{% endblock %}