@inject('FrontendPresenter', 'App\Presenters\FrontendPresenter')
@extends('layouts.frontend')
@if (!is_null($overview))
@section('title', $overview->meta_title)
@section('meta_description', $overview->meta_description)
@section('meta_keywords', $overview->meta_keyword)
@endif
@section('json-ld', Breadcrumbs::view('breadcrumbs::json-ld', 'countries_overview', $country->country_id, $country->country_name))
@section('content')
<!-- kv-countries-language -->
<div id="kv-countries-language">@include('frontend.module.kv-countries-language')</div>
<!-- ./kv-countries-language -->

<nav class="nav-main">
    <div class="nav-primary">
        <div class="container d-none d-lg-block slick-nav">
            {!! $FrontendPresenter->countryMenuSlider() !!}
        </div>
        <div class="d-lg-none">
            <select class="custom-select" onchange="location = this.value;">
                {!! $FrontendPresenter->countryMenuSelect() !!}
            </select>
        </div>
    </div>
</nav>

<div class="container breadcrumbs">
    {{ Breadcrumbs::render('countries_overview', $country->country_id, $country->country_name) }}
</div>

@if (!is_null($overview))
<main class="main">
    <div class="container-fluid">
    <div class="container">
        <div class="h3 font-weight-bold mb-5 mb-lg-8">{{ $overview->title }}</div>
        <p>
            {!! nl2br($overview->description) !!}
        </p>
        <div class="card card-overlay my-8" style="background-image: url({{ asset($overview->pic_1) }});">
            <div class="card-body p-6 px-md-20 py-md-25 text-white">
                <div class="d-block">
                    <div class="card-title h3 font-weight-bold">{{ $overview->title_1 }}</div>
                    <p class="card-text mb-8">
                        {!! nl2br($overview->description_1) !!}
                    </p>
                    <a class="text-white" href="{{ $overview->url_1 }}">
                        繼續閱讀<i class="fas fa-chevron-right ml-3"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="card card-overlay my-8" style="background-image: url({{ asset($overview->pic_2) }});">
            <div class="card-body p-6 px-md-20 py-md-25 text-white">
                <div class="d-block">
                    <div class="card-title h3 font-weight-bold">{{ $overview->title_2 }}</div>
                    <p class="card-text mb-8">
                        {!! nl2br($overview->description_2) !!}
                    </p>
                    <a class="text-white" href="{{ $overview->url_2 }}">
                        繼續閱讀<i class="fas fa-chevron-right ml-3"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    </div>
</main>
@endif
@stop
@section('js')
<!-- single -->
<script>
$('.slick-nav').slick();
</script>
@stop