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

{% block content %}
    <style>
        .md table {
            margin-bottom: .67em;
        }

        .md th, td {
            padding: 5px;
            text-align: left;
        }

    </style>
    <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>

        <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">API &amp; Examples</a>
                </li>
                <li class="tabbed-content__heading">
                    <a href="#tab-2">Template Source</a>
                </li>

                <li class="tabbed-content__heading">
                    <a href="#tab-3">Variant Configuration</a>
                </li>
            </ul>

            <div class="tabbed-content__tabs">
                <div id="tab-1" class="tabbed-content__item tabbed-content__item--active">
                    <div class="md">{{ pattern_markdown|safe }}</div>
                </div>

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

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

            </div>
        </div>

    </section>
{% endblock %}