<?php 
// Get all custom fields in multidimensional array
$fields = get_fields();
// Grab how many images are in this post to be stored in data- in the DOM for Javascript function to read
$num_images_for_slideshow = images_in_post($fields);
?>
<article class="ms-blog-single">
	<header class="fluid-container">
		<div class="row">
			<div class="col-12">
				<div id="ms-custom-slider-auto">
				<?php
				for($i = 1; $i <= $num_images_for_slideshow; $i++) {
					$img = $fields['image_'.$i];
					$text = '<div class="ms-slick-slide">';
					$text .= '<img src="' . $img['url'] . '" alt="' .$img['alt'] . '"';
					$text .= ' class="ms-post-banner-img" />';
					$text .= '</div>';
					echo $text;
				}
				?>
				</div>
			</div>
		</div>
		<div class="ms-blog-slider-overlay d-flex justify-content-center">

				<?php 
				$prev_post = get_previous_post();
				if(!empty( $prev_post )): ?>
				<a href="<?php echo esc_url(get_permalink($prev_post->ID)); ?>"><span class="ms-slideshow-arrow left" data-direction="L"><i class="fa fa-chevron-left" aria-hidden="true"></i></span></a>
				<?php endif ?>
		
				<h1><?php the_title(); ?></h1>
				<h3><?php the_time('F j, Y'); ?></h3>

				<?php
				$next_post = get_next_post();
				if(!empty( $next_post )): ?>
				<a href="<?php echo esc_url(get_permalink($next_post->ID)); ?>">
				<span class="ms-slideshow-arrow right" data-direction="R"><i class="fa fa-chevron-right" aria-hidden="true"></i></span></a>
				<?php endif ?>

			</div>
	</header>
	<div class="container">
		<div class="row row-padding">
			<div class="col-12 ms-post-single">
				
				<div class="ms-post-info">
					<p><?php the_content(); ?></p>
				</div>
			</div>
		</div>
	</div>
</article>