@twillRepeaterTitle('Slider item')
@twillRepeaterTrigger('Añadir slider')

@formField('select', [
    'name' => 'align',
    'label' => 'Alineación',
    'unpack' => true,
    'options' => [
        [
            'value' => 'left',
            'label' => 'Izquierda'
        ],
        [
            'value' => 'center',
            'label' => 'Centrado'
        ],
        [
            'value' => 'right',
            'label' => 'Derecha'
        ],
    ]
])

<div style="margin-top: 35px">
    <details>
        <summary>
            <span class="f--note f--underlined">Contenido Principal</span> - <span class="f--small">texto y color</span>
        </summary>

        @formField('input', [
            'name' => 'title',
            'label' => 'Texto',
            'type' => 'textarea',
            'rows' => 4,
            'translated' => true,
        ])

        @formField('color', [
            'name' => 'title_color',
            'label' => 'Color',
        ])
    </details>
</div>

<div style="margin-top: 35px">
    <details>
        <summary>
            <span class="f--note f--underlined">Contenido Secundario</span> - <span class="f--small">texto y color</span>
        </summary>

        {{-- @formField('radios', [
            'name' => 'description_position',
            'label' => 'Posición',
            'default' => 'bottom',
            'options' => [
                [
                    'value' => 'top',
                    'label' => 'Arriba del Contenido Principal'
                ],
                [
                    'value' => 'bottom',
                    'label' => 'Abajo del Contenido Principal'
                ],
            ]
        ]) --}}

        @formField('input', [
            'name' => 'description',
            'label' => 'Texto',
            'translated' => true,
        ])

        @formField('color', [
            'name' => 'description_color',
            'label' => 'Color',
        ])
    </details>
</div>


<div style="margin-top: 35px">
    <details>
        <summary>
            <span class="f--note f--underlined">Fondo</span> - <span class="f--small">texto y color</span>
        </summary>

        @formField('select', [
            'name' => 'background_type',
            'label' => 'Tipo de fondo',
            'required' => true,
            'default' => 'image',
            'options' => [
                [
                    'value' => 'image',
                    'label' => 'Image'
                ],
                [
                    'value' => 'video',
                    'label' => 'Video'
                ],
                [
                    'value' => 'color',
                    'label' => 'Color'
                ],
            ]
        ])

        @formConnectedFields([
            'fieldName' => 'background_type',
            'fieldValues' => 'image',
            'renderForBlocks' => true
        ])
            @formField('medias', [
                'name' => 'image__slider_item_background',
                'label' => 'Imagen',
                'required' => true,
            ])
            @formField('checkbox', [
                'name' => 'background_parallax',
                'label' => 'Parallax',
                'default' => true,
                'note' => 'Scroll effect on image',
            ])
            @formField('color', [
                'name' => 'background_overlay',
                'label' => 'Overlay',
            ])
        @endformConnectedFields

        @formConnectedFields([
            'fieldName' => 'background_type',
            'fieldValues' => 'video',
            'renderForBlocks' => true
        ])
            @formField('files', [
                'name' => 'video__slider_item_background',
                'label' => 'Video',
                'required' => true,
            ])
            @formField('color', [
                'name' => 'background_overlay',
                'label' => 'Overlay',
            ])
        @endformConnectedFields

        @formConnectedFields([
            'fieldName' => 'background_type',
            'fieldValues' => 'color',
            'renderForBlocks' => true
        ])
            @formField('color', [
                'name' => 'background_color',
                'label' => 'Color',
                'required' => true,
            ])
        @endformConnectedFields
    </details>
</div>