<?php
/*
 * Template name: Committee
 * @package far_loop
 */

get_header();

$fields = array_fill_keys([
	'fechas',
	'ubicacion',
	'descripcion',
	'comite_intro',
	'comite_members',
], null);

foreach ($fields as $field => $value) {
	$fields[$field] = get_field($field);
}
?>

<div class="u_pt-3 u_pt-md-6">
	<div id="mainContainer" class="l_container u_mv-5">
		<div class="grid u_mh-min1 u_mb-3 u_mb-md-0">
			<div class="col--md--one--half u_ph-1">
				<div class="page-title u_mb-3 u_mb-md-4">
					<h1 class="page-title__apex-title u_mb-0p5"><?php the_title(); ?></h1>
				</div>
			</div>
			<div class="col--md--one--half u_ph-1">
				<ul class="same-page-nav">
					<li class="same-page-nav__item"><a href="#" data-soft-scroll="#sectionMainSelection" class="same-page-nav__link"><?php _e('Main Selection', 'far_loop'); ?></a></li>
					<li class="same-page-nav__item"><a href="#" data-soft-scroll="#sectionCommittee" class="same-page-nav__link"><?php _e('Committee', 'far_loop'); ?></a></li>
				</ul>
			</div>
		</div>
		<div class="grid u_mh-min1p5">
			<div data-sticky-sidebar class="col--sm--three--seventh col--md--two--fifth u_ph-1p5">
				<?php share_module(); ?>
				<div class="info-card">
					<dl class="info-card__list">
						<?php if (!empty($fields['fechas'])): ?>
							<dt class="info-card__key"><span class="info-card__key-text"><?php _e('Dates', 'far_loop'); ?></span></dt>
							<dd class="info-card__value"><?php echo esc_html($fields['fechas']); ?></dd>
						<?php endif; ?>
						<?php if (!empty($fields['ubicacion'])): ?>
							<dt class="info-card__key"><span class="info-card__key-text"><?php _e('Location', 'far_loop'); ?></span></dt>
							<dd class="info-card__value"><?php echo esc_html($fields['ubicacion']); ?></dd>
						<?php endif; ?>
					</dl>
				</div>
			</div>
			<div class="col--sm--four--seventh col--md--three--fifth u_ph-1p5">
				<div class="wysiwyg">
					<?php echo apply_filters('the_content', $fields['descripcion']); ?>
				</div>
			</div>
		</div>

		<div id="sectionCommittee" class="u_mv-4">
			<div class="grid u_mh-min1p5">
				<div class="col--xl--one--half u_ph-1p5">
					<h3 class="section-heading delta"><span class="u_text-underline"><?php _e('Committee', 'far_loop'); ?></span></h3>
				</div>
				<div class="col--xl--one--half u_ph-1p5">
					<div class="u_mb-5">
						<p class="lead-description u_mb-2 h1"><?php echo esc_html($fields['comite_intro']); ?></p>
					</div>
				</div>
			</div>
			<?php if (!empty($fields['comite_members'])): ?>
				<div class="grid u_mh-min1p5">
					<?php foreach ($fields['comite_members'] as $member_post):
						$member_id = is_object($member_post) ? $member_post->ID : null;
						if (!$member_id) continue;

						$portrait = get_field('field_56c86aeb593d5', $member_id);
						$name = get_field('name', $member_id);
						$surname = get_field('surname', $member_id);
						$about = get_field('biography', $member_id);
					?>
						<div class="col--xxs--one--half u_ph-1p5">
							<div class="committee-member-portrait">
								<div class="grid u_mh-min0p5">
									<div class="col--tb--one--third u_ph-0p5">
										<div class="committee-member-portrait__image-container">
											<?php if (!empty($portrait['sizes']['squared'])): ?>
												<img src="<?php echo esc_url($portrait['sizes']['squared']); ?>" alt="<?php echo esc_attr($name); ?>">
											<?php endif; ?>
										</div>
									</div>
									<div class="col--tb--two--third u_ph-0p5">
										<h3 class="committee-member-name"><b><?php echo esc_html($name . ' ' . $surname); ?></b></h3>
										<p class="committee-member-portrait__bio"><?php echo apply_filters('the_content', $about); ?></p>
									</div>
								</div>
							</div>
						</div>
					<?php endforeach; ?>
				</div>
			<?php endif; ?>
		</div>
	</div>
</div>

<?php get_footer();