{% load dlux_tags %}
<div class="dlux-ribbon-builder" data-ribbon-builder
     data-catalog='{{ ribbon_catalog_json }}'
     data-destinations='{{ ribbon_destination_catalog_json }}'
     data-config='{{ ribbon_config_json }}'
     data-languages='{{ languages_json }}'
     data-strings='{{ ribbon_builder_strings_json }}'
     data-preview-url="{% url 'ribbon_tabs_preview' %}">

    <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-3">
        <p class="text-muted small mb-0">{{ DLUX_STRINGS.ribbon_builder_intro|default:"Give a list page extra tab strips, or reshape the strips it already has, without touching code." }}</p>
        <div class="form-check form-switch small mb-0">
            <input class="form-check-input" type="checkbox" id="ribbonSystemItemsToggle-{{ mode }}" data-ribbon-system-toggle>
            <label class="form-check-label fw-semibold" for="ribbonSystemItemsToggle-{{ mode }}">
                {{ DLUX_STRINGS.sidebar_show_system_items|default:"Show system items" }}
            </label>
        </div>
    </div>

    <div class="dlux-ribbon-builder__inspector-row" data-ribbon-inspector-shell></div>

    <input type="hidden" name="ribbon_builder_entry_icon" data-dlux-unsaved-ignore data-ribbon-icon-value value="">
    <div class="d-none" data-ribbon-icon-picker-holder>
        {% include 'dlux/helpers/icon_picker.html' with field_name='ribbon_builder_entry_icon' label=DLUX_STRINGS.sidebar_icon_field help_text='' current_icon='' default_icon='bi-tag' directional_icons='' allow_empty=True inline=False %}
    </div>

    <div class="dlux-ribbon-builder__models" data-ribbon-models></div>
</div>

<template data-ribbon-model-template>
    <section class="dlux-ribbon-builder__model" data-model>
        <header class="dlux-ribbon-builder__model-head">
            <div class="dlux-ribbon-builder__model-name">
                <strong data-model-label></strong>
                <code class="small" data-model-key></code>
            </div>
            <div class="dlux-ribbon-builder__model-tools">
                <span class="dlux-ribbon-builder__badge" data-model-badge hidden></span>
                <button type="button" class="btn btn-sm btn-outline-primary rounded-pill" data-model-add-action>
                    <i class="bi bi-plus-lg me-1"></i>{{ DLUX_STRINGS.ribbon_builder_add_button|default:"Add button" }}
                </button>
            </div>
        </header>
        <div class="dlux-ribbon-builder__group" data-actions-section>
            <div class="dlux-ribbon-builder__group-title">{{ DLUX_STRINGS.ribbon_builder_buttons|default:"Buttons" }}</div>
            <div class="dlux-ribbon-builder__pills" data-model-actions></div>
        </div>
        <div class="dlux-ribbon-builder__group" data-declared-section>
            <div class="dlux-ribbon-builder__group-title">{{ DLUX_STRINGS.ribbon_builder_predefined_strips|default:"Pre-defined strips" }}</div>
            <div data-model-declared-strips></div>
        </div>
        <div class="dlux-ribbon-builder__group" data-extra-section>
            <div class="dlux-ribbon-builder__group-title">{{ DLUX_STRINGS.ribbon_builder_extra_strips|default:"Extra strips" }}</div>
            <div data-model-extra-strips></div>
        </div>
        <div class="dlux-ribbon-builder__bar mt-2" data-model-add-strip>
            <select class="form-select" data-ribbon-new-field
                    aria-label="{{ DLUX_STRINGS.ribbon_builder_split|default:'Split by' }}"
                    title="{{ DLUX_STRINGS.ribbon_builder_split_hint|default:'The field this strip splits on. Its values become the tabs.' }}"></select>
            <select class="form-select" data-ribbon-new-relation
                    aria-label="{{ DLUX_STRINGS.ribbon_builder_relation|default:'Strip type' }}"
                    title="{{ DLUX_STRINGS.ribbon_builder_relation_hint|default:'How this extra strip relates to the strip before it.' }}"></select>
            <input type="text" class="form-control" data-ribbon-new-param
                   placeholder="{{ DLUX_STRINGS.ribbon_builder_param|default:'Query key' }}"
                   title="{{ DLUX_STRINGS.ribbon_builder_param_hint|default:'The key this strip puts in the address bar. Leave blank to name it after the field.' }}">
            <button type="button" class="btn btn-outline-primary rounded-pill text-nowrap" data-ribbon-add-strip>
                <i class="bi bi-plus-lg me-1"></i>{{ DLUX_STRINGS.ribbon_builder_add_strip|default:"Add strip" }}
            </button>
        </div>
        <div class="text-muted small" data-model-empty hidden>{{ DLUX_STRINGS.ribbon_builder_no_strips|default:"This ribbon has no tab strips yet." }}</div>
    </section>
</template>

<template data-ribbon-strip-row-template>
    <div class="dlux-ribbon-builder__preview" data-strip-row>
        <button type="button" class="dlux-ribbon-builder__preview-kind" data-strip-kind></button>
        <div class="dlux-ribbon-builder__pills" data-strip-pills></div>
        <select class="form-select form-select-sm dlux-ribbon-builder__split" data-strip-field hidden
                aria-label="{{ DLUX_STRINGS.ribbon_builder_split|default:'Split by' }}"
                title="{{ DLUX_STRINGS.ribbon_builder_split_hint|default:'The field this strip splits on. Its values become the tabs.' }}"></select>
        <select class="form-select form-select-sm dlux-ribbon-builder__relation" data-strip-relation hidden
                aria-label="{{ DLUX_STRINGS.ribbon_builder_relation|default:'Strip type' }}"
                title="{{ DLUX_STRINGS.ribbon_builder_relation_hint|default:'How this extra strip relates to the strip before it.' }}"></select>
    </div>
</template>

<template data-ribbon-pill-template>
    <button type="button" class="dlux-ribbon-builder__pill" data-pill draggable="true">
        <i data-pill-icon hidden></i><span data-pill-label></span>
    </button>
</template>

<template data-ribbon-action-template>
    <button type="button" class="dlux-ribbon-builder__pill" data-action-pill>
        <i data-action-icon hidden></i><span data-action-label></span>
    </button>
</template>