<?php
/**
 * Toast Notification element.
 *
 * @package BricksExtras
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * Toast Notification element class.
 */
class X_Toast_Notification extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';
	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xtoastnotification';
	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-announcement';
	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';
	/**
	 * Required scripts.
	 *
	 * @var array
	 */
	public $scripts = array();
	/**
	 * Element is nestable.
	 *
	 * @var bool
	 */
	public $nestable = true;


	/**
	 * Get element label.
	 */
	public function get_label() {
		return esc_html__( 'Toast Notification', 'bricksextras' );
	}

	/**
	 * Get element keywords.
	 */
	public function get_keywords() {
		return array( 'toast', 'notification', 'message', 'alert' );
	}

	/**
	 * Get nestable item.
	 */
	public function get_nestable_item() {
		return array(
			'name'     => 'text-basic',
			'label'    => esc_html__( 'Notification text', 'bricks' ),
			'settings' => array(
				'text' => esc_html__( 'Notification text here', 'bricks' ),
			),
		);
	}

	/**
	 * Get nestable children.
	 */
	public function get_nestable_children() {
		return \BricksExtras\Helpers::get_nestable_children_helper( $this, 1 );
	}

	/**
	 * Set control groups.
	 */
	public function set_control_groups() {

		$this->control_groups['triggers'] = array(
			'title' => esc_html__( 'Triggers', 'bricksextras' ),
			'tab'   => 'content',
		);

		$this->control_groups['icon'] = array(
			'title' => esc_html__( 'Dismiss Button', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['contextIcon'] = array(
			'title' => esc_html__( 'Context Icon', 'bricks' ),
			'tab'   => 'content',
		);
	}

	/**
	 * Set element controls.
	 */
	public function set_controls() {

		// Apply all display/layout controls to the inner container.
		$this->controls['_display']['css'][0]['selector']        = '.x-toast-notification-inner';
		$this->controls['_margin']['css'][0]['selector']         = '.x-toast-notification-inner';
		$this->controls['_padding']['css'][0]['selector']        = '.x-toast-notification-inner';
		$this->controls['_aspectRatio']['css'][0]['selector']    = '.x-toast-notification-inner';
		$this->controls['_position']['css'][0]['selector']       = '.x-toast-notification-inner';
		$this->controls['_top']['css'][0]['selector']            = '.x-toast-notification-inner';
		$this->controls['_right']['css'][0]['selector']          = '.x-toast-notification-inner';
		$this->controls['_bottom']['css'][0]['selector']         = '.x-toast-notification-inner';
		$this->controls['_left']['css'][0]['selector']           = '.x-toast-notification-inner';
		$this->controls['_visibility']['css'][0]['selector']     = '.x-toast-notification-inner';
		$this->controls['_overflow']['css'][0]['selector']       = '.x-toast-notification-inner';
		$this->controls['_opacity']['css'][0]['selector']        = '.x-toast-notification-inner';
		$this->controls['_cursor']['css'][0]['selector']         = '.x-toast-notification-inner';
		$this->controls['_isolation']['css'][0]['selector']      = '.x-toast-notification-inner';
		$this->controls['_mixBlendMode']['css'][0]['selector']   = '.x-toast-notification-inner';
		$this->controls['_pointerEvents']['css'][0]['selector']  = '.x-toast-notification-inner';
		$this->controls['_alignSelf']['css'][0]['selector']      = '.x-toast-notification-inner';
		$this->controls['_justifyContent']['css'][0]['selector'] = '.x-toast-notification-inner';
		$this->controls['_alignItems']['css'][0]['selector']     = '.x-toast-notification-inner';
		$this->controls['_gap']['css'][0]['selector']            = '.x-toast-notification-inner';
		$this->controls['_flexDirection']['css'][0]['selector']  = '.x-toast-notification-inner';
		$this->controls['_flexGrow']['css'][0]['selector']       = '.x-toast-notification-inner';
		$this->controls['_flexShrink']['css'][0]['selector']     = '.x-toast-notification-inner';
		$this->controls['_flexBasis']['css'][0]['selector']      = '.x-toast-notification-inner';

		$this->controls['info'] = array(
			'tab'         => 'content',
			'type'        => 'separator',
			'description' => esc_html__( 'This element must be placed inside of a Toast element.', 'bricksextras' ),
		);

		$this->controls['builderHidden'] = array(
			'tab'    => 'content',
			'inline' => true,
			'small'  => true,
			'label'  => esc_html__( 'Hide in builder', 'bricksextras' ),
			'type'   => 'checkbox',
		);

		$this->controls['builderHidden_sep'] = array(
			'tab'  => 'content',
			'type' => 'separator',
		);

		$this->controls['duration'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Duration', 'bricksextras' ) . ' (ms)',
			'type'        => 'number',
			'unit'        => 'ms',
			'inline'      => true,
			'default'     => 5000,
			'placeholder' => '5000',
			'description' => esc_html__( 'Set to 0 to disable auto-dismiss.', 'bricksextras' ),
		);

		$this->controls['dismissible'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Dismissible', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'enable'  => esc_html__( 'Enable', 'bricksextras' ),
				'disable' => esc_html__( 'Disable', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Enable', 'bricksextras' ),
			'inline'      => true,
			'description' => esc_html__( 'Can be swiped away', 'bricksextras' ),
		);

		$this->controls['closeButton'] = array(
			'tab'     => 'content',
			'label'   => esc_html__( 'Dismiss Button', 'bricksextras' ),
			'type'    => 'checkbox',
			'group'   => 'icon',
			'inline'  => true,
			'default' => false,
		);

		$this->controls['closeButtonIcon'] = array(
			'tab'      => 'content',
			'group'    => 'icon',
			'label'    => esc_html__( 'Icon', 'bricksextras' ),
			'type'     => 'icon',
			'required' => array( 'closeButton', '!=', '' ),
			'css'      => array(
				array(
					'selector' => '.x-toast-close-icon svg',
				),
			),
		);

		$this->controls['contextIcon'] = array(
			'tab'         => 'content',
			'group'       => 'contextIcon',
			'label'       => esc_html__( 'Context Icon', 'bricksextras' ),
			'type'        => 'checkbox',
			'inline'      => true,
			'default'     => false,
			'description' => esc_html__( 'Show icon on the left side of notification', 'bricksextras' ),
		);

		$this->controls['contextIconIcon'] = array(
			'tab'      => 'content',
			'group'    => 'contextIcon',
			'label'    => esc_html__( 'Icon', 'bricksextras' ),
			'type'     => 'icon',
			'required' => array( 'contextIcon', '!=', '' ),
			'css'      => array(
				array(
					'selector' => '.x-toast-context-icon svg',
				),
			),
		);

		$icon_selector = '.x-toast-close';

		$this->controls['closeButtonTypography'] = array(
			'tab'      => 'content',
			'group'    => 'icon',
			'label'    => esc_html__( 'Typography', 'bricksextras' ),
			'type'     => 'typography',
			'required' => array( 'closeButton', '!=', '' ),
			'css'      => array(
				array(
					'property' => 'font',
					'selector' => $icon_selector,
				),
			),
		);

		$this->controls['closeButtonBackgroundColor'] = array(
			'tab'      => 'content',
			'group'    => 'icon',
			'label'    => esc_html__( 'Background color', 'bricksextras' ),
			'type'     => 'color',
			'required' => array( 'closeButton', '!=', '' ),
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => $icon_selector,
				),
			),
		);

		$this->controls['closeButtonBorder'] = array(
			'tab'      => 'content',
			'group'    => 'icon',
			'label'    => esc_html__( 'Border', 'bricksextras' ),
			'type'     => 'border',
			'required' => array( 'closeButton', '!=', '' ),
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => $icon_selector,
				),
			),
		);

		$this->controls['closeButtonBoxShadow'] = array(
			'tab'      => 'content',
			'group'    => 'icon',
			'label'    => esc_html__( 'Box shadow', 'bricksextras' ),
			'type'     => 'box-shadow',
			'required' => array( 'closeButton', '!=', '' ),
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => $icon_selector,
				),
			),
		);

		$this->controls['closeButtonPadding'] = array(
			'tab'         => 'content',
			'group'       => 'icon',
			'label'       => esc_html__( 'Padding', 'bricksextras' ),
			'type'        => 'spacing',
			'required'    => array( 'closeButton', '!=', '' ),
			'css'         => array(
				array(
					'property' => 'padding',
					'selector' => $icon_selector,
				),
			),
			'placeholder' => array(
				'top'    => '4px',
				'right'  => '4px',
				'bottom' => '4px',
				'left'   => '4px',
			),
		);

		$this->controls['closeButtonMargin'] = array(
			'tab'      => 'content',
			'group'    => 'icon',
			'label'    => esc_html__( 'Margin', 'bricksextras' ),
			'type'     => 'spacing',
			'required' => array( 'closeButton', '!=', '' ),
			'css'      => array(
				array(
					'property' => 'margin',
					'selector' => $icon_selector,
				),
			),
		);

		$context_icon_selector = '.x-toast-context-icon';

		$this->controls['contextIconTypography'] = array(
			'tab'      => 'content',
			'group'    => 'contextIcon',
			'label'    => esc_html__( 'Typography', 'bricksextras' ),
			'type'     => 'typography',
			'required' => array( 'contextIcon', '!=', '' ),
			'css'      => array(
				array(
					'property' => 'font',
					'selector' => $context_icon_selector,
				),
			),
		);

		$this->controls['contextIconBackgroundColor'] = array(
			'tab'      => 'content',
			'group'    => 'contextIcon',
			'label'    => esc_html__( 'Background color', 'bricksextras' ),
			'type'     => 'color',
			'required' => array( 'contextIcon', '!=', '' ),
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => $context_icon_selector,
				),
			),
		);

		$this->controls['contextIconBorder'] = array(
			'tab'      => 'content',
			'group'    => 'contextIcon',
			'label'    => esc_html__( 'Border', 'bricksextras' ),
			'type'     => 'border',
			'required' => array( 'contextIcon', '!=', '' ),
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => $context_icon_selector,
				),
			),
		);

		$this->controls['contextIconBoxShadow'] = array(
			'tab'      => 'content',
			'group'    => 'contextIcon',
			'label'    => esc_html__( 'Box shadow', 'bricksextras' ),
			'type'     => 'box-shadow',
			'required' => array( 'contextIcon', '!=', '' ),
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => $context_icon_selector,
				),
			),
		);

		$this->controls['contextIconPadding'] = array(
			'tab'         => 'content',
			'group'       => 'contextIcon',
			'label'       => esc_html__( 'Padding', 'bricksextras' ),
			'type'        => 'spacing',
			'required'    => array( 'contextIcon', '!=', '' ),
			'css'         => array(
				array(
					'property' => 'padding',
					'selector' => $context_icon_selector,
				),
			),
			'placeholder' => array(
				'top'    => '4px',
				'right'  => '4px',
				'bottom' => '4px',
				'left'   => '4px',
			),
		);

		$this->controls['contextIconMargin'] = array(
			'tab'      => 'content',
			'group'    => 'contextIcon',
			'label'    => esc_html__( 'Margin', 'bricksextras' ),
			'type'     => 'spacing',
			'required' => array( 'contextIcon', '!=', '' ),
			'css'      => array(
				array(
					'property' => 'margin',
					'selector' => $context_icon_selector,
				),
			),
		);

		$this->controls['ariaLive'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Screen Reader Announcement', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'polite'    => esc_html__( 'Polite - Announce when convenient', 'bricksextras' ),
				'assertive' => esc_html__( 'Assertive - Interrupt to announce immediately', 'bricksextras' ),
				'off'       => esc_html__( 'Off - Do not announce', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Polite - Announce when convenient', 'bricksextras' ),
		);

		$this->controls['triggersSep'] = array(
			'tab'         => 'content',
			'type'        => 'separator',
			'group'       => 'triggers',
			'description' => esc_html__( 'Notifications can be triggered via interactions, via code or via these options', 'bricksextras' ),
		);

		$this->controls['triggers'] = array(
			'tab'           => 'content',
			'group'         => 'triggers',
			'label'         => esc_html__( 'Triggers to show notification', 'bricksextras' ),
			'type'          => 'repeater',
			'titleProperty' => 'label',
			'placeholder'   => esc_html__( 'Trigger', 'bricks' ),
			'fields'        => array(
				'label'           => array(
					'type'           => 'text',
					'label'          => esc_html__( 'Name', 'bricks' ) . ' (' . esc_html__( 'Optional', 'bricks' ) . ')',
					'inline'         => true,
					'hasDynamicData' => false,
				),
				'type'            => array(
					'label'   => esc_html__( 'Type', 'bricks' ),
					'type'    => 'select',
					'inline'  => true,
					'options' => array(
						'pageLoad'             => esc_html__( 'On page load', 'bricksextras' ) . ' (ms)',
						'pageLoadURLParameter' => esc_html__( 'On page load', 'bricksextras' ) . ' (' . esc_html__( 'URL parameter', 'bricks' ) . ')',
						'scroll'               => esc_html__( 'Scroll distance', 'bricksextras' ) . ' (px / %)',
						'scrolledToElement'    => esc_html__( 'Scroll to element', 'bricksextras' ),
						'exitIntent'           => esc_html__( 'Page exit intent', 'bricksextras' ),
						'pageViews'            => esc_html__( 'Number of page views', 'bricksextras' ),
						'elementClick'         => esc_html__( 'Click element', 'bricks' ),
						'elementHover'         => esc_html__( 'Hover element', 'bricksextras' ),
						'intervals'            => esc_html__( 'Looped intervals', 'bricksextras' ) . ' (s)',
					),
				),
				'delay'           => array(
					'label'       => esc_html__( 'Delay', 'bricksextras' ) . ' (ms)',
					'type'        => 'number',
					'inline'      => true,
					'placeholder' => '1000',
					'required'    => array( 'type', '=', array( 'pageLoad', 'pageLoadURLParameter' ) ),
				),
				'urlParameter'    => array(
					'label'       => esc_html__( 'URL Parameter', 'bricks' ),
					'type'        => 'text',
					'inline'      => true,
					'placeholder' => 'success=true',
					'required'    => array( 'type', '=', 'pageLoadURLParameter' ),
				),
				'scrollDistance'  => array(
					'label'       => esc_html__( 'Scroll Distance', 'bricksextras' ),
					'type'        => 'text',
					'inline'      => true,
					'placeholder' => '500px or 50%',
					'required'    => array( 'type', '=', 'scroll' ),
				),
				'pageViews'       => array(
					'label'       => esc_html__( 'Number of Page Views', 'bricksextras' ),
					'type'        => 'number',
					'inline'      => true,
					'placeholder' => '3',
					'required'    => array( 'type', '=', 'pageViews' ),
				),
				'intervalSeconds' => array(
					'label'       => esc_html__( 'Interval', 'bricksextras' ) . ' (s)',
					'type'        => 'number',
					'inline'      => true,
					'placeholder' => '20',
					'description' => esc_html__( 'Seconds between each notification rotation', 'bricksextras' ),
					'required'    => array( 'type', '=', 'intervals' ),
				),
				'intervalLoop'    => array(
					'label'    => esc_html__( 'Loop', 'bricks' ),
					'type'     => 'checkbox',
					'inline'   => true,
					'required' => array( 'type', '=', 'intervals' ),
				),
				'selector'        => array(
					'label'          => esc_html__( 'Selector', 'bricks' ) . ' (' . esc_html__( 'Element', 'bricks' ) . ')',
					'type'           => 'text',
					'hasDynamicData' => false,
					'inline'         => true,
					'placeholder'    => '.your-class',
					'required'       => array(
						'type',
						'=',
						array(
							'scrolledToElement',
							'elementClick',
							'elementHover',
						),
					),
				),
			),
		);

		$this->controls['show_again'] = array(
			'tab'         => 'content',
			'group'       => 'triggers',
			'label'       => esc_html__( 'Reshow', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'page_load' => esc_html__( 'Show again on next visit', 'bricksextras' ),
				'never'     => esc_html__( 'Never show again', 'bricksextras' ),
				'after'     => esc_html__( 'Only allow to show after:', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Show again on next visit', 'bricksextras' ),
		);

		$this->controls['show_again_days'] = array(
			'tab'      => 'content',
			'group'    => 'triggers',
			'label'    => esc_html__( 'Days', 'bricksextras' ),
			'type'     => 'number',
			'inline'   => true,
			'required' => array( 'show_again', '=', array( 'after' ) ),
		);

		$this->controls['show_again_hours'] = array(
			'tab'      => 'content',
			'group'    => 'triggers',
			'label'    => esc_html__( 'Hours', 'bricksextras' ),
			'type'     => 'number',
			'inline'   => true,
			'required' => array( 'show_again', '=', array( 'after' ) ),
		);

		$this->controls['show_once'] = array(
			'tab'      => 'content',
			'group'    => 'triggers',
			'small'    => true,
			'label'    => esc_html__( 'Only show once per page visit', 'bricksextras' ),
			'type'     => 'checkbox',
			'required' => array( 'show_once_session', '!=', true ),
		);

		$this->controls['show_once_session'] = array(
			'tab'      => 'content',
			'group'    => 'triggers',
			'small'    => true,
			'label'    => esc_html__( 'Only show once per session', 'bricksextras' ),
			'type'     => 'checkbox',
			'required' => array( 'show_once', '!=', true ),
		);
	}

	/**
	 * Render element output.
	 */
	public function render() {

		$settings = $this->settings;

		// Generate a unique identifier for this notification.
		$identifier = \BricksExtras\Helpers::set_identifier_attribute( $this );

		// Get settings with defaults.
		$duration     = isset( $settings['duration'] ) ? intval( $settings['duration'] ) : 5000;
		$dismissible  = ! isset( $settings['dismissible'] ) || 'disable' !== $settings['dismissible'];
		$close_button = ! empty( $settings['closeButton'] );
		$aria_live    = isset( $settings['ariaLive'] ) ? esc_attr( $settings['ariaLive'] ) : 'polite';
		$triggers     = isset( $settings['triggers'] ) ? $settings['triggers'] : array();

		$config = array(
			'duration'          => 0 === $duration ? 'Infinity' : $duration,
			'dismissible'       => $dismissible,
			'closeButton'       => $close_button,
			'ariaLive'          => $aria_live,
			'triggers'          => $triggers,
			'show_once'         => isset( $settings['show_once'] ) ? $settings['show_once'] : false,
			'show_once_session' => isset( $settings['show_once_session'] ) ? $settings['show_once_session'] : false,
			'show_again'        => array(
				'type'    => isset( $settings['show_again'] ) ? $settings['show_again'] : '',
				'options' => array(
					'days'  => isset( $settings['show_again_days'] ) ? $settings['show_again_days'] : 0,
					'hours' => isset( $settings['show_again_hours'] ) ? $settings['show_again_hours'] : 0,
				),
			),
		);

		$this->set_attribute( '_root', 'data-x-notification', wp_json_encode( $config ) );
		$this->set_attribute( '_root', 'class', 'x-toast-notification' );
		$this->set_attribute( 'content', 'class', 'x-toast-notification-content' );
		$this->set_attribute( 'inner', 'class', 'x-toast-notification-inner' );

		$output = '';

		$output .= "<div {$this->render_attributes( '_root' )}>";
		$output .= "<div {$this->render_attributes( 'content' )}>";

		// Add context icon if enabled (outside inner div).
		if ( ! empty( $settings['contextIcon'] ) ) {
			// Use custom icon if set, otherwise use default SVG.
			if ( ! empty( $settings['contextIconIcon'] ) ) {
				$context_icon = self::render_icon( $settings['contextIconIcon'] );
			} else {
				$context_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>';
			}

			$this->set_attribute( 'context-icon', 'class', 'x-toast-context-icon' );
			$this->set_attribute( 'context-icon', 'aria-hidden', 'true' );

			$output .= "<span {$this->render_attributes( 'context-icon' )}>" . $context_icon . '</span>';
		}

		$output .= "<div {$this->render_attributes( 'inner' )}>";

		if ( method_exists( '\Bricks\Frontend', 'render_children' ) ) {
			$output .= \Bricks\Frontend::render_children( $this );
		}

		$output .= '</div>';

		// Add close button if enabled.
		if ( $close_button ) {
			// Use custom icon if set, otherwise use default SVG.
			if ( ! empty( $settings['closeButtonIcon'] ) ) {
				$close_button_icon = self::render_icon( $settings['closeButtonIcon'] );
			} else {
				$close_button_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>';
			}

			$this->set_attribute( 'close-button', 'class', 'x-toast-close' );
			$this->set_attribute( 'close-button', 'aria-hidden', 'true' );
			$this->set_attribute( 'close-button', 'data-x-toast-close', '' );
			$this->set_attribute( 'close-button-icon', 'class', 'x-toast-close-icon' );

			$output .= "<button {$this->render_attributes( 'close-button' )}>";
			$output .= "<span {$this->render_attributes( 'close-button-icon' )}>" . $close_button_icon . '</span>';
			$output .= '</button>';
		}

		$output .= '</div>';

		$output .= '</div>';

		echo $output;
	}

	/**
	 * Render builder template.
	 */
	public static function render_builder() {
		?>

		<script type="text/x-template" id="tmpl-bricks-element-xtoastnotification">
		<component 
			v-if="!settings.builderHidden"
			is="div" 
			class="x-toast-notification"
			:data-x-notification="JSON.stringify({ 
				duration: settings.duration === 0 ? 'Infinity' : (settings.duration || 5000),
				dismissible: settings.dismissible !== false,
				closeButton: settings.closeButton || false
			})"
		>
		<div class="x-toast-notification-content">
			<span 
			v-if="settings.contextIcon"
			class="x-toast-context-icon"
			aria-hidden="true"
			>
			<icon-svg v-if="settings.contextIconIcon" :iconSettings="settings.contextIconIcon"/>
			<svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
			</span>
			<div class="x-toast-notification-inner">
			<bricks-element-children :element="element"/>
			</div>
			<button 
			v-if="settings.closeButton"
			class="x-toast-close"
			aria-hidden="true"
		>
			<span class="x-toast-close-icon">
			<icon-svg v-if="settings.closeButtonIcon" :iconSettings="settings.closeButtonIcon"/>
			<svg v-else xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
			</span>
		</button>
		</div>
		
		</component>
		</script>

		<?php
	}
}
