<?php
/**
 * Widget Name: Tabs
 * Description: An accessible, animated tabs widget with five distinctive layouts —
 *              animated underline, pills, vertical, folder and a sliding segmented
 *              control. Each tab supports an icon and rich ( WYSIWYG ) content, with
 *              keyboard navigation and a moving indicator. Only the selected style CSS
 *              file is loaded on the frontend.
 *
 * @package    captain-widgets-kit
 * @subpackage captain-widgets-kit/includes
 * @since      1.3.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Background;
use Elementor\Icons_Manager;

/**
 * Class Captwiki_Tabs
 *
 * @since 1.3.0
 */
class Captwiki_Tabs extends Widget_Base {

	/**
	 * Get widget name.
	 *
	 * @since 1.3.0
	 * @return string
	 */
	public function get_name(): string {
		return 'captwiki-tabs';
	}

	/**
	 * Get widget title.
	 *
	 * @since 1.3.0
	 * @return string
	 */
	public function get_title(): string {
		return esc_html__( 'Tabs', 'captain-widgets-kit' );
	}

	/**
	 * Get widget icon.
	 *
	 * @since 1.3.0
	 * @return string
	 */
	public function get_icon(): string {
		return 'eicon-tabs captwiki-el-logo';
	}

	/**
	 * Get widget categories.
	 *
	 * @since 1.3.0
	 * @return array
	 */
	public function get_categories(): array {
		return array( 'captwiki-essential' );
	}

	/**
	 * Get widget keywords.
	 *
	 * @since 1.3.0
	 * @return array
	 */
	public function get_keywords(): array {
		return array( 'tabs', 'tab', 'accordion', 'toggle', 'content', 'switcher', 'captain-widgets-kit' );
	}

	/**
	 * Common stylesheet dependency.
	 *
	 * @since 1.3.0
	 * @return array
	 */
	public function get_style_depends(): array {
		return array( 'captwiki_tabs' );
	}

	/**
	 * Frontend script dependency.
	 *
	 * @since 1.3.0
	 * @return array
	 */
	public function get_script_depends(): array {
		return array( 'captwiki-tabs' );
	}

	/**
	 * Disable Elementor's default inner wrapper.
	 *
	 * @since 1.3.0
	 * @return bool
	 */
	public function has_widget_inner_wrapper(): bool {
		return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}

	/**
	 * Selectable visual styles ( tab-specific layouts ).
	 *
	 * @since 1.3.0
	 * @return array
	 */
	private function captwiki_style_options(): array {
		return array(
			'style-1' => esc_html__( 'Style 1 – Animated Underline', 'captain-widgets-kit' ),
			'style-2' => esc_html__( 'Style 2 – Pills', 'captain-widgets-kit' ),
			'style-3' => esc_html__( 'Style 3 – Vertical', 'captain-widgets-kit' ),
			'style-4' => esc_html__( 'Style 4 – Folder', 'captain-widgets-kit' ),
			'style-5' => esc_html__( 'Style 5 – Segmented Slider', 'captain-widgets-kit' ),
		);
	}

	/**
	 * Register widget controls.
	 *
	 * @since 1.3.0
	 * @return void
	 */
	protected function register_controls(): void {
		$this->register_content_controls();
		$this->register_settings_controls();

		$this->register_nav_style_controls();
		$this->register_indicator_style_controls();
		$this->register_icon_style_controls();
		$this->register_content_style_controls();
	}

