<?php
/**
 * The carousel for our theme
 *
 * @package thehoot
 */

 if (get_theme_mod('first_slide')!="") {
    ?>
<div id="carousel" class="carousel slide hidden" data-ride="carousel" data-interval="6000" >

<div class="carousel-inner">
  <div class="carousel-item active">
		<img class="d-block w-100 img-fluid" src="<?php echo get_theme_mod('first_slide') ?>" alt="<?php echo get_theme_mod('first_slide_title') ?>" >
      <div class="background-overlay"></div>
        <div class="carousel-caption">
          <div class="animated animatedFadeInUp fadeInUp">
            <p class="h1"><?php echo get_theme_mod('first_slide_title') ?></p>
            <p class="mt-4 lead"><?php echo get_theme_mod('first_slide_caption') ?></p>
              <a href="<?php echo get_theme_mod('first_slide_link') ?>" class="btn btn-primary btn-lg mt-4">
                <?php echo get_theme_mod('first_slide_link_title') ?>
              </a>
            </div>
          </div>
        </div>
		<!-- item active -->
		<?php if (get_theme_mod('second_slide')!="") { ?>
		<div class="carousel-item">
			<img class="d-block w-100 img-fluid" src="<?php echo get_theme_mod('second_slide') ?>" alt="<?php echo get_theme_mod('second_slide_title') ?>">
        <div class="background-overlay"></div>
          <div class="carousel-caption">
            <div class="animated animatedFadeInUp fadeInUp">
              <p class="h1"><?php echo get_theme_mod('second_slide_title') ?></p>
              <p class="mt-4 lead"><?php echo get_theme_mod('second_slide_caption') ?></p>
                <a href="<?php echo get_theme_mod('second_slide_link') ?>" class="btn btn-primary btn-lg mt-4">
                  <?php echo get_theme_mod('second_slide_link_title') ?>
                </a>
            </div>
          </div>
        </div>
			<!-- item -->
			<?php
    } ?>
			<?php if (get_theme_mod('third_slide')!="") {  ?>
			<div class="carousel-item">
				<img class="d-block w-100 img-fluid" src="<?php echo get_theme_mod('third_slide') ?>" alt="<?php echo get_theme_mod('third_slide_title') ?>">
          <div class="background-overlay"></div>
            <div class="carousel-caption">
              <div class="animated animatedFadeInUp fadeInUp">
                <p class="h1"><?php echo get_theme_mod('third_slide_title') ?></p>
                <p class="mt-4 lead"><?php echo get_theme_mod('third_slide_caption') ?></p>
                  <a href="<?php echo get_theme_mod('third_slide_link') ?>" class="btn btn-primary btn-lg mt-4">
                    <?php echo get_theme_mod('third_slide_link_title') ?>
                  </a>
                </div>
              </div>
            </div>
				<!-- item -->
				<?php
    } ?>
    <?php if (get_theme_mod('fourth_slide')!="") {  ?>
    <div class="carousel-item">
      <img class="d-block w-100 img-fluid" src="<?php echo get_theme_mod('fourth_slide') ?>" alt="<?php echo get_theme_mod('fourth_slide_title') ?>">
        <div class="background-overlay"></div>
          <div class="carousel-caption">
            <div class="animated animatedFadeInUp fadeInUp">
              <p class="h1"><?php echo get_theme_mod('fourth_slide_title') ?></p>
              <p class="mt-4 lead"><?php echo get_theme_mod('fourth_slide_caption') ?></p>
                <a href="<?php echo get_theme_mod('fourth_slide_link') ?>" class="btn btn-primary btn-lg mt-4">
                  <?php echo get_theme_mod('fourth_slide_link_title') ?>
                </a>
            </div>
          </div>
        </div>
      <!-- item -->
      <?php
  } ?>

				</div>
					<!-- carousel-inner -->

            <?php if (get_theme_mod('second_slide')!="") {
        ?>

    <ol class="carousel-indicators">
      <li data-target="#carousel" data-slide-to="0" class="active"></li>
      <li data-target="#carousel" data-slide-to="1" class=""></li>

      <?php if (get_theme_mod('third_slide')!="") {
            ?>

      <li data-target="#carousel" data-slide-to="2" class=""></li>

            <?php
        } ?>
              <?php if (get_theme_mod('fourth_slide')!="") {
            ?>
        <li data-target="#carousel" data-slide-to="3" class=""></li>
                    <?php
        } ?>

    </ol>
    <a class="carousel-control-prev noZensmooth" href="#carousel" data-target="#carousel" role="button" data-slide="prev">
      <span class="left-arrow"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next noZensmooth" href="#carousel" data-target="#carousel" role="button" data-slide="next">
    <span class="right-arrow"></span>
      <span class="sr-only">Next</span>
    </a>

  <?php
    } ?>
  </div>

				<?php
} else {
        ?>
				<div class="banner">

          <?php echo '

					<img class="img-fluid w-100" src="' . get_stylesheet_directory_uri(). '/src/assets/images/default-header-image.jpg' . '" alt="header image" />'; ?>

        </div>

      	<?php
    } ?>
