<?php get_header(); ?>

<div class="uk-cover-container uk-text-center banner uk-margin-large-bottom" uk-scrollspy="cls: uk-animation-fade; delay: 300">
    <canvas class="uk-visible@m" width="" height="400"></canvas>
    <canvas class="uk-hidden@m" width="" height="200"></canvas>

    <?php
    $banner_image = get_field('banner_image');
    if (!empty($banner_image)) : ?>
        <img uk-img data-src="<?php echo esc_url($banner_image['url']); ?>"
             alt="<?php echo esc_attr($banner_image['alt']); ?>"
             width="<?php echo esc_attr($banner_image['width']); ?>"
             height="<?php echo esc_attr($banner_image['height']); ?>"
             uk-cover>
    <?php else : ?>
        <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/hero-senior-couple-at-pharmacy-holding-hands-1.webp"
             data-width data-height uk-cover>
    <?php endif; ?>

    <div uk-scrollspy="cls: uk-animation-fade; delay: 500" class="uk-position-cover uk-text-center uk-container uk-container-large uk-flex uk-flex-center uk-flex-middle">
        <div>
            <h1 class="white uk-margin-medium-top"><?php the_title(); ?></h1>
        </div>
    </div>
</div>

<div class="uk-container uk-container-large" uk-scrollspy="cls: uk-animation-fade; delay: 300">
	<main role="main">
			<section>


				<?php if (have_posts()): while (have_posts()) : the_post(); ?>

					<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

						<?php the_content(); ?>

						<div class="uk-clearfix"></div>

						<p class="uk-text-right"><?php edit_post_link( __('Edit this page'), '', '', 0, 'post-edit-link uk-text-large uk-padding-small uk-button-large uk-button uk-button-primary' ); ?></p>

					</article>

			<?php endwhile; ?><?php endif; ?>

			</section>
	</main>
</div>

<?php get_footer(); ?>
