<?php
/**
 * Loop item template
 */

$widget_id     = $this->get_id();
$settings      = $this->get_settings();
$title_tag     = $this->__get_html( 'title_html_tag', '%s' );
$sub_title_tag = $this->__get_html( 'sub_title_html_tag', '%s' );

$animation_class = $settings['animation_effect'];

switch ( $settings['switch_event_type'] ) {
	case 'scratch':
		$animation_class = 'jet-box-scratch-effect back-events-inactive';
	break;

	case 'fold':
		$animation_class = 'jet-box-fold-effect';
	break;

	case 'peel':
		$animation_class = 'jet-box-peel-effect';
	break;

	case 'slide-out':
		$slide_direction =  isset( $settings['slide_out_direction'] ) ? $settings['slide_out_direction'] : '';
		$animation_class = 'jet-box-slide-out-effect slide-out-' . $slide_direction;
	break;
}

?><div id="jet-animated-box-<?php echo $widget_id; ?>" class="jet-animated-box <?php echo $animation_class; ?>" <?php echo $this->generate_setting_json(); ?>>
	<div id="jet-animated-box__front-<?php echo $widget_id; ?>" class="jet-animated-box__front">
		<div class="jet-animated-box__inner"><?php

			if ( 'default' === $settings['front_side_content_type'] ) {
				$this->__icon( 'front_side_icon', '<div class="jet-animated-box__icon jet-animated-box__icon--front"><div class="jet-animated-box-icon-inner"><span class="jet-elements-icon">%s</span></div></div>' );
				?><div class="jet-animated-box__content"><?php
					$this->__html( 'front_side_title', '<' . $title_tag . ' class="jet-animated-box__title jet-animated-box__title--front">%s</' . $title_tag . '>' );
					$this->__html( 'front_side_subtitle', '<' . $sub_title_tag . ' class="jet-animated-box__subtitle jet-animated-box__subtitle--front">%s</' . $sub_title_tag . '>' );
					$this->__html( 'front_side_description', '<p class="jet-animated-box__description jet-animated-box__description--front">%s</p>' );
				?></div><?php
			} else {
				echo $this->get_template_content( $settings['front_side_template_id'] );
			}
		?></div>
		<div class="jet-animated-box__overlay"></div><?php

		if( 'toggle' === $settings['switch_event_type'] ) {
			?><div class="jet-animated-box__toggle jet-animated-box__toggle--front"><?php
				$this->__icon( 'front_side_toggle_icon', '<div class="jet-animated-box__toggle-icon"><span class="jet-elements-icon">%s</span></div>' );
			?></div><?php
		}
	?></div>
	<div id="jet-animated-box__back-<?php echo $widget_id; ?>" class="jet-animated-box__back">
		<div class="jet-animated-box__inner"><?php

		if ( 'default' === $settings['back_side_content_type'] ) {
			$this->__icon( 'back_side_icon', '<div class="jet-animated-box__icon jet-animated-box__icon--back"><div class="jet-animated-box-icon-inner"><span class="jet-elements-icon">%s</span></div></div>' );
			?><div class="jet-animated-box__content"><?php
				$this->__html( 'back_side_title', '<' . $title_tag . ' class="jet-animated-box__title jet-animated-box__title--back">%s</' . $title_tag . '>' );
				$this->__html( 'back_side_subtitle', '<' . $sub_title_tag . ' class="jet-animated-box__subtitle jet-animated-box__subtitle--back">%s</' . $sub_title_tag . '>' );
				$this->__html( 'back_side_description', '<p class="jet-animated-box__description jet-animated-box__description--back">%s</p>' );
				$this->__glob_inc_if( 'action-button', array( 'back_side_button_link', 'back_side_button_text' ) );
			?></div><?php
		} else {
			echo $this->get_template_content( $settings['back_side_template_id'] );
		}

		?></div>
		<div class="jet-animated-box__overlay"></div><?php

		if( 'toggle' === $settings['switch_event_type'] ) {
			?><div class="jet-animated-box__toggle jet-animated-box__toggle--back"><?php
				$this->__icon( 'back_side_toggle_icon', '<div class="jet-animated-box__toggle-icon"><span class="jet-elements-icon">%s</span></div>' );
			?></div><?php
		}
	?></div>
</div>