<?php function thb_flipbox( $atts, $content = null ) {
	$thb_margins = $thb_arrow_color = '';
	$thb_pagination = 'true';
  $atts = vc_map_get_attributes( 'thb_flipbox', $atts );
  extract( $atts );

  $element_id = uniqid( 'thb-flip-box-' );
  $el_class[] = 'thb-flip-box';
	$el_class[] = $direction;
  $el_class[] = 'thb-flip-box-front-'.$front_text_color;
  $el_class[] = 'thb-flip-box-back-'.$back_text_color;
  $el_class[] = $extra_class;
  $front_bg_image = wpb_getImageBySize( array( 'attach_id' => $front_bg_image, 'thumb_size' => 'full' ) );
  $back_bg_image  = wpb_getImageBySize( array( 'attach_id' => $back_bg_image, 'thumb_size' => 'full' ) );

  $link = ( $link == '||' ) ? '' : $link;
  $link = vc_build_link( $link  );

  $link_to = $link['url'];
  $a_title = $link['title'];
  $a_target = $link['target'] ? $link['target'] : '_self';

 	$out ='';
	ob_start();
	if ( $icon_image) {
		$img = wpb_getImageBySize( array( 'attach_id' => $icon_image, 'thumb_size' => 'full', 'class' => 'thb_image' ) );
	}
	if ( $icon_image_back) {
		$img_back = wpb_getImageBySize( array( 'attach_id' => $icon_image_back, 'thumb_size' => 'full', 'class' => 'thb_image' ) );
	}
	?>
	<div id="<?php echo esc_attr( $element_id ); ?>" class="<?php echo esc_attr(implode(' ', $el_class)); ?>">
		<div class="thb-flip-box-front thb-flip-box-side">
			<div class="thb-flip-box-inner">
				<?php if ( $icon_image) { ?>
					<div class="flipbox-image">
						<?php echo $img['thumbnail']; ?>
					</div>
				<?php } elseif ( $icon_front) { get_template_part( 'assets/svg/'.$icon_front ); } ?>
				<div>
					<?php echo wp_kses_post(wpautop( $front_content)); ?>
				</div>
			</div>
		</div>
		<div class="thb-flip-box-back thb-flip-box-side">
			<div class="thb-flip-box-inner">
				<?php if ( $icon_image_back) { ?>
					<div class="flipbox-image">
						<?php echo $img_back['thumbnail']; ?>
					</div>
				<?php } elseif ( $icon_back) { get_template_part( 'assets/svg/'.$icon_back ); } ?>
				<div>
					<?php echo wp_kses_post(wpautop( $back_content)); ?>
				</div>
			</div>
		</div>
		<style>
			#<?php echo esc_attr( $element_id ); ?> {
				min-height: <?php echo esc_html($min_height); ?>px;
			}
			@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
				#<?php echo esc_attr( $element_id ); ?> {
					height: <?php echo esc_html($min_height); ?>px;
				}
			}
			#<?php echo esc_attr( $element_id ); ?> .thb-flip-box-front {
				background-image: url(<?php echo esc_html( $front_bg_image['p_img_large'][0]); ?>);
			}
			#<?php echo esc_attr( $element_id ); ?> .thb-flip-box-back {
				background-image: url(<?php echo esc_html( $back_bg_image['p_img_large'][0]); ?>);
			}
			<?php if ( $bg_gradient1 && $bg_gradient2 ) { ?>
				#<?php echo esc_attr( $element_id ); ?> .thb-flip-box-front {
					<?php echo thb_css_gradient( $bg_gradient1, $bg_gradient2, "-135", true); ?>
				}
			<?php } ?>
			<?php if ( $bg_gradient3 && $bg_gradient4 ) { ?>
				#<?php echo esc_attr( $element_id ); ?> .thb-flip-box-back {
					<?php echo thb_css_gradient( $bg_gradient3, $bg_gradient4, "-135", true); ?>
				}
			<?php } ?>
			<?php if ( $icon_image_width && $icon_image) { ?>
				#<?php echo esc_attr( $element_id ); ?> .thb-flip-box-front .flipbox-image img {
					width: <?php echo esc_attr($icon_image_width); ?>px;
					height: auto;
				}
			<?php } ?>
			<?php if ( $icon_image_back_width && $icon_image_back) { ?>
				#<?php echo esc_attr( $element_id ); ?> .thb-flip-box-back .flipbox-image img {
					width: <?php echo esc_attr($icon_image_back_width); ?>px;
					height: auto;
				}
			<?php } ?>
		</style>
		<?php if ( $link && $link_to ) { ?>
		  <a class="thb-flip-box-link" href="<?php echo esc_attr( $link_to ); ?>" target="<?php echo sanitize_text_field( $a_target ); ?>" title="<?php echo esc_attr( $a_title ); ?>"></a>
		<?php } ?>
	</div>
	<?php
	$out = ob_get_clean();
	return $out;
}
thb_add_short( 'thb_flipbox', 'thb_flipbox' );