{% extends 'image-resizer/_layouts' %}
{% import '_includes/forms' as forms %}
{% import 'image-resizer/_macros' as macros %}

{% set crumbs = [
    { label: 'Image Resizer' | t('image-resizer'), url: url('image-resizer') },
    { label: 'Settings' | t('app'), url: url('image-resizer/settings') },
] %}

{% set navItems = {
    'resize': { title: 'Resize' | t('image-resizer') },
    'resize-bulk': { title: 'Resize Bulk' | t('image-resizer') },
    'other': { title: 'Other' | t('image-resizer') },
} %}

{% set selectedTab = 'settings' %}
{% set selectedItem = 'resize' %}
{% set fullPageForm = true %}

{% block sidebar %}
    <nav class="image-resizer-settings-tabs" data-vui-tabs>
        <ul>
            {% for id, item in navItems %}
                {% if item.heading is defined %}
                    <li class="heading"><span>{{ item.heading }}</span></li>
                {% else %}
                    <li>
                        <a id="tab-{{ loop.index }}" href="#tab-{{ id }}" class="tab {% if id == selectedItem %}sel{% endif %}">
                            {{ item.title }}
                        </a>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </nav>
{% endblock %}

{% block blockContent %}

<input type="hidden" name="action" value="plugins/save-plugin-settings">
<input type="hidden" name="pluginHandle" value="image-resizer">

{% for id, item in navItems %}
    {% if item.title is defined %}
        <div id="tab-{{ id }}" {% if not loop.first %}class="hidden"{% endif %}>
            <h2>{{ item.title }}</h2>

            {% namespace 'settings' %}
                {% include 'image-resizer/settings/_panes/' ~ id ignore missing %}
            {% endnamespace %}
        </div>
    {% endif %}
{% endfor %}

{% endblock %}