{% extends 'pattern_library/base.html' %}

{% block content %}
    <section>
        <div class="wrapper wrapper--pattern-header">
            <h3 class="heading">
                <a href="{% url 'pattern_library:render_pattern' pattern_template_name=pattern_template_name %}">
                    {{ pattern_name }}
                    <svg class="icon icon--external" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h48v48h-48z" fill="none"/><path d="M38 38h-28v-28h14v-4h-14c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4v-14h-4v14zm-10-32v4h7.17l-19.66 19.66 2.83 2.83 19.66-19.66v7.17h4v-14h-14z"/></svg>
                </a>
            </h3>
            <div class="wrapper wrapper--resize-buttons">
                <h4 class="heading heading--iframe-size js-iframe-size">
                    <span class="sr-only">Window sizes</span>
                </h4>
                <button class="button button--resize js-resize-iframe" data-resize="320">S</button>
                <button class="button button--resize js-resize-iframe" data-resize="768">M</button>
                <button class="button button--resize js-resize-iframe" data-resize="1024">L</button>
                <button class="button button--resize js-resize-iframe is-active" data-resize="100">Full</button>
            </div>
        </div>

        {% block custom_pattern_header %}
        {% endblock %}

        <iframe class="iframe js-iframe is-animatable" src="{% url 'pattern_library:render_pattern' pattern_template_name=pattern_template_name %}" title="Iframe pattern"></iframe>

        <div class="tabbed-content">
            <ul class="tabbed-content__list">
                <li class="tabbed-content__heading tabbed-content__heading--active">
                    <a href="#tab-1">Template docs</a>
                </li>

                <li class="tabbed-content__heading">
                    <a href="#tab-2">Template config</a>
                </li>

                <li class="tabbed-content__heading">
                    <a href="#tab-3">Template source</a>
                </li>

                {% block custom_tab_heading %}
                {% endblock %}
            </ul>

            <div class="tabbed-content__tabs">
                <div id="tab-1" class="tabbed-content__item tabbed-content__item--active">
{% if pattern_markdown %}<div class="md">{{ pattern_markdown|safe }}</div>{% else %}<div class="md">No template doc available.</div>{% endif %}
                </div>

                <div id="tab-2" class="tabbed-content__item">
                    <pre><code class="code yaml">{{ pattern_config }}</code></pre>
                </div>

                <div id="tab-3" class="tabbed-content__item">
                    <pre><code class="code django">{{ pattern_source }}</code></pre>
                </div>

                {% block custom_tab_content %}
                {% endblock %}
            </div>
        </div>

    </section>
{% endblock %}