'; // Columna izquierda $html .= '

'; $html .= $this->buildVisibilityGroup($componentId); $html .= $this->buildContentGroup($componentId); $html .= $this->buildLayoutGroup($componentId); $html .= '

'; // Columna derecha $html .= '

'; $html .= $this->buildTypographyGroup($componentId); $html .= $this->buildColorsGroup($componentId); $html .= $this->buildSpacingGroup($componentId); $html .= $this->buildEffectsGroup($componentId); $html .= '

'; $html .= '

renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true); $html .= $this->buildSwitch('relatedPostEnabled', 'Activar componente', 'bi-power', $enabled); $showOnDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true); $html .= $this->buildSwitch('relatedPostShowOnDesktop', 'Mostrar en escritorio', 'bi-display', $showOnDesktop); $showOnMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', true); $html .= $this->buildSwitch('relatedPostShowOnMobile', 'Mostrar en movil', 'bi-phone', $showOnMobile); $showOnPages = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_pages', 'posts'); $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Mostrar en'; $html .= ' '; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Contenido'; $html .= '

'; // Section Title $sectionTitle = $this->renderer->getFieldValue($componentId, 'content', 'section_title', 'Descubre Mas Contenido'); $html .= '

'; $html .= ' Titulo de seccion'; $html .= ' '; $html .= '

'; // Posts per page $postsPerPage = $this->renderer->getFieldValue($componentId, 'content', 'posts_per_page', '12'); $html .= '

'; $html .= ' Posts por pagina'; $html .= ' '; $html .= '

'; // Order by $orderby = $this->renderer->getFieldValue($componentId, 'content', 'orderby', 'rand'); $html .= '

'; $html .= ' Ordenar por'; $html .= ' '; $html .= '

'; // Order direction $order = $this->renderer->getFieldValue($componentId, 'content', 'order', 'DESC'); $html .= '

'; $html .= ' Direccion'; $html .= ' '; $html .= '

'; // Show pagination $showPagination = $this->renderer->getFieldValue($componentId, 'content', 'show_pagination', true); $html .= $this->buildSwitch('relatedPostShowPagination', 'Mostrar paginacion', 'bi-three-dots', $showPagination); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Disposicion'; $html .= '

'; // Columns desktop $colsDesktop = $this->renderer->getFieldValue($componentId, 'layout', 'columns_desktop', '3'); $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Columnas escritorio'; $html .= ' '; $html .= ' '; $html .= '

'; // Columns tablet $colsTablet = $this->renderer->getFieldValue($componentId, 'layout', 'columns_tablet', '2'); $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Columnas tablet'; $html .= ' '; $html .= ' '; $html .= '

'; // Columns mobile $colsMobile = $this->renderer->getFieldValue($componentId, 'layout', 'columns_mobile', '1'); $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Columnas movil'; $html .= ' '; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Tipografia'; $html .= '

'; $html .= '

'; $sectionTitleSize = $this->renderer->getFieldValue($componentId, 'typography', 'section_title_size', '1.75rem'); $html .= '

'; $html .= ' Tamano titulo seccion'; $html .= ' '; $html .= '

'; $sectionTitleWeight = $this->renderer->getFieldValue($componentId, 'typography', 'section_title_weight', '500'); $html .= '

'; $html .= ' Peso titulo seccion'; $html .= ' '; $html .= '

'; $html .= '

'; $cardTitleSize = $this->renderer->getFieldValue($componentId, 'typography', 'card_title_size', '1rem'); $html .= '

'; $html .= ' Tamano titulo card'; $html .= ' '; $html .= '

'; $cardTitleWeight = $this->renderer->getFieldValue($componentId, 'typography', 'card_title_weight', '500'); $html .= '

'; $html .= ' Peso titulo card'; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Colores'; $html .= '

'; // Seccion $html .= '

Seccion

'; $html .= '

