{% load wagtailadmin_tags i18n %}

<div class="{{ classname }}">
    {% if help_text %}
    <span>
        <div class="help">
            {% icon name="help" classname="default" %}
            {{ help_text }}
        </div>
    </span>
    {% endif %}

    <ul class="nav nav-tabs corner-tab-control">
		<li class="nav-item" role="presentation">
			<a class="nav-link" data-bs-toggle="tab" href="#styling-{{prefix}}" aria-controls="styling-{{prefix}}" aria-selected="false">
				<svg class="icon icon-palette default" aria-hidden="true" focusable="false">
                    <use href="#icon-palette"/>
                </svg>
			</a>
		</li>
		<li class="nav-item" role="presentation">
			<a class="nav-link active" data-bs-toggle="tab" href="#all-{{prefix}}" aria-controls="all-{{prefix}}">
				<svg class="icon icon-layout default" aria-hidden="true" focusable="false">
                    <use href="#icon-layout"/>
                </svg>
			</a>
		</li>
	</ul>

	<div class="nav tab-content">
		<section class="tab-pane fade show active" id="all-{{prefix}}">
			<div class="tabs-wrapper">
				<ul class="nav nav-tabs" id="myTab">
					<li class="nav-item" role="presentation">
						<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#slides-{{prefix}}" type="button">{% trans "Elements" %}</button>
					</li>
					<li class="nav-item ps-2" role="presentation">
						<button class="nav-link" data-bs-toggle="tab" data-bs-target="#options-{{ prefix }}" type="button">{% trans "Options" %}</button>
					</li>
				</ul>
				<section class="nav tab-content">
					<div class="tab-pane show active px-3 py-4 border border-top-0" id="slides-{{prefix}}">
							{% include "roadrunner/partials/form_field.html" with child=children.slides %}
					</div>
					<div class="tab-pane px-3 py-4 border border-top-0" id="options-{{prefix}}">
							{% include "roadrunner/partials/form_field.html" with child=children.lazy %}
							{% include "roadrunner/partials/form_field.html" with child=children.items %}
							{% include "roadrunner/partials/form_field.html" with child=children.slideby %}
							{% include "roadrunner/partials/form_field.html" with child=children.loop %}
							{% include "roadrunner/partials/form_field.html" with child=children.controls %}
							{% include "roadrunner/partials/form_field.html" with child=children.nav %}
							{% include "roadrunner/partials/form_field.html" with child=children.autoplay %}
							{% include "roadrunner/partials/form_field.html" with child=children.autoplaytimeout %}
							{% include "roadrunner/partials/form_field.html" with child=children.autoheight %}
							{% include "roadrunner/partials/form_field.html" with child=children.fixed_height %}
					</div>
				</section>
			</div>
		</section>
		<section class="tab-pane fade" id="styling-{{prefix}}">
			{{children.styling.render_form}}
		</section>
	</div>
</div>