<?php
/* Template Name: Gallery */

get_header();
?>

<?php get_template_part('template-parts/inner-section'); ?>

<!-- Gallery Section -->
<section class="projects-section gallery">
    <div class="container">

        <?php if ( have_rows('gallery_tabs') ) : ?>

            <!-- Tabs -->
            <div class="projects-tabs">
                <?php
                $i = 0;
                while ( have_rows('gallery_tabs') ) :
                    the_row();
                    $slug = sanitize_title( get_sub_field('tab_slug') );
                ?>
                    <button
                        class="tab-btn <?php echo $i === 0 ? 'active' : ''; ?>"
                        data-tab="<?php echo esc_attr( $slug ); ?>"
                    >
                        <?php echo esc_html( get_sub_field('tab_title') ); ?>
                    </button>
                <?php
                    $i++;
                endwhile;
                ?>
            </div>

            <!-- Content -->
            <div class="projects-content">

                <?php
                $i = 0;
                while ( have_rows('gallery_tabs') ) :
                    the_row();
                    $slug    = sanitize_title( get_sub_field('tab_slug') );
                    $gallery = get_sub_field('tab_gallery');
                ?>
                    <div
                        class="tab-content <?php echo $i === 0 ? 'active' : ''; ?>"
                        id="<?php echo esc_attr( $slug ); ?>"
                    >
                        <div class="projects-grid" data-page="1">

                            <?php if ( $gallery ) : ?>
                                <?php foreach ( $gallery as $index => $image ) : ?>
                                    <img
                                        src="<?php echo esc_url( $image['sizes']['large'] ); ?>"
                                        alt="<?php echo esc_attr( $image['alt'] ); ?>"
                                        class="gallery-item"
                                        data-index="<?php echo esc_attr( $index ); ?>"
                                    >
                                <?php endforeach; ?>
                            <?php endif; ?>

                        </div>
                    </div>
                <?php
                    $i++;
                endwhile;
                ?>

            </div>

            <!-- Pagination -->
            <div class="pagination">
                <button class="page-btn prev">
                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14" fill="none">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M0.292657 7.37629C0.105186 7.18876 -0.000129526 6.93445 -0.000129514 6.66929C-0.000129503 6.40412 0.105186 6.14982 0.292657 5.96229L5.94966 0.305288C6.0419 0.209778 6.15225 0.133596 6.27425 0.0811868C6.39626 0.0287778 6.52748 0.00119152 6.66026 3.77123e-05C6.79304 -0.0011161 6.92471 0.0241859 7.04761 0.0744668C7.17051 0.124748 7.28216 0.199001 7.37605 0.292893C7.46994 0.386786 7.5442 0.498438 7.59448 0.621334C7.64476 0.744231 7.67006 0.87591 7.66891 1.00869C7.66775 1.14147 7.64017 1.27269 7.58776 1.39469C7.53535 1.5167 7.45917 1.62704 7.36366 1.71929L2.41366 6.66929L7.36366 11.6193C7.54581 11.8079 7.64661 12.0605 7.64433 12.3227C7.64205 12.5849 7.53688 12.8357 7.35148 13.0211C7.16607 13.2065 6.91525 13.3117 6.65306 13.314C6.39086 13.3162 6.13826 13.2154 5.94966 13.0333L0.292657 7.37629Z" fill="#D9D9D9"/>
                    </svg>
                </button>

                <div class="page-numbers"></div>

                <button class="page-btn next">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M15.935 12.6259C15.681 13.8369 14.327 14.7079 11.62 16.4479C8.675 18.3409 7.203 19.2879 6.01 18.9229C5.60381 18.7967 5.23172 18.5795 4.922 18.2879C4 17.4179 4 15.6119 4 11.9999C4 8.38793 4 6.58193 4.922 5.71193C5.23201 5.42024 5.60445 5.20307 6.011 5.07693C7.203 4.71193 8.675 5.65893 11.62 7.55193C14.327 9.29193 15.68 10.1619 15.935 11.3739C16.022 11.7859 16.022 12.2139 15.935 12.6259Z" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
                        <path d="M20 5V19" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
                    </svg>
                </button>
            </div>

        <?php endif; ?>

    </div>
</section>
<!-- /Gallery Section -->

<?php get_footer(); ?>