<style>
	:root {
		--number-columns-collection: {{section.settings.number_columns}};
		--gap-collumns-collection: {{section.settings.gap_columns}}px;
		--value-control-collection: calc(var(--gap-collumns-collection) * (var(--number-columns-collection) - 1) / var(--number-columns-collection));
		--number-columns-collection-mobile: {{section.settings.number_columns_mobile}};
		--gap-collumns-collection-mobile: {{section.settings.gap_columns_mobile}}px;
		--value-control-collection-mobile: calc(var(--gap-collumns-collection-mobile) * (var(--number-columns-collection-mobile) - 1) / var(--number-columns-collection-mobile));

		--color-bg-collection-scrollable: {{section.settings.bg_color}};
		--color-border-collection-scrollable: {{section.settings.border_color}};
		--color-text-collection-scrollable: {{section.settings.text_color}};

		--color-bgbutton-collection-scrollable: {{section.settings.bg_button}};
		--color-textbutton-collection-scrollable: {{section.settings.text_button}};


	}

	.collection-scrollable-wrapper {
		background-color: var(--color-bg-collection-scrollable);
		margin: {{section.settings.margin_block}}px 0px;
	}

	.collection-container {
		max-width: 1600px;
		margin: 0 auto;
		padding: 0 55px;
	}

	.collection-scrollable-list-wrapper {
		position: relative;
		padding: 24px 32px;
	}

	.collection-scrollable-title {
		color: var(--color-text-collection-scrollable);
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 24px;
		font-size: 22px;
		font-weight: 600;
	}

	.collection-scrollable-list {
		display: flex;
		overflow-x: auto;
		gap: var(--gap-collumns-collection);
		padding: 24px 0;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.collection-scrollable-list::-webkit-scrollbar {
		display: none;
	}

	.collection-element-list {
		min-width: calc((100% / var(--number-columns-collection)) - var(--value-control-collection));
		width: 100%;
		flex-grow: 1;
	}

	.element-list-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

	.element-list-img-wrapper {
		border-radius: 50%;
		overflow: hidden;
		width: 100%;
		height: 0;
		padding-bottom: 100%;
		position: relative;
	}

	.element-list-img-wrapper:hover::after {
		content: "";
		border: {{section.settings.border_size}}px solid var(--color-border-collection-scrollable);
		position: absolute;
		left: 0;
		border-radius: 50%;
		top: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		/*background: linear-gradient(45deg, rgba(255,0,0,1) 0%, transparent 50%);*/
	}

	.element-list-title {
		max-width: 100%;
		text-align: center;
		font-size: {{section.settings.text_font_size}}px;
		overflow-wrap: break-word;
	}

	.element-list-title a {
		color: var(--color-text-collection-scrollable)
	}

	.element-list-title a:hover {
		text-decoration: underline;
	}

	.element-list-img {
		width: 100%;
	}

	.hide-names-desktop {
		display: none;
	}

	@media only screen and (max-width: 780px) {
		.collection-scrollable-title {
			font-size: 18px;
		}

		.collection-scrollable-list {
			display: flex;
			gap: var(--gap-collumns-collection-mobile);
		}

		.collection-element-list {
			min-width: calc((100% / var(--number-columns-collection-mobile)) - var(--value-control-collection-mobile));
			width: 100%;
			flex-grow: 1;
		}

		.collection-container {
			padding: 0px 15px;
		}

		.element-list-title {
			font-size: {{section.settings.text_font_size_mobile}}px;
		}

		.hide-names-mobile {
			display: none;
		}

		.hide-names-desktop {
			display: block;
		}
	}

	.colection-button-wrapper {
		position: absolute;
		height: 100%;
		display: flex;
		align-items: center;
		width: 24px;
		justify-content: center;
	}

	.colection-button-wrapper button {
		border: none;
		background-color: var(--color-bgbutton-collection-scrollable);
		border-radius: 50%;
		display: flex;
		padding: 4px 8px 4px 8px;
		justify-content: center;
		align-items: center;
		fill: var(--color-textbutton-collection-scrollable);
	}

	.colection-button-wrapper button:focus {
		filter: brightness(0.65);
	}

	#button_left {
		top: 0;
		left: 0;
		transform: rotate(180deg);
	}

	#button_right {
		top: 0;
		right: 0;
	}

</style>

<div class="collection-scrollable-wrapper">
	<div class="collection-scrollable collection-container">

		{% if section.settings.title_section != blank %}
			<div class="collection-scrollable-title">
				{{ section.settings.title_section }}
			</div>
		{% endif %}

		<div class="collection-scrollable-list-wrapper">
			<ul class="collection-scrollable-list" id="collection_scrollable_list">
				{% for block in section.blocks %}
					<li class="collection-element-list">
						<div class="element-list-wrapper">
							<div class="element-list-img-wrapper">
								<a href="{{ block.settings.link_collection }}">
									<img class="element-list-img lazyload"
										 data-src="{{ block.settings.image_collection | img_url: 'master' }}" alt="">
								</a>
							</div>
							<div class="element-list-title {% if section.settings.show_names_collection_mobile == false %} hide-names-mobile {% endif %}  {% if section.settings.show_names_collection_desktop == false %} hide-names-desktop {% endif %}">
								<a class="element-list-link" href="{{ block.settings.link_collection }}">
									{{ block.settings.title_collection }}
								</a>
							</div>
						</div>
					</li>
				{% endfor %}
			</ul>

			<div class="colection-button-wrapper" id="button_left">
				<button id="scroll_left">
					{% include 'icon-arrow' %}
				</button>
			</div>

			<div class="colection-button-wrapper" id="button_right">
				<button id="scroll_right">
					{% include 'icon-arrow' %}
				</button>
			</div>

		</div>
	</div>
