<?php
/**
 * Template Name: About
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package Dooblo
 */

get_header(); ?>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<style>
    .team-box{
        width: 197px;
    }
    @media (max-width:770px){
          .team-box{
        width: 100%;
    }
    }
  
</style>
<div id="about-page" class="content-area" <?php post_class(); ?>>
	<div id="top-page"></div>
	<section class="about-top">
		<div class="bg-image" style="background-image: url('<?php the_field('top_header_image'); ?>');"></div>
		<div class="bg-dark"></div>
		<div class="info">
			<h1><?php the_field('top_header_big_text'); ?></h1>
			<h2><?php the_field('top_header_paragraph_text'); ?></h2>
		</div>
	</section>
	<section class="about1">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<img src="<?php the_field('icon_under_top_header'); ?>" alt="">
					<h1><?php the_field('big_green_text_under_top_header'); ?></h1>
					<p><?php the_field('text_paragraph_under_top_header'); ?></p>
				</div>
			</div>
		</div>
	</section>
	<section class="about2">
		<div class="image" style="background-image: url('<?php the_field('big_box_image'); ?>');">
			<div class="center">
				<h1><?php the_field('big_box_big_text'); ?></h1>
				<h2><?php the_field('big_box_smaller_text'); ?></h2>
			</div>
		</div>
		<div class="boxs">
			<?php if(get_field('boxes')): ?>
				<?php while(has_sub_field('boxes')): ?>
					<div class="box">
						<div class="bg" style="opacity: <?php the_sub_field('boxes_opacity'); ?>; background-color: <?php the_sub_field('boxes_background_color'); ?>;"></div>
						<div class="center">
							<h1><?php the_sub_field('box_big_text'); ?></h1>
							<p><?php the_sub_field('box_paragraph_text'); ?></p>
						</div>
					</div>
				<?php endwhile; ?>
			<?php endif; ?>
		</div>
	</section>
	<section class="about3" id="team-main">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<h1><?php the_field('the_leadership_team_text_header'); ?></h1>
				</div>
			</div>
			<?php if(get_field('leadership_team')): ?>

				<div class="row slick-team">

				<?php while(has_sub_field('leadership_team')): ?>

					<div class="col-md-3 col-sm-6 col-xs-6">
						<div class="team-box" style="text-align:center;">
							<img style="margin: auto; border-radius:50%;" width="160" height="160"  src="<?php the_sub_field('leadership_team_image'); ?>" />
							<h1 style="margin-top:30px;"><?php the_sub_field('leadership_team_name'); ?></h1>
							<p><?php the_sub_field('leadership_team_position'); ?></p>
						</div>
					</div>

				<?php endwhile; ?>

				</div>

			<?php endif; ?>
		</div>
	</section>
	<section class="about4">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<h1><?php the_field('milestones_big_text_header'); ?></h1>
					<p><?php the_field('milestones_sub_text_header'); ?></p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="time-line">
						<div class="line"></div>
						<?php if(get_field('time_line')): ?>

							<div class="row">

							<?php while(has_sub_field('time_line')): ?>

								<div class="col-sm-2 col-sm-push-2">
									<div class="icon" style="background-image: url('<?php the_sub_field('time_line_icon'); ?>');"></div>
								</div>
								<div class="col-sm-2 col-sm-pull-2">
									<div class="date"><?php the_sub_field('time_line_year'); ?></div>
								</div>
								<div class="col-sm-8">
									<div class="text">
										<h1><?php the_sub_field('time_line_text_header'); ?></h1>
										<p><?php the_sub_field('time_line_text'); ?></p>
									</div>
								</div>

							<?php endwhile; ?>

							</div>

						<?php endif; ?>
					</div>
				</div>
			</div>
		</div>
	</section>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
<script>
jQuery('.slick-team').slick({
		rows: 2,
		dots: false,
		arrows: true,
        infinite: true,
		speed: 300,
		slidesToShow: 3,
		slidesToScroll: 1,
		   responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
            adaptiveHeight: true,
          },
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
          },
        },
      ],
});
</script>

<?php get_footer(); ?>