{% extends '/layouts/default.twig' %}

{% block before_header %}

    <script src="/core/js/pattern_browser.js?{{ random() }}"></script>
    <script src="/core/js/css_browser.js?{{ random() }}"></script>

    <div class="cssBrowserMenuWrap">

        <a class="cssBrowserMenuTrigger" href="#">
            <span>CSS Browser</span>
        </a>

        <ul>
            <li><a href="/css">Style Guide</a></li>
            <li><a href="/css?patterns=true">Patterns</a></li>
            {% include('chop/includes/navigation.twig') %}
        </ul>

    </div>

{% endblock %}

{% block content %}

    <div class="patternWrap">

        <div class="patternSidebar">
            {% if template_info.pattern_names is not empty %}
                <div class="patternMenuWrap">
                    <ul>
                        {% for pattern_name in template_info.pattern_names %}
                            <li>
                                <a href="#section_{{ pattern_name }}">
                                    {{ pattern_name }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}
        </div> <!-- .patternSidebar -->

        <div class="patternContent">
            {% for patterns in template_info.patterns %}

                <section id="section_{{ template_info.pattern_names[loop.index - 1] }}">

                    <h1>{{ template_info.pattern_names[loop.index - 1] }}</h1>

                    {% for pattern in patterns %}

                        <div class="pattern">

                            <div class="display">
                                {% include '/patterns/' ~ template_info.pattern_names[loop.parent.loop.index - 1] ~ '/' ~ pattern %}
                            </div> <!-- .display -->

                            <div class="source">

                                <div class="patternFilename">
                                    {{ '/patterns/' ~ template_info.pattern_names[loop.parent.loop.index - 1] ~ '/' ~ pattern }}
                                </div>

                                <div class="row">
                                    <textarea
                                        rows="6"
                                        cols="30"
                                        class="selectable">{% filter escape %}{% include '/patterns/' ~ template_info.pattern_names[loop.parent.loop.index - 1] ~ '/' ~ pattern %}{% endfilter %}</textarea>
                                </div>

                            </div> <!-- .source -->

                        </div> <!-- .pattern -->
                    {% endfor %}

                </section>

            {% endfor %}
        </div> <!-- .patternContent -->
    </div> <!-- .patternWrap -->

{% endblock %}