</div>


<script type="lazyload2">
	$('#scroll_left').on('click', function () {
		$('#collection_scrollable_list').animate({
			scrollLeft: '-=95'
		}, 200, 'swing')
	});

	$('#scroll_right').on('click', function () {
		$('#collection_scrollable_list').animate({
			scrollLeft: '+=95'
		}, 200, 'swing')
	})


	const slider = document.querySelector('#collection_scrollable_list')
	let isDown = false
	let startX
	let scrollLeft

	slider.addEventListener('mousedown', (e) => {
		isDown = true
		startX = e.pageX - slider.offsetLeft
		scrollLeft = slider.scrollLeft
	});
	slider.addEventListener('mouseleave', () => {
		isDown = false
	})
	slider.addEventListener('mouseup', () => {
		isDown = false
	})
	slider.addEventListener('mousemove', (e) => {
		if (!isDown) return
		e.preventDefault()
		const x = e.pageX - slider.offsetLeft
		const walk = (x - startX) * 2;
		slider.scrollLeft = scrollLeft - walk
		console.log(walk)
	}, {passive: false})

</script>

{% schema %}
  {
    "name": "Coleções / Categorias",
    "settings": [
		{
			"type": "header",
			"content": "Configurações"
		},
		{
			"type": "text",
			"id": "title_section",
			"label": "Título da seção",
			"default": "Coleções"
		},
		{
			"type": "checkbox",
			"id": "show_names_collection_mobile",
			"label": "Mostrar nomes das coleções no Mobile",
			"default": false
		},
		{
			"type": "checkbox",
			"id": "show_names_collection_desktop",
			"label": "Mostrar nomes das coleções no Desktop",
			"default": true
		},
		{
			"type": "range",
			"id": "margin_block",
			"label": "Margem da seção",
			"min": 0,
			"max": 200,
			"unit": "px",
			"step": 2,
			"default": 20
		},
		{
			"type": "header",
			"content": "Colunas"
		},
		{
			"type": "range",
			"id": "number_columns",
			"label": "Número de colunas - Desktop",
			"min": 2,
			"max": 12,
			"unit": "col",
			"step": 1,
			"default": 7
		},
		{
			"type": "range",
			"id": "gap_columns",
			"label": "Espaço entre colunas - Desktop",
			"min": 0,
			"max": 200,
			"unit": "px",
			"step": 2,
			"default": 20
		},
		{
			"type": "range",
			"id": "number_columns_mobile",
			"label": "Número de colunas - Mobile",
			"min": 2,
			"max": 12,
			"unit": "col",
			"step": 1,
			"default": 4
		},
		{
			"type": "range",
			"id": "gap_columns_mobile",
			"label": "Espaço entre colunas - Mobile",
			"min": 0,
			"max": 200,
			"unit": "px",
			"step": 2,
			"default": 10
		},

		{
			"type": "header",
			"content": "Cores"
		},
		{
			"type": "color",
			"id": "bg_color",
			"label": "Cor de fundo",
			"default": "#00103c"
		},
		{
			"type": "color",
			"id": "border_color",
			"label": "Cor da borda, ao passar o mouse",
			"default": "#0033c6"
		},
		{
			"type": "color",
			"id": "text_color",
			"label": "Cor do texto",
			"default": "#fff"
		},
		{
			"type": "color",
			"id": "bg_button",
			"label": "Cor de fundo dos botões",
			"default": "#f2f2f2"
		},
		{
			"type": "color",
			"id": "text_button",
			"label": "Cor do ícone dos botões",
			"default": "#0033c6"
		},
		{
			"type": "header",
			"content": "Tamanhos"
		},
		{
			"type": "range",
			"id": "text_font_size",
			"label": "Tamanho da fonte",
			"min": 5,
			"max": 20,
			"unit": "px",
			"step": 1,
			"default": 13
		},
		{
			"type": "range",
			"id": "text_font_size_mobile",
			"label": "Tamanho da fonte - Mobile",
			"min": 5,
			"max": 20,
			"unit": "px",
			"step": 1,
			"default": 11
		},
		{
			"type": "range",
			"id": "border_size",
			"label": "Tamanho borda, ao passar o mouse",
			"min": 0,
			"max": 5,
			"unit": "px",
			"step": 1,
			"default": 0,
			"info": "Coloque 0, para não mostrar"
		}

	],
	"blocks": [
		{
			"type": "collection_list",
			"name": "Coleção",
			"settings": [
				{
					"type": "image_picker",
					"id": "image_collection",
					"label": "Ícone da coleção"
				},
				{
					"type": "text",
					"id": "title_collection",
					"label": "Nome da coleção"
				},
				{
					"type": "url",
					"id": "link_collection",
					"label": "Url da coleção"
				}
			]
		}
	],
	"presets": [
		{
			"name": "Coleções / Categorias",
			"category": "astron"
		}
	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
