{% load cradmin_kss_styleguide_tags %}
{% load i18n %}

<div id="kssref-{{ node.reference }}" class="kss-section  kss-section--depth-{{ node.level }}">

{% block title %}
    <h2 class="kss-title  kss-title--level-{{ node.level }}">
        <a class="kss-title__permalink" href="#kssref-{{ node.reference }}">
            {% block title-content %}
                <span class="kss-title__ref">
                    {{ node.dotted_numbered_path }}
                </span>
                {{ node.title }}
            {% endblock title-content %}
        </a>
    </h2>
{% endblock title %}

{% if node.section %}
    {% block modifiers %}
        {% if node.section.modifiers %}
            <ul class="kss-parameters">
                {% for modifier in node.section.modifiers %}
                    <li class="kss-parameters__item">
                        <code class="kss-parameters__name">{{ modifier.name }}</code>
                        <div class="kss-parameters__description">{{ modifier.description_html|safe }}</div>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endblock modifiers %}

    {% block description %}
        {% if node.section.description %}
            <div class="kss-description">
                {{ node.section.description_html|safe }}
            </div>
        {% endif %}
    {% endblock description %}

    {% block usage %}
        {% if node.section.has_markups or node.section.has_examples %}
            <div class="kss-usage">
                {% for example in node.section.examples %}
                    {% block example %}
                        <div class="kss-usage__example
                                {% if example.preview %}
                                    kss-usage__example--with-preview  kss-usage__example--showpreview
                                {% endif %}"
                             id="id_example_{{ node.reference }}_{{ forloop.counter }}">
                            <header class="kss-usage__header">
                                {% block example-title %}
                                    <h4 class="kss-usage__subtitle">
                                        {% if example.title %}
                                            {{ example.title }}
                                        {% else %}
                                            {% trans "Example" %}
                                        {% endif %}
                                    </h4>
                                {% endblock example-title %}
                                {% if example.code and example.preview %}
                                    <div class="kss-usage__previewbuttons">
                                        <button type="button" class="button button--compact button--fill"
                                                id="id_example_{{ node.reference }}_{{ forloop.counter }}_previewbutton"
                                                onclick="cradmin_kss_styleguide_toggle_example(event, 'id_example_{{ node.reference }}_{{ forloop.counter }}', false)">
                                            {% trans "Preview" %}
                                        </button>
                                        <button type="button" class="button button--compact"
                                                id="id_example_{{ node.reference }}_{{ forloop.counter }}_codebutton"
                                                onclick="cradmin_kss_styleguide_toggle_example(event, 'id_example_{{ node.reference }}_{{ forloop.counter }}', true)">
                                            {% trans "Code" %}
                                        </button>
                                    </div>
                                {% endif %}
                            </header>

                            <div class="kss-usage__preview-wrapper">
                                <div class="kss-usage__preview-content">
                                    {% if example.preview %}
                                        {% block example-preview %}
                                            {% if example.type == 'isolated' or example.type == 'fullpage' %}
                                                <div class="kss-usage__previewiframe  kss-usage__previewiframe--{{ example.syntax }}">
                                                    <iframe
                                                        scrolling="no"
                                                        src="{% url 'cradmin_kss_styleguide_example' unique_id=styleguideconfig.unique_id section=node.reference exampleindex=forloop.counter0 %}"
                                                        {% if example.height %}
                                                            style="height: {{ example.height }}"
                                                        {% else %}
                                                            onload="cradmin_kss_styleguide_autoresize_iframe(this)"
                                                        {% endif %}
                                                    >
                                                    </iframe>
                                                    <div class="kss-usage__new-window">
                                                        <a href="{% url 'cradmin_kss_styleguide_example' unique_id=styleguideconfig.unique_id section=node.reference exampleindex=forloop.counter0 %}" target="_blank">
                                                            {% trans "Open example in new window" %}
                                                        </a>
                                                    </div>
                                                </div>
                                            {% else %}
                                                <div class="kss-usage__preview">
                                                    {{ example.text|safe }}
                                                </div>
                                            {% endif %}
                                        {% endblock example-preview %}
                                    {% endif %}
                                    {% block example-htmlcode %}
                                        <div class="kss-usage__code  kss-usage__code--{{ example.syntax }}">
                                            {{ example.html|safe }}
                                        </div>
                                    {% endblock example-htmlcode %}
                                </div>
                            </div>
                        </div>
                    {% endblock example %}
                {% endfor %}
            </div>
        {% endif %}
    {% endblock usage %}
{% endif %}

</div>