	/**
	 * Content tab — tabs repeater.
	 *
	 * @since 1.3.0
	 * @return void
	 */
	private function register_content_controls(): void {

		$this->start_controls_section(
			'section_tabs',
			array(
				'label' => esc_html__( 'Tabs', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'widget_style',
			array(
				'label'   => esc_html__( 'Style', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'style-1',
				'options' => $this->captwiki_style_options(),
			)
		);

		$repeater = new Repeater();

		$repeater->add_control(
			'tab_title',
			array(
				'label'       => esc_html__( 'Title', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'Tab Title', 'captain-widgets-kit' ),
				'label_block' => true,
				'dynamic'     => array( 'active' => true ),
			)
		);

		$repeater->add_control(
			'tab_icon',
			array(
				'label'       => esc_html__( 'Icon', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::ICONS,
				'skin'        => 'inline',
				'label_block' => false,
			)
		);

		$repeater->add_control(
			'tab_content',
			array(
				'label'   => esc_html__( 'Content', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::WYSIWYG,
				'default' => esc_html__( 'Click edit to add your tab content. You can add any text, images or shortcodes here.', 'captain-widgets-kit' ),
			)
		);

		$this->add_control(
			'tabs',
			array(
				'label'       => esc_html__( 'Items', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => array(
					array(
						'tab_title'   => esc_html__( 'Overview', 'captain-widgets-kit' ),
						'tab_content' => esc_html__( 'A quick summary of what this product or service offers. Use this space to set the scene for your visitors.', 'captain-widgets-kit' ),
						'tab_icon'    => array( 'value' => 'fas fa-circle-info', 'library' => 'fa-solid' ),
					),
					array(
						'tab_title'   => esc_html__( 'Features', 'captain-widgets-kit' ),
						'tab_content' => esc_html__( 'List the highlights and key features here. Keep it concise and scannable so visitors grasp the value fast.', 'captain-widgets-kit' ),
						'tab_icon'    => array( 'value' => 'fas fa-star', 'library' => 'fa-solid' ),
					),
					array(
						'tab_title'   => esc_html__( 'Pricing', 'captain-widgets-kit' ),
						'tab_content' => esc_html__( 'Explain your plans and pricing. You can drop in any rich content, lists or links inside each tab.', 'captain-widgets-kit' ),
						'tab_icon'    => array( 'value' => 'fas fa-tag', 'library' => 'fa-solid' ),
					),
				),
				'title_field' => '{{{ tab_title }}}',
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Content tab — behaviour & layout settings.
	 *
	 * @since 1.3.0
	 * @return void
	 */
	private function register_settings_controls(): void {

		$this->start_controls_section(
			'section_settings',
			array(
				'label' => esc_html__( 'Settings', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'active_tab',
			array(
				'label'       => esc_html__( 'Default Active Tab', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::NUMBER,
				'min'         => 1,
				'default'     => 1,
				'description' => esc_html__( 'Which tab is open on load ( 1 = first ).', 'captain-widgets-kit' ),
			)
		);

		$this->add_control(
			'show_icon',
			array(
				'label'        => esc_html__( 'Show Icons', 'captain-widgets-kit' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Show', 'captain-widgets-kit' ),
				'label_off'    => esc_html__( 'Hide', 'captain-widgets-kit' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		$this->add_control(
			'icon_position',
			array(
				'label'     => esc_html__( 'Icon Position', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'before',
				'options'   => array(
					'before' => esc_html__( 'Before Title', 'captain-widgets-kit' ),
					'above'  => esc_html__( 'Above Title', 'captain-widgets-kit' ),
				),
				'condition' => array( 'show_icon' => 'yes' ),
			)
		);

		$this->add_responsive_control(
			'nav_align',
			array(
				'label'     => esc_html__( 'Tabs Alignment', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'flex-start',
				'options'   => array(
					'flex-start' => esc_html__( 'Start', 'captain-widgets-kit' ),
					'center'     => esc_html__( 'Center', 'captain-widgets-kit' ),
					'flex-end'   => esc_html__( 'End', 'captain-widgets-kit' ),
					'stretch'    => esc_html__( 'Justified', 'captain-widgets-kit' ),
				),
				'selectors' => array(
					'{{WRAPPER}} .captwiki-tabs__nav' => 'justify-content: {{VALUE}};',
				),
				'description' => esc_html__( 'Ignored by the Vertical style.', 'captain-widgets-kit' ),
			)
		);

		$this->add_control(
			'content_animation',
			array(
				'label'        => esc_html__( 'Animate Content', 'captain-widgets-kit' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'On', 'captain-widgets-kit' ),
				'label_off'    => esc_html__( 'Off', 'captain-widgets-kit' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Navigation ( tab buttons ) style controls.
	 *
	 * @since 1.3.0
	 * @return void
	 */
	private function register_nav_style_controls(): void {

		$this->start_controls_section(
			'section_nav_style',
			array(
				'label' => esc_html__( 'Tabs', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'tab_typography',
				'selector' => '{{WRAPPER}} .captwiki-tabs__tab',
			)
		);

		$this->add_responsive_control(
			'tab_gap',
			array(
				'label'      => esc_html__( 'Gap', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array( 'px' => array( 'min' => 0, 'max' => 40 ) ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-tabs__nav' => 'gap: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'tab_padding',
			array(
				'label'      => esc_html__( 'Padding', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-tabs__tab' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'tab_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-tabs__tab' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->start_controls_tabs( 'tab_state_tabs' );

		$this->start_controls_tab(
			'tab_normal',
			array( 'label' => esc_html__( 'Normal', 'captain-widgets-kit' ) )
		);

		$this->add_control(
			'tab_color',
			array(
				'label'     => esc_html__( 'Text Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-tabs__tab' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'tab_bg',
			array(
				'label'     => esc_html__( 'Background', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-tabs__tab' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_hover',
			array( 'label' => esc_html__( 'Hover', 'captain-widgets-kit' ) )
		);

		$this->add_control(
			'tab_color_hover',
			array(
				'label'     => esc_html__( 'Text Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-tabs__tab:hover' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'tab_bg_hover',
			array(
				'label'     => esc_html__( 'Background', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-tabs__tab:hover' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_active',
			array( 'label' => esc_html__( 'Active', 'captain-widgets-kit' ) )
		);

		$this->add_control(
			'tab_color_active',
			array(
				'label'     => esc_html__( 'Text Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-tabs__tab.is-active' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'tab_bg_active',
			array(
				'label'     => esc_html__( 'Background', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-tabs__tab.is-active' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->end_controls_tab();
		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	/**
	 * Indicator / accent style controls.
	 *
	 * @since 1.3.0
	 * @return void
	 */
	private function register_indicator_style_controls(): void {

		$this->start_controls_section(
			'section_indicator_style',
			array(
				'label' => esc_html__( 'Accent / Indicator', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'accent_color',
			array(
				'label'       => esc_html__( 'Accent Color', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::COLOR,
				'default'     => '',
				'selectors'   => array(
					'{{WRAPPER}} .captwiki-tabs' => '--captwiki-tab-accent: {{VALUE}};',
				),
				'description' => esc_html__( 'Drives the underline, active pill, folder accent and segmented slider.', 'captain-widgets-kit' ),
			)
		);

		$this->add_control(
			'indicator_thickness',
			array(
				'label'      => esc_html__( 'Underline Thickness', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array( 'px' => array( 'min' => 1, 'max' => 10 ) ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-tabs__indicator' => 'height: {{SIZE}}{{UNIT}};',
				),
				'description' => esc_html__( 'Used by the Animated Underline style.', 'captain-widgets-kit' ),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Icon style controls.
	 *
	 * @since 1.3.0
	 * @return void
	 */
	private function register_icon_style_controls(): void {

		$this->start_controls_section(
			'section_icon_style',
			array(
				'label'     => esc_html__( 'Icon', 'captain-widgets-kit' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array( 'show_icon' => 'yes' ),
			)
		);

		$this->add_responsive_control(
			'icon_size',
			array(
				'label'      => esc_html__( 'Size', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'em' ),
				'range'      => array( 'px' => array( 'min' => 8, 'max' => 60 ) ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-tabs__tab-icon' => 'font-size: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'icon_gap',
			array(
				'label'      => esc_html__( 'Spacing', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array( 'px' => array( 'min' => 0, 'max' => 30 ) ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-tabs__tab' => 'gap: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Content panel style controls.
	 *
	 * @since 1.3.0
	 * @return void
	 */
	private function register_content_style_controls(): void {

		$this->start_controls_section(
			'section_content_style',
			array(
				'label' => esc_html__( 'Content', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'content_color',
			array(
				'label'     => esc_html__( 'Text Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-tabs__panel' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'content_typography',
				'selector' => '{{WRAPPER}} .captwiki-tabs__panel',
			)
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'content_background',
				'label'    => esc_html__( 'Background', 'captain-widgets-kit' ),
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .captwiki-tabs__panels',
			)
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'content_border',
				'label'    => esc_html__( 'Border', 'captain-widgets-kit' ),
				'selector' => '{{WRAPPER}} .captwiki-tabs__panels',
			)
		);

		$this->add_responsive_control(
			'content_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-tabs__panels' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'content_shadow',
				'label'    => esc_html__( 'Box Shadow', 'captain-widgets-kit' ),
				'selector' => '{{WRAPPER}} .captwiki-tabs__panels',
			)
		);

		$this->add_responsive_control(
			'content_padding',
			array(
				'label'      => esc_html__( 'Padding', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', 'em', 'rem' ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-tabs__panel' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Render a tab button.
	 *
	 * @since 1.3.0
	 * @param array  $item     Repeater item.
	 * @param array  $settings Widget settings.
	 * @param int    $index    Tab index.
	 * @param bool   $active   Whether this tab is active.
	 * @param string $base_id  Widget instance id base.
	 * @return void
	 */
	private function captwiki_render_tab( array $item, array $settings, int $index, bool $active, string $base_id ): void {
		$title = isset( $item['tab_title'] ) ? trim( (string) $item['tab_title'] ) : '';

		$classes  = 'captwiki-tabs__tab';
		$classes .= $active ? ' is-active' : '';

		echo '<button type="button" class="' . esc_attr( $classes ) . '" role="tab"'
			. ' id="' . esc_attr( $base_id . '-tab-' . $index ) . '"'
			. ' aria-controls="' . esc_attr( $base_id . '-panel-' . $index ) . '"'
			. ' aria-selected="' . ( $active ? 'true' : 'false' ) . '"'
			. ' tabindex="' . ( $active ? '0' : '-1' ) . '"'
			. ' data-index="' . esc_attr( $index ) . '">';

		if ( 'yes' === $settings['show_icon'] && ! empty( $item['tab_icon']['value'] ) ) {
			echo '<span class="captwiki-tabs__tab-icon" aria-hidden="true">';
			Icons_Manager::render_icon( $item['tab_icon'], array( 'aria-hidden' => 'true' ) );
			echo '</span>';
		}

		if ( '' !== $title ) {
			echo '<span class="captwiki-tabs__tab-title">' . esc_html( $title ) . '</span>';
		}

		echo '</button>';
	}

	/**
	 * Render a content panel.
	 *
	 * @since 1.3.0
	 * @param array  $item    Repeater item.
	 * @param int    $index   Tab index.
	 * @param bool   $active  Whether this panel is active.
	 * @param string $base_id Widget instance id base.
	 * @return void
	 */
	private function captwiki_render_panel( array $item, int $index, bool $active, string $base_id ): void {
		$content = isset( $item['tab_content'] ) ? $item['tab_content'] : '';

		$classes  = 'captwiki-tabs__panel';
		$classes .= $active ? ' is-active' : '';

		echo '<div class="' . esc_attr( $classes ) . '" role="tabpanel"'
			. ' id="' . esc_attr( $base_id . '-panel-' . $index ) . '"'
			. ' aria-labelledby="' . esc_attr( $base_id . '-tab-' . $index ) . '"'
			. ( $active ? '' : ' hidden' ) . '>';

		echo '<div class="captwiki-tabs__panel-inner">';
		echo wp_kses_post( $this->parse_text_editor( $content ) );
		echo '</div>';

		echo '</div>';
	}

	/**
	 * Render widget output on the frontend.
	 *
	 * @since 1.3.0
	 * @return void
	 */
	protected function render(): void {
		$settings = $this->get_settings_for_display();

		$items = ! empty( $settings['tabs'] ) && is_array( $settings['tabs'] ) ? $settings['tabs'] : array();

		if ( empty( $items ) ) {
			return;
		}

		$allowed_styles = array_keys( $this->captwiki_style_options() );
		$style          = in_array( $settings['widget_style'], $allowed_styles, true ) ? $settings['widget_style'] : 'style-1';

		// Load only the active style stylesheet, depending on the common one.
		wp_enqueue_style(
			'captwiki-tabs-' . $style,
			CAPTWIKI_URL . 'assets/css/widgets/tabs/captwiki-tabs-' . $style . '.css',
			array( 'captwiki_tabs' ),
			CAPTWIKI_VERSION
		);

		$count     = count( $items );
		$active    = isset( $settings['active_tab'] ) ? (int) $settings['active_tab'] : 1;
		$active    = max( 1, min( $count, $active ) ) - 1; // zero-based, clamped.
		$icon_pos  = 'above' === $settings['icon_position'] ? 'above' : 'before';
		$animate   = 'yes' === $settings['content_animation'] ? ' captwiki-tabs--animate' : '';
		$icon_cls  = 'yes' === $settings['show_icon'] ? ' captwiki-tabs--icon-' . $icon_pos : '';
		$base_id   = 'captwiki-tabs-' . $this->get_id();
		$unique    = 'captwiki-widget-' . $this->get_id();

		echo '<div class="captwiki-tabs captwiki-' . esc_attr( $style ) . $icon_cls . $animate . ' ' . esc_attr( $unique ) . '" data-active="' . esc_attr( $active ) . '">'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

			echo '<div class="captwiki-tabs__nav" role="tablist">';

		foreach ( $items as $index => $item ) {
			$this->captwiki_render_tab( $item, $settings, (int) $index, (int) $index === $active, $base_id );
		}

				echo '<span class="captwiki-tabs__indicator" aria-hidden="true"></span>';
			echo '</div>';

			echo '<div class="captwiki-tabs__panels">';

		foreach ( $items as $index => $item ) {
			$this->captwiki_render_panel( $item, (int) $index, (int) $index === $active, $base_id );
		}

			echo '</div>';

		echo '</div>';
	}
}
