@twillBlockTitle('Banner')
@twillBlockIcon('image')

@formField('select', [
    'name' => 'section_style',
    'label' => 'Estilos',
    'default' => 'style_1',
    'required' => true,
    'options' => [
        [
            'value' => 'style_1',
            'label' => 'Estilo 1'
        ],
        [
            'value' => 'style_2',
            'label' => 'Estilo 2'
        ],
    ]
])

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

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

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

<div style="margin-top: 35px">
    <details>
        <summary>
            <span class="f--note f--underlined">Botón</span>
        </summary>

        @formField('checkbox', [
            'name' => 'button',
            'label' => 'Botón'
        ])

        @formConnectedFields([
            'fieldName' => 'button',
            'fieldValues' => true,
            'renderForBlocks' => true
        ])
            @formField('input', [
                'name' => 'button_text',
                'label' => 'Texto del boton',
                'translated' => true,
            ])

            @formField('color', [
                'name' => 'button_color',
                'label' => 'Color de texto en el botón',
            ])

            @formField('color', [
                'name' => 'button_bg_color',
                'label' => 'Color de fondo en el botón',
            ])

            @include('admin.partials.link_field', [
                'fieldName' => 'button_field',
                'fieldName' => 'Link del botón',
                'linkOptions' => [
                    [
                        'value' => 'no',
                        'label' => 'No Link'
                    ],
                    [
                        'value' => 'internal',
                        'label' => 'Link a página interna'
                    ],
                    [
                        'value' => 'external',
                        'label' => 'Link externo'
                    ]
                ]
            ])
        @endformConnectedFields
    </details>
</div>

<div style="margin-top: 35px">
    <details>
        <summary>
            <span class="f--note f--underlined">Fondo</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__banner_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__banner_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>