<?php


namespace Hecate\Customizer\Sections;



class BaseReactSection extends \WP_Customize_Section {
	public $type             = 'hecate-base-react-section';
	public $accordionClasses = '';

	public function json() {
		$json                     = parent::json();
		$json['accordionClasses'] = $this->accordionClasses;

		return $json;
	}

	protected function render_template() {
		?>
	  <li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }} ">
		<h3 class="accordion-section-title {{data.accordionClasses}}" tabindex="0">
		  {{ data.title }}
		  <span class="screen-reader-text"><?php esc_html_e( 'Press return or enter to open this section', 'hecate' ); ?></span>
		</h3>
		<ul class="accordion-section-content">
		  <li class="customize-section-description-container hecate-section-description section-meta <# if ( data.description_hidden ) { #>customize-info<# } #>">
			<div class="customize-section-title">
			  <button class="customize-section-back" tabindex="-1">
				<span class="screen-reader-text"><?php esc_html_e( 'Back', 'hecate' ); ?></span>
			  </button>
			  <h3>
							<span class="customize-action">
                Customizing
							</span>
				{{ data.title }}
			  </h3>
			  <# if ( data.description && data.description_hidden ) { #>
			  <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Help', 'hecate' ); ?></span></button>
			  <div class="description customize-section-description">
				{{{ data.description }}}
			  </div>
			  <# } #>

			</div>

			<# if ( data.description && ! data.description_hidden ) { #>
			<div class="description customize-section-description">
			  {{{ data.description }}}
			</div>
			<# } #>
		  </li>
	  <div class="react-wrapper"></div>
		</ul>
	  </li>
		<?php
	}

}
