<?php get_header(); ?>

	<div class="content inner single">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			<div id="post-<?php the_ID(); ?>" class="post ship-single l-background">
            <section class="l-brands-welcome ship-single-mb pt-sm-0 py-md-4 pt-lg-5 pb-lg-5">
                <div class="l-brands-welcome__wrapper container">
                    <?php
                        $brands = get_field('select_brand');
                        $logo = get_field('logo_brand', $brands->ID);
                    ?>
                    <a class="c-arrow-prev mb-2 d-block" href="<?php echo esc_url( home_url( '/' ) ) . $brands->post_name ?>"><i class="icon icon-left-open-big"></i>Back</a>
                    <div class="row">
                        <div class="col-9 col-md-8 col-lg-6">
                            <img class="c-logo-brand m-lg-0" src="<?php echo $logo; ?>" alt="<?php echo the_title(); ?>">
                            <h1 class="c-title text-lg-left mt-2 mt-lg-1"><?php echo get_field('title_brand_ship'); ?><span class="c-title__top">SM</span></h1>
                            <div class="c-description mt-1 mt-md-2">
                                <p><?php echo get_field('description_brand_ship'); ?></p>
                            </div>
                        </div>
                        <div class="col-3 col-md-4 col-lg-6 desktop-pd">
                            <div class="photo-ship-mobile">
                                <img class="photo-ship-tablet" src="<?php echo get_field('photo_ship'); ?>" alt="<?php echo the_title(); ?>">
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="l-brand-technology">
                <div class="l-brand-technology__cube"></div>
                <div class="container">
                    
                    <div class="row no-gutters h-100">
                        <div class="col-lg-8 h-100 order-2 order-lg-1">
                            <div class="c-info-ships">
                                <h2 class="c-subtitle is-dark">Technology</h2>
                                <div class="stores mt-2">
                                        <?php if(get_field('link_appstore')): ?>
                                            <a href="<?php echo get_field('link_appstore'); ?>" target="_blank">
                                                <img class="pr-1" src="<?php echo get_template_directory_uri(); ?>/img/content/applestore.svg" alt="Appe Store">
                                            </a>
                                        <?php endif;?>
                                        <?php if(get_field('link_playstore')): ?>
                                            <a href="<?php echo get_field('link_playstore'); ?>" target="_blank">
                                                <img src="<?php echo get_template_directory_uri(); ?>/img/content/playstore.svg" alt="Play Store">
                                            </a>
                                        <?php endif;?>
                                        </div>
                                <div class="row">
                                <?php
                                    $technology = get_field('technology');
                                    foreach($technology as $item):
                                ?>
                                    <div class="col-11 col-md-6">
                                        <h3 class="c-subtitle is-dark is-small mt-2 mt-lg-3 mt-xl-4"><?php echo $item["title_technology"]; ?></h3>
                                        <div class="c-description is-dark mt-1">
                                            <p><?php echo $item["description_technology"]; ?></p>
                                        </div>
                                    </div>

                                    <?php
                                        endforeach;
                                    ?>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 offset-md-1 l-brand-technology__ship order-1 order-md-2">
                            
                        </div> 
                    </div>
                </div>
            </section>

            <section class="l-brand-discover pt-xl-4 pb-lg-0">
                <div class="l-brand-discover__diamond"></div>
                <div class="l-brand-discover__cover-mobile d-md-none">
                    <?php
                        $imagebranddiscover = get_field('discover_ship_photo');
                        $imagebranddiscoverdesktop = wp_get_attachment_image_src($imagebranddiscover,'featured-index' );
                    ?>
                    <img src="<?php echo $imagebranddiscoverdesktop[0]; ?>" alt="<?php echo the_title(); ?>">
                </div>
                <div class="l-brand-discover__wrapper container">
                    <div class="row">
                        <div class="col-md-5 col-lg-5">
                            <h2 class="c-subtitle is-dark"><?php echo get_field('discover_ship_title'); ?></h2>
                            <a class="c-btn-icon is-dark mt-1" href="<?php echo get_field('discover_ship_link'); ?>"><?php echo get_field('discover_ship_text_link'); ?><i class="icon icon-go"></i></a>
                        </div>
                    </div>
                </div>
                <div class="l-brand-discover__cover d-none d-md-block">
                    <img src="<?php echo $imagebranddiscoverdesktop[0]; ?>" alt="<?php echo the_title(); ?>">
                </div>
            </section>
            <?php
                $gallery = get_field('gallery');
                if($gallery):
            ?>
            <section class="l-brands-news gallery py-3 pt-md-5 py-md-3 py-xl-5">
                <div class="carousel-title d-flex justify-content-between align-items-center mb-1">
                    <h2 class="c-subtitle">Gallery</h2>

                    <div class="d-none d-sm-flex">
                        <a href="javascript:;" class="c-btn-round js-carousel-default-prev" aria-label="Prev"><i class="icon icon-left-arrow"></i></a>
                        <a href="javascript:;" class="c-btn-round js-carousel-default-next" aria-label="Next"><i class="icon icon-right-arrow"></i></a>
                    </div>
                </div>
                <div class="c-carousel-default js-carousel-default owl-carousel">
                <?php 
                        foreach($gallery as $photo):
                            ?>
                            <a data-fancybox href="<?php echo $photo; ?>" class="c-card-news">
                            <div class="c-card-news__cover">
                                <img src="<?php echo $photo; ?>">
                            </div>
                            </a>
                            <?php
                        endforeach;
                        ?>
                </div>
            </section>
            <?php
                endif;
            ?>
            </div>
        <?php endwhile; endif; ?>
	</div><!-- .content.inner.single -->

<?php get_footer(); ?>