{% load wagtailadmin_tags %}

<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="split-row">
				<div class="col5">
					<div>
						<h1>Knop</h1>
						{% include "roadrunner/partials/form_field.html" with child=children.text %}
						{% include "roadrunner/partials/form_field.html" with child=children.button_style %}
					</div>
					<div class="mt-5">
						<h1>Geen knop</h1>
						{% include "roadrunner/partials/form_field.html" with child=children.open_on_load %}
						{% include "roadrunner/partials/form_field.html" with child=children.open_once %}
					</div>
				</div>
				<div class="col7">
					<h1>Popup</h1>
					{% include "roadrunner/partials/form_field.html" with child=children.popup_header %}
					{% include "roadrunner/partials/form_field.html" with child=children.popup_content %}
					{% include "roadrunner/partials/form_field.html" with child=children.big_modal %}
				</div>
			</div>
		</section>
		<section class="tab-pane fade" id="styling-{{prefix}}">
			{{children.styling.render_form}}
		</section>
	</div>
</div>