@version(2)
{{-- 화면을 가득 채우는 슬라이더. 문구는 콘텐츠 폭이 아니라 화면 가장자리를 기준으로 놓는다 --}}
@if (count($hs_slides))
<section class="hs-hero hs-hero-{{ $hs_hero_height }}" id="hsHero" data-interval="{{ $hs_hero_interval }}">
	<div class="hs-hero-stage">
		@foreach ($hs_slides as $i => $slide)
		<article class="hs-slide @if($i === 0) is-active @endif" data-index="{{ $i }}">
			<div class="hs-slide-bg" style="background-image:url('{{ $slide['image'] }}')"></div>
			<div class="hs-slide-veil"></div>

			<div class="hs-slide-copy">
				@if ($slide['eyebrow'])
				<span class="hs-slide-eyebrow"><i></i>{{ $slide['eyebrow'] }}</span>
				@endif
				@if ($slide['headline'])
				<h2 class="hs-slide-headline">{!! nl2br(escape($slide['headline'])) !!}</h2>
				@endif
				@if ($slide['link'])
				<a class="hs-slide-link" href="{{ $slide['link'] }}">
					<span>{{ $lang->hs_view_more }}</span>
					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
				</a>
				@endif
			</div>
		</article>
		@endforeach
	</div>

	@if (count($hs_slides) > 1)
	<div class="hs-hero-nav">
		<button type="button" class="hs-arrow" data-hero="prev" aria-label="{{ $lang->hs_prev }}">
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true"><path d="M15 5l-7 7 7 7" /></svg>
		</button>
		<div class="hs-hero-count">
			<b id="hsHeroNow">01</b>
			<span class="hs-hero-bar"><i id="hsHeroBar"></i></span>
			<span>{{ sprintf('%02d', count($hs_slides)) }}</span>
		</div>
		<button type="button" class="hs-arrow" data-hero="next" aria-label="{{ $lang->hs_next }}">
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true"><path d="M9 5l7 7-7 7" /></svg>
		</button>
	</div>

	<ul class="hs-hero-dots">
		@foreach ($hs_slides as $i => $slide)
		<li><button type="button" data-hero-go="{{ $i }}" aria-label="{{ $i + 1 }}"></button></li>
		@endforeach
	</ul>
	@endif

	<div class="hs-hero-scroll">
		<span>SCROLL</span>
		<i></i>
	</div>
</section>
@endif