---
layout: compress
---

{% include _header.html %}

<main>
    {% if page.version %}
    <div class="row">
        <div class="medium-8 small-12 columns">
            <span>
            {% if page.version.removed %}
                {% assign type = 'removed' %}
                {% assign typeCapital = 'Removed' %}
            {% else %}
                {% assign type = 'added' %}
                {% assign typeCapital = 'Added' %}
            {% endif %}

            {% if page.mod == 'ace' %}

                {% if page.version.major > site.ace.version.major %}
                    <em>Will be {{type}} in ACE3 v{{page.version.major}}.{{page.version.minor}}.{{page.version.patch}}</em>
                {% elsif page.version.major == site.ace.version.major and page.version.minor > site.ace.version.minor %}
                    <em>Will be {{type}} in ACE3 v{{page.version.major}}.{{page.version.minor}}.{{page.version.patch}}</em>
                {% elsif page.version.major == site.ace.version.major and page.version.minor == site.ace.version.minor and page.version.patch > site.ace.version.patch %}
                    <em>Will be {{type}} in ACE3 v{{page.version.major}}.{{page.version.minor}}.{{page.version.patch}}</em>
                {% else %}
                    <em>{{typeCapital}} in ACE3 v{{page.version.major}}.{{page.version.minor}}.{{page.version.patch}}</em>
                {% endif %}

            {% elsif page.mod == 'acex' %}

                {% if page.version.removed %}
                    <em>Removed in ACE3 v{{page.version.major}}.{{page.version.minor}}.{{page.version.patch}}</em>
                {% else %}
                    <em>Moved to ACE3 in v3.14.0 (originally added in ACEX v{{page.version.major}}.{{page.version.minor}}.{{page.version.patch}})</em>
                {% endif %}

            {% endif %}
            </span>
        </div>
    </div>
    {% endif %}
    <div class="row">
        <aside class="medium-4 medium-push-8 small-12 columns">
            <div class="row">
                <div class="large-12 columns">
                    <p>
                        <a href="./" class="flex gap-1 leading-none items-center">
                            <i class="icon icon--red" aria-hidden="true">
                                <svg>
                                    <use href="/dist/icons.svg#chevronleft" />
                                </svg>
                            </i>
                            <span>Back to overview</span>
                        </a>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="large-12 columns">
                    <h2 class="toc-header">Table of contents</h2>
                    <div id="toc"></div>
                </div>
            </div>
            {% if page.component %}
            <div class="row">
                <div class="large-12 columns">
                    <p><a href="{{ site.url }}/wiki/development/dependencies.html#{{ page.title | slugify }}"><i class="fa fa-1 fa-chevron-right"></i>&nbsp;&nbsp;See dependencies</a></p>
                </div>
            </div>
            {% endif %}
        </aside>
        <section class="medium-8 medium-pull-4 small-12 columns">
            <h1>{{page.title}}</h1>

            {% if page.mod == 'acex' and page.group == 'framework' %}
                <div class="panel callout">
                    <p>Component may use <kbd>acex</kbd> prefix in certain variables, events and class names for backwards compatibility!</p>
                </div>
            {% endif %}

            <div id="content">{{ content }}</div>
        </section>
    </div>
</main>

{% include _footer.html %}