<?php
/**
 * Template Part: About page "Explore real-world of TACTIC tools"
 *
 * @package tactic
 */

$videos = get_posts( [
	'post_type'      => 'tactic_explore_video',
	'posts_per_page' => 6,
	'orderby'        => 'menu_order',
	'order'          => 'ASC',
	'post_status'    => 'publish',
] );
?>
<section class="about-tools" id="about-tools">
	<div class="container about-tools__container">
		<header class="about-tools__header">
			<h2 class="about-tools__title">
				<?php echo esc_html( tactic_s( 'about_tools_title' ) ); ?>
			</h2>
			<p class="about-tools__subtitle">
				<?php echo esc_html( tactic_s( 'about_tools_subtitle' ) ); ?>
			</p>
		</header>

		<div class="about-tools__viewport">
			<button type="button" class="about-tools__nav-btn about-tools__nav-btn--prev" data-tools-dir="prev" aria-label="<?php echo esc_attr( tactic_s( 'explore_tools_prev_aria' ) ); ?>">
				<span aria-hidden="true">&#8592;</span>
			</button>
			<button type="button" class="about-tools__nav-btn about-tools__nav-btn--next" data-tools-dir="next" aria-label="<?php echo esc_attr( tactic_s( 'explore_tools_next_aria' ) ); ?>">
				<span aria-hidden="true">&#8594;</span>
			</button>
			<div class="about-tools__track" role="list" aria-label="<?php echo esc_attr( tactic_s( 'about_tools_list_aria' ) ); ?>">
				<?php if ( $videos ) : ?>
					<?php foreach ( $videos as $video_post ) :
						$video_url = get_post_meta( $video_post->ID, '_tactic_video_url', true );
						$preview_id = (int) get_post_meta( $video_post->ID, '_tactic_preview_id', true );
						$thumb_url = $preview_id ? wp_get_attachment_image_url( $preview_id, 'tactic-testimonial' ) : get_the_post_thumbnail_url( $video_post->ID, 'tactic-testimonial' );
					?>
					<article class="about-tools__card" role="listitem">
						<div class="about-tools__media">
							<?php if ( $thumb_url ) : ?>
								<img
									src="<?php echo esc_url( $thumb_url ); ?>"
									alt="<?php echo esc_attr( $video_post->post_title ); ?>"
									loading="lazy"
								>
							<?php else : ?>
								<div class="about-tools__media-placeholder" aria-hidden="true"></div>
							<?php endif; ?>

							<?php if ( $video_url ) : ?>
								<button
									class="play-btn about-tools__play-btn"
									data-video="<?php echo esc_url( $video_url ); ?>"
									aria-label="<?php echo esc_attr( sprintf( tactic_s( 'common_play_video_aria' ), $video_post->post_title ) ); ?>"
								>
									<svg viewBox="0 0 44 44" fill="none" aria-hidden="true">
										<circle cx="22" cy="22" r="22" fill="#2D2A57"/>
										<polygon points="18,13 34,22 18,31" fill="#ECEEF8"/>
									</svg>
								</button>
							<?php endif; ?>
						</div>
					</article>
					<?php endforeach; ?>
				<?php else : ?>
					<article class="about-tools__card about-tools__card--empty" role="listitem">
						<div class="about-tools__media-placeholder" aria-hidden="true"></div>
					</article>
				<?php endif; ?>
			</div>
		</div>
	</div>
</section>