{{-- header component --}}

{{-- title --}}
<div class="header-logo-mobile-responsive-img-padding" style="margin: 1rem 0rem 0rem 0rem;">

    {{-- header logo mobile --}}
    <div class="container">
        <div class="header-logo-mobile-responsive-img">
            <a href="{{ url('') }}">
                <img src="{{ asset('assets/images/logo/mobile-logo.png') }}" style="width: 100%; height: auto; max-width: 100%;"></img>
            </a>
        </div>
    </div>

    {{-- header logo desktop --}}
    <div class="container header-logo-mobile-responsive">
        <div class="card-body">
            <div class="card-content">
                <div class="row">
                    <div style="width:11%;float:left;margin-right:30px;">
                        <img src="{{ asset('assets/images/logo/logo.png') }}"
                            alt="Pengadilan Agama Yogyakarta" height="146" >
                    </div>
                    <div class="col col-xl text-left">
                        <p style="color:#056e4f; margin-top: 10px;font-size: 20px"><b>MAHKAMAH AGUNG REPUBLIK INDONESIA</b></p>
                        <h2 style="color:#056e4f; margin-top: -15px; font-size: 30px"><b>PENGADILAN AGAMA YOGYAKARTA KELAS IA</b></h2>
                        <p style="font-size: 13px;">Jl. Ipda Tut Harsono No.53, Kel, Muja Muju, Kec. Umbulharjo, Kota Yogyakarta, Daerah Istimewa Yogyakarta 55165</p>
                        <p style="font-size: 13px; margin-top: -15px;">Tlp. 0274-552997, Fax. 0274-552998, Email. admin@pa-yogyakarta.go.id, Delegasi : tabayyun.payk@gmail.com</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- end title --}}

{{-- navbar component --}}
<div class="header-navbar-responsive-mobile card-header" style="margin: 1rem 0rem 0rem 0rem;">

    {{-- navbar --}}
    @component('navbar_component', [
        // form config here
        'slug' => $slug,
        'menus' => $menus,
    ])
        {{-- slot --}}
    @endcomponent
    {{-- end navbar --}}

{{-- end navbar component --}}

{{-- carousel --}}

    {{-- parallax swiper start --}}
    <section id="component-swiper-parallax">
        <div class="card-body" style="background-color:#056e4f">
            <!-- Swiper -->
            <div class="swiper-parallax swiper-container">
                <div class="parallax-bg" data-swiper-parallax="-23%"> </div>
                <div class="swiper-wrapper">

                    {{-- slider content --}}
                    @if ($sliders)

                        @foreach($sliders as $slider)
                        <div class="swiper-slide" style="padding: 1.67rem 4rem;">
                            <div class="container">
                                <div class="row">
                                    <div class="col">
                                        <div class="title" data-swiper-parallax="-300">
                                            <strong class="carousel-title" style="font-size: 22px">{{ $slider['title'] }}</strong>
                                        </div>
                                        <div class="text" data-swiper-parallax="-100" style="color: #FFFFFF;">
                                            <p>{{ $slider['content_text'] }}</p>
                                            <p>
                                                <button type="button" class="btn-carousel-size">
                                                    <a href="/article/{{ $slider['slug'] }}" style="color: #056e4f;">@lang('header.Selengkapnya')</a>
                                                </button>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col mobile-responsive">
                                        <div class="content app-content">
                                        <img class="pic-round-shadow" width="500" height="300" alt="{{ $slider['title'] }}"
                                            src="{{ url( $slider['images_url']) }}"
                                            style="float:left;margin:0 10px 10px 0;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach

                    @endif
                    {{-- end slider content --}}

                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination" style="left:38%"></div>
            </div>
        </div>
    </section>
    {{-- parallax swiper ends --}}

{{-- end carousel --}}

    {{-- marquee --}}
    <div class="container-caption" style="margin-bottom:1rem;">
        <div class="marquee-top">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex align-items-center">
                            <div class="marquee-mobile-responsive col-2">
                                <div class="border-right" style="color:#FFFFFF">
                                    <strong>
                                       {{ $times }}
                                    </strong>
                                </div>
                            </div>
                            <span>
                                <marquee behavior="scroll" direction="left" style="color:#FFFFFF">
                                    <strong>
                                        @lang('header.Caption')
                                    </strong>
                                </marquee>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- end marquee --}}

</div>

@push('script-after-global')
<script>

$(document).ready(function () {
    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
    });
});

</script>
@endpush
{{-- end header component --}}