<?php
/**
 * The template part for displaying the slider section on homepage
 *
 * @package Meridian One
 * @since 1.0
 */
?>
<?php
	$image = false;
	$heading = false;
	$content = false;
	$button_url = false;
	$button_text = false;

	if ( meridian_one_get_theme_option( 'home_slider_section_image' ) ) {
		$image = meridian_one_get_theme_option( 'home_slider_section_image' );
	}

	if ( meridian_one_get_theme_option( 'home_slider_section_heading' ) ) {
		$heading = meridian_one_get_theme_option( 'home_slider_section_heading' );
	}

	if ( meridian_one_get_theme_option( 'home_slider_section_content' ) ) {
		$content = meridian_one_get_theme_option( 'home_slider_section_content' );
	}

	if ( meridian_one_get_theme_option( 'home_slider_section_button_url' ) ) {
		$button_url = meridian_one_get_theme_option( 'home_slider_section_button_url' );
	}

	if ( meridian_one_get_theme_option( 'home_slider_section_button_text' ) ) {
		$button_text = meridian_one_get_theme_option( 'home_slider_section_button_text' );
	}

?>
<div id="slider" class="carousel-wrapper">
	
	<div class="slider-inner">
		
		<?php if ( $image ) : ?>

			<div class="slide">

				<img src="<?php echo esc_url( $image ); ?>" alt="">

				<?php if ( $heading || $content || $button_url ) : ?>

					<div class="slide-info">

						<div class="wrapper">

							<div class="slide-info-inner">
								
								<?php if ( $heading ) : ?>
									<h2 class="slide-info-title"><?php echo esc_html( $heading ); ?></h2>
								<?php endif; ?>

								<?php if ( $content ) : ?>
									<div class="slide-info-content"><?php echo esc_html( $content ); ?></div>
								<?php endif; ?>

								<?php if ( $button_url && $button_text ) : ?>
									<a href="<?php echo esc_url( $button_url ); ?>" class="slide-info-button"><?php echo esc_html( $button_text ); ?><span>&rarr;</span></a>
								<?php endif; ?>

							</div><!-- .slide-info-inner -->

						</div><!-- .wrapper -->

					</div><!-- .slide-info -->

				<?php endif; ?>

			</div><!-- .slide -->

		<?php endif; ?>

	</div><!-- #slider-inner -->

</div><!-- #slider -->