<div class="repeater {{#if isHorizontal}}repeater-horizontal align-items-center d-flex{{/if}}">
    {{#if isHorizontal}}
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                {{#each mutableData}}
                    <li data-target="#carouselExampleIndicators"
                        data-slide-to="{{index}}"
                        class="{{#unless @index}}active{{/unless}}"></li>
                {{/each}}
            </ol>
            <div class="carousel-inner">
                {{#each mutableData as |datum index|}}
                    <div class="{{../repeaterFieldSetClass}} repeater-fieldset-container carousel-item{{#unless @index}} active{{/unless}}"
                         id="fieldset-{{@index}}-{{../safeName}}"
                         data-idx='{{@index}}'>
                        <div class="repeater-fieldset flex-1">
                            {{#if ../isHorizontal}}
                                <div class="modifiers d-flex mb-3">
                                    <div class="remove modifier" data-idx='{{@index}}' data-onclick="removeFieldSet"></div>
                                </div>
                            {{/if}}
                            {{include ../settings.fieldSetTemplate this}}
                        </div>
                        {{#unless ../isHorizontal}}
                            <div class="modifiers d-flex mb-3">
                                <div class="remove modifier" data-idx='{{@index}}' data-onclick="removeFieldSet"></div>
                            </div>
                        {{/unless}}
                    </div>
                {{/each}}
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    {{else}}
        {{#each mutableData as |datum index|}}
            <div class="{{../repeaterFieldSetClass}} repeater-fieldset-container"
                 id="fieldset-{{@index}}-{{../safeName}}"
                 data-idx='{{@index}}'>
                <div class="repeater-fieldset flex-1">
                    {{#if ../isHorizontal}}
                        <div class="modifiers d-flex mb-3">
                            <div class="remove modifier" data-idx='{{@index}}' data-onclick="removeFieldSet"></div>
                        </div>
                    {{/if}}
                    {{include ../settings.fieldSetTemplate this}}
                </div>
                {{#unless ../isHorizontal}}
                    <div class="modifiers d-flex mb-3">
                        <div class="remove modifier" data-idx='{{@index}}' data-onclick="removeFieldSet"></div>
                    </div>
                {{/unless}}
            </div>
        {{/each}}
    {{/if}}
    <div class="{{../repeaterFieldSetClass}} repeater-fieldset-container new-fieldset {{#unless isHorizontal}}d-flex{{/unless}}">
        {{#unless isHorizontal}}<div class="repeater-fieldset flex-1"></div>{{/unless}}
        <div class="modifiers d-flex add-modifier">
            <div class="add modifier" data-onclick="addFieldSet"></div>
            <span class="pointer" data-onclick="addFieldSet">{{addNewText}}</span>
        </div>
    </div>
</div>