@version(2)
{{-- 대문 히어로. 화면 좌우를 가득 채우고 문구는 아래쪽에 둔다. --}}
@php
$hr_visuals = array_map(function($hr_nv) { return is_array($hr_nv) ? $hr_nv : (array)$hr_nv; }, is_array($hr_visuals ?? null) ? $hr_visuals : []);
if (!function_exists('hr_visual_text'))
{
	function hr_visual_text($hr_t)
	{
		return nl2br(escape(preg_replace('/<br\s*\/?\s*>/i', "\n", (string)$hr_t)));
	}
}
$hr_visual_total = count($hr_visuals);
@endphp
<section class="hr-visual" data-interval="{{ $hr_interval }}" aria-roledescription="carousel" aria-label="{{ $lang->hr_visual_label }}">
	<div class="hr-visual-track">
		@foreach ($hr_visuals as $hr_vi => $hr_v)
		<div class="hr-visual-item @if ($hr_vi === 0) is-on @endif align-{{ $hr_v['align'] ?? 'left' }}"
			@if (!empty($hr_v['image'])) style="background-image:url('{{ $hr_v['image'] }}')" @endif
			aria-hidden="{{ $hr_vi === 0 ? 'false' : 'true' }}">
			<div class="hr-inner hr-visual-copy">
				<em class="hr-visual-no">{{ sprintf('%02d', $hr_vi + 1) }}</em>
				@if (!empty($hr_v['title']))<h2>{!! hr_visual_text($hr_v['title']) !!}</h2>@endif
				@if (!empty($hr_v['text']))<p>{!! hr_visual_text($hr_v['text']) !!}</p>@endif
				@if (!empty($hr_v['link_url']) && !empty($hr_v['link_text']))
				<a class="hr-visual-link" href="{{ $hr_v['link_url'] }}">
					{{ $hr_v['link_text'] }}
					<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 11h13.2l-5.1-5.1L13.5 4.5 21 12l-7.5 7.5-1.4-1.4 5.1-5.1H4z"/></svg>
				</a>
				@endif
			</div>
		</div>
		@endforeach
	</div>

	@if ($hr_visual_total > 1)
	<div class="hr-visual-ctrl">
		<div class="hr-inner hr-visual-ctrl-inner">
			<div class="hr-visual-count">
				<strong id="hrVisualNow">01</strong>
				<span class="hr-visual-bar"><i></i></span>
				<span>{{ sprintf('%02d', $hr_visual_total) }}</span>
			</div>
			<div class="hr-visual-arrows">
				<button type="button" class="hr-visual-nav prev" aria-label="{{ $lang->hr_visual_prev }}">
					<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11H6.8l5.1-5.1L10.5 4.5 3 12l7.5 7.5 1.4-1.4L6.8 13H20z"/></svg>
				</button>
				<button type="button" class="hr-visual-nav next" aria-label="{{ $lang->hr_visual_next }}">
					<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 11h13.2l-5.1-5.1L13.5 4.5 21 12l-7.5 7.5-1.4-1.4 5.1-5.1H4z"/></svg>
				</button>
			</div>
			<div class="hr-visual-dots" role="tablist">
				@foreach ($hr_visuals as $hr_di => $hr_dv)
				<button type="button" class="@if ($hr_di === 0) is-on @endif" data-go="{{ $hr_di }}" role="tab" aria-label="{{ sprintf($lang->hr_visual_slide, $hr_di + 1) }}"></button>
				@endforeach
			</div>
		</div>
	</div>
	@endif
</section>