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

<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_study-des', $country->country_id, $country->country_name) }}
</div>

@if ($subpage==1)
    <main class="main">
        subpage 1
    </main>
@else
    <main class="main">
        @foreach ($list as $k => $v)
        @if (($k % 2) == 0)
        <div class="container-fluid">
        @else
        <div class="container-fluid my-10 my-md-14 py-0 py-md-10">
            <div class="block-gray"></div>
        @endif
            <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-md-6">
                    <div class="embed__img py-md-10 mb-6 mb-md-0" style="background-image: url({{ asset($v->pic) }});">
                        <div class="py-25 py-md-25"></div>
                    </div>
                </div>
                @if (($k % 2) == 0)
                <div class="col-12 col-md-6">
                @else
                <div class="col-12 col-md-6 order-md-first">
                @endif
                    <div class="h3 font-weight-bold mb-3">{{ $v->title }}</div>
                    {!! $v->description !!}
                </div>
            </div>
            </div>
        </div>
        @endforeach
    </main>
@endif

@stop
@section('js')
<!-- single -->
<script src="/assets/js/vendor/jquery.readmore.min.js"></script>
<script>
    $('.slick-nav').slick();
    $.home();
    new Readmore('.readmore', {
        speed: 500,
        collapsedHeight: 350,
        moreLink: '<p class="text-center"><a class="btn btn-primary" href="#">展開</a></p>',
        lessLink: '<p class="text-center"><a class="btn btn-primary" href="#">收合</a></p>',
    });
</script>
@stop