<?php
/**
 * Template Name: About Page
 */

?>

<?php
		if (ICL_LANGUAGE_CODE=='en') {
	    $about_page = get_post(6);
		} elseif (ICL_LANGUAGE_CODE=='sr') {
			$about_page = get_post(104);
		} else {
			$about_page = get_post(113);
		}
		$title1 = get_field('section_title_01', $about_page->ID);
    $title2 = get_field('section_title_02', $about_page->ID);
    $title3 = get_field('section_title_03', $about_page->ID);

    $text1 = get_field('section_text_01', $about_page->ID);
    $text2 = get_field('section_text_02', $about_page->ID);
    $text3 = get_field('section_text_03', $about_page->ID);

    $image1 = get_field('section_image_01', $about_page->ID);
    $image2 = get_field('section_image_02', $about_page->ID);
    $image3 = get_field('section_image_03', $about_page->ID);
?>

<div class="tab-image">
	<div id="about-carousel" class="owl-carousel owl-theme">
    <div class="about-carousel-item"><img class="about-header about-header-01" src="<?php echo $image1['sizes']['post-img']; ?>" alt="<?php echo $title1; ?>" /></div>
    <div class="about-carousel-item"><img class="about-header about-header-02" src="<?php echo $image2['sizes']['post-img']; ?>" alt="<?php echo $title2; ?>" /></div>
    <div class="about-carousel-item"><img class="about-header about-header-03" src="<?php echo $image3['sizes']['post-img']; ?>" alt="<?php echo $title3; ?>" /></div>
  </div>
</div>
<div class="container-fluid">
      <div class="row blue"> 
          <div class="container">
            <ul class="nav nav-tabs">
                <li class="active col-xs-4 no-padding"><a data-image="0" data-toggle="tab" href="#sectionA"><span><?php echo $title1; ?></span></a></li>
                <li class="col-xs-4 no-padding"><a data-image="1" data-toggle="tab" href="#sectionB"><span><?php echo $title2; ?></span></a></li>
                <li class="col-xs-4 no-padding"><a data-image="2" data-toggle="tab" href="#sectionC"><span><?php echo $title3; ?></span></a></li>
            </ul>
          </div>     
      </div> 
    <div class="container">
    <div class="tab-content">
        <div id="sectionA" class="tab-pane fade in active">
            <?php echo $text1; ?>
        </div>
        <div id="sectionB" class="tab-pane fade">
            <?php echo $text2; ?>
        </div>
        <div id="sectionC" class="tab-pane fade">
            <?php echo $text3; ?>
        </div>
    </div>
   </div>
</div>