'; $sectionTitleColor = $this->renderer->getFieldValue($componentId, 'colors', 'section_title_color', '#212529'); $html .= $this->buildColorPicker('relatedPostSectionTitleColor', 'Titulo seccion', $sectionTitleColor); $html .= '

'; // Cards $html .= '

Cards

'; $html .= '

'; $cardBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'card_bg_color', '#ffffff'); $html .= $this->buildColorPicker('relatedPostCardBgColor', 'Fondo card', $cardBgColor); $cardTitleColor = $this->renderer->getFieldValue($componentId, 'colors', 'card_title_color', '#212529'); $html .= $this->buildColorPicker('relatedPostCardTitleColor', 'Titulo card', $cardTitleColor); $html .= '

'; $html .= '

'; $cardHoverBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'card_hover_bg_color', '#f8f9fa'); $html .= $this->buildColorPicker('relatedPostCardHoverBgColor', 'Fondo hover', $cardHoverBgColor); $html .= '

'; // Paginacion $html .= '

Paginacion

'; $html .= '

'; $paginationBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'pagination_bg_color', '#ffffff'); $html .= $this->buildColorPicker('relatedPostPaginationBgColor', 'Fondo', $paginationBgColor); $paginationTextColor = $this->renderer->getFieldValue($componentId, 'colors', 'pagination_text_color', '#0d6efd'); $html .= $this->buildColorPicker('relatedPostPaginationTextColor', 'Texto', $paginationTextColor); $html .= '

'; $html .= '

'; $paginationActiveBg = $this->renderer->getFieldValue($componentId, 'colors', 'pagination_active_bg', '#0d6efd'); $html .= $this->buildColorPicker('relatedPostPaginationActiveBg', 'Activo fondo', $paginationActiveBg); $paginationActiveText = $this->renderer->getFieldValue($componentId, 'colors', 'pagination_active_text', '#ffffff'); $html .= $this->buildColorPicker('relatedPostPaginationActiveText', 'Activo texto', $paginationActiveText); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Espaciado'; $html .= '

'; $html .= '

'; $sectionMarginTop = $this->renderer->getFieldValue($componentId, 'spacing', 'section_margin_top', '3rem'); $html .= '

'; $html .= ' Margen superior'; $html .= ' '; $html .= '

'; $sectionMarginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'section_margin_bottom', '3rem'); $html .= '

'; $html .= ' Margen inferior'; $html .= ' '; $html .= '

'; $html .= '

'; $titleMarginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'title_margin_bottom', '1.5rem'); $html .= '

'; $html .= ' Margen titulo'; $html .= ' '; $html .= '

'; $gridGap = $this->renderer->getFieldValue($componentId, 'spacing', 'grid_gap', '1.5rem'); $html .= '

'; $html .= ' Espacio cards'; $html .= ' '; $html .= '

'; $html .= '

'; $cardPadding = $this->renderer->getFieldValue($componentId, 'spacing', 'card_padding', '1.5rem'); $html .= '

'; $html .= ' Padding card'; $html .= ' '; $html .= '

'; $paginationMarginTop = $this->renderer->getFieldValue($componentId, 'spacing', 'pagination_margin_top', '1rem'); $html .= '

'; $html .= ' Margen paginacion'; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Efectos Visuales'; $html .= '

'; $html .= '

'; $cardBorderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'card_border_radius', '0.375rem'); $html .= '

'; $html .= ' Radio borde card'; $html .= ' '; $html .= '

'; $cardTransition = $this->renderer->getFieldValue($componentId, 'visual_effects', 'card_transition', '0.3s ease'); $html .= '

'; $html .= ' Transicion'; $html .= ' '; $html .= '

'; $html .= '

'; $cardShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'card_shadow', '0 .125rem .25rem rgba(0,0,0,.075)'); $html .= ' Sombra card'; $html .= ' '; $html .= '

'; $html .= '

'; $cardHoverShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'card_hover_shadow', '0 .5rem 1rem rgba(0,0,0,.15)'); $html .= ' Sombra hover'; $html .= ' '; $html .= '

'; $html .= '