<?php

defined( 'ABSPATH' ) || exit;

?>

<div class="totaltheme-wpb-patterns-library vc_column vc_col-sm-12">

	<div class="totaltheme-wpb-patterns-library__filter hidden">
		<div class="totaltheme-wpb-patterns-library__filter-inner">
			<div class="totaltheme-wpb-patterns-library__filter-label">
				<span><?php esc_html_e( 'Filter by Category', 'total' ); ?>:</span>
				<button type="button" class="totaltheme-wpb-patterns-library__filter-collapse-button" aria-pressed="false" aria-label="<?php esc_attr_e( 'Collapse filter sidebar', 'total' ); ?>"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg></button>
			</div>
			<div class="totaltheme-wpb-patterns-library__filter-list">
				<a href="#" data-category="*" aria-pressed="true" role="button" class="totaltheme-wpb-patterns-library__filter-button"><?php esc_html_e( 'All', 'total' ); ?></a>
				</div>
		</div>
	</div>

	<div class="totaltheme-wpb-patterns-library__list">
		<div class="totaltheme-wpb-patterns-library__spinner"><div class="totaltheme-wpb-patterns-library__spinner-inner"><?php echo totaltheme_get_loading_icon(); ?><span><?php esc_html_e( 'Loading patterns', 'total' ); ?></span></div></div>
		<script type="text/html" id="totaltheme-wpb-patterns-library-item-template">
			<div class="totaltheme-wpb-patterns-library__item"
				data-template_id="<%- id %>"
				data-template_id_hash="<%- id_hash %>"
				data-template_unique_id="<%- unique_id %>"
				data-wpex-category="<%- u=category %>"
				data-template_name="<%- u=name %>"
				data-template_type="<?php echo esc_attr( self::TEMPLATE_TYPE ); ?>"
				data-category="<?php echo esc_attr( self::TEMPLATE_TYPE ); ?>"
			>
				<button role="button" aria-label="<?php echo sprintf( esc_attr( 'Insert %s Pattern', 'total' ), '<%- label %>' ); ?>" data-template-handler="">
					<div class="totaltheme-wpb-patterns-library__image"><img loading="lazy" src="<%- screenshot %>"></div>
			</button>
			</div>
		</script>
	</div>

</div>