<div class="ohio-widget clb-gallery <?php echo $this->getWrapperClasses(); ?>" data-gallery="<?php echo esc_attr( $gallery_uniqid ); ?>">

	<?php
		$_image_start = 0;
		$_image_end = count( $settings['images'] );
		$_gallery_item = 0;

		if ( !empty( $settings['use_pagination'] ) ) {
			$_image_start = $_gallery_item = $pagination_page * $items_per_page - $items_per_page;

			if ( in_array( $settings['pagination_type'], [ 'simple', 'standard' ] ) ) {
				$_gallery_item = 0;
			}

			if ( $_image_end > $_image_start + $items_per_page ) {
				$_image_end = $_image_start + $items_per_page;
			}
		}
	?>

	<div class="vc_row <?php if ( !empty( $settings['masonry_grid'] ) ) { echo 'ohio-masonry'; } ?>" data-lazy-container="gallery">
	
		<?php for ( $_image_i = $_image_start; $_image_i < $_image_end; $_image_i++, $_gallery_item++ ) : ?>

		<?php $image = $settings['images'][ $_image_i ]; ?>

		<div class="masonry-block gallery-item card cursor-as-pointer <?php echo esc_attr( $grid_classes ); ?> <?php echo implode( ' ', $column_class ); ?> " data-gallery-item="<?php echo $_gallery_item; ?>" data-lazy-item="" data-lazy-scope="gallery">
			<div class="image-holder cursor-plus" data-cursor-class="cursor-link" <?php if ( $settings['tilt_effect'] ) { echo esc_attr( $tilt_attrs ); } ?>>
			    <img class="gimg hidden-image" src="<?php echo ( $image['url'] ) ? $image['url'] : '#'; ?>" alt="<?php echo esc_html( get_the_title( $image['id'] ) ); ?>">

			    <?php if ( $settings['gallery_layout'] == 'minimal' && $settings['preview_title'] ) : ?>
				    <div class="overlay-details -fade-up">
				        <div class="heading">
				            <h5 class="title"><?php echo esc_html( get_the_title( $image['id'] ) ); ?></h5>
				        </div>
				    </div>
			    <?php endif; ?>

			</div>

			<?php if ( $settings['preview_title'] ) : ?>
				<div class="card-details">
				    <div class="heading">
				        <h5 class="title"><?php echo esc_html( get_the_title( $image['id'] ) ); ?></h5>
				        <p class="caption -unspace -small-t"><?php echo esc_html( wp_get_attachment_caption( $image['id'] ) ); ?></p>
				    </div>
				</div>
			<?php endif; ?>

		</div>
			
		<?php endfor; ?>

	</div>

	<?php 
	    if ( !empty( $settings['use_pagination'] ) ) {
	        $large_number = 10000000;
	        $paginator_pattern = str_replace( $large_number, '{{page}}', get_pagenum_link( $large_number ) );

	        if ( $settings['pagination_type'] == 'standard' ) {

	            OhioLayout::the_paginator_layout( $pagination_page, $pages_count, $settings['pagination_position'], $settings['pagination_style'], $settings['pagination_size'] );

	        } elseif ( $settings['pagination_type'] == 'lazy_scroll' ) {

	            echo '<div class="lazy-load loading ' . implode( ' ', $additional_classes ) . '" data-lazy-load="scroll" ';
		            echo 'data-lazy-pages-count="' . esc_attr( $pages_count ) . '" ';
		            echo 'data-lazy-load-url-pattern="' . esc_attr( $paginator_pattern ) . '" ';
		            echo 'data-lazy-load-scope="gallery">';
		            echo '<button class="button -pagination">';
		            	echo '<span class="loading-text">' . esc_html__( 'Loading', 'ohio-extra' ) . '</span>';
		            echo '</button>';
	            echo '</div>';

	        } elseif ( $settings['pagination_type'] == 'lazy_button' ) {

	            echo '<div class="lazy-load load-more ' . implode( ' ', $additional_classes ) . '" data-lazy-load="click" ';
		            echo 'data-lazy-pages-count="' . esc_attr( $pages_count ) . '" ';
		            echo 'data-lazy-load-url-pattern="' . esc_attr( $paginator_pattern ) . '" ';
		            echo 'data-lazy-load-scope="gallery">';
		            echo '<button class="button -pagination">';
			            echo '<span class="loadmore-text">' . esc_html__( 'Load More', 'ohio-extra' ) . '</span>';
			            echo '<span class="loading-text">' . esc_html__( 'Loading', 'ohio-extra' ) . '</span>';
		            echo '</button>';
	            echo '</div>';
	        }
	    }
	?>
</div>
<div class="ohio-gallery-opened-sc clb-popup clb-gallery-lightbox" id="<?php echo $gallery_uniqid; ?>" data-options='<?php echo $gallery_json; ?>'>
	<div class="close-bar">
	    <button class="icon-button -light" aria-label="close">
		    <i class="icon">
		    	<svg class="default" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"></path></svg>
		    	<svg class="minimal" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.7552 0.244806C16.0816 0.571215 16.0816 1.10043 15.7552 1.42684L1.42684 15.7552C1.10043 16.0816 0.571215 16.0816 0.244806 15.7552C-0.0816021 15.4288 -0.0816021 14.8996 0.244806 14.5732L14.5732 0.244806C14.8996 -0.0816019 15.4288 -0.0816019 15.7552 0.244806Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15.7552 15.7552C15.4288 16.0816 14.8996 16.0816 14.5732 15.7552L0.244807 1.42684C-0.0816013 1.10043 -0.0816013 0.571215 0.244807 0.244806C0.571215 -0.0816021 1.10043 -0.0816021 1.42684 0.244806L15.7552 14.5732C16.0816 14.8996 16.0816 15.4288 15.7552 15.7552Z"></path></svg>
		    </i>
		</button>
		<button class="icon-button vc_hidden-xs -light" aria-label="expand">
		    <i class="icon">
		    	<svg class="default" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M0 2V6H2V2H6V0H2C0.9 0 0 0.9 0 2ZM2 12H0V16C0 17.1 0.9 18 2 18H6V16H2V12ZM16 16H12V18H16C17.1 18 18 17.1 18 16V12H16V16ZM16 0H12V2H16V6H18V2C18 0.9 17.1 0 16 0Z"/></svg>
		    </i>
		</button>
	</div>
    <div class="clb-popup-holder"></div>
</div>