{{-- home/content --}}

    {{-- !breadcrumb --}}
    <div style="margin: 1rem 0rem 0rem 0rem;"></div>
    {{-- end !breadcrumb --}}

    <div class="card-content-default" style="margin: 0rem 0rem 0rem 0rem; padding: 0rem 1rem 0rem 1rem; box-shadow: 0 3px 8px 0 rgba(0, 0, 0);">

        {{-- top content --}}
        @component('widget.shortcut_component', [
            // form config here
            'shortcut' => $shortcut,
        ])
        {{-- slot --}}
        @endcomponent
    </div>

    <div style="margin: 1rem 0rem 0rem 0rem;"></div>

    <div class="card-content-default" style="margin: 0rem 0rem 0rem 0rem; padding: 0rem 1rem 0rem 1rem; box-shadow: 0 3px 8px 0 rgba(0, 0, 0);">
        {{-- caption --}}
        <div class="mb-0" style="margin: 0 -15px -15px;">

            {{-- top content --}}
            @component('widget.banner_component', [
                // form config here
                'banner_widgets' => $banner_widgets,
            ])
            {{-- slot --}}
            @endcomponent

        </div>
        {{-- end caption --}}
    </div>
    
    {{-- banner manual --}}
     <div class="card-content-default mt-1" style="margin: 0rem 0rem 0rem 0rem; padding: 0rem 1rem 0rem 1rem; box-shadow: 0 3px 8px 0 rgba(0, 0, 0);">
        {{-- caption --}}
        <div class="mb-0" style="margin: 0 -15px -15px;">

           <div class="card-container" style="box-shadow:none; text-align:center;">
                <div class="card-body">
                    <div id="carousel-interval">
                        <div class="card-content" style="margin: 0 -8px -8px;">
                            <div id="carousel-example-interval" class="carousel slide" data-ride="carousel">
                                <div role="listbox">
                                    <div class="carousel-item active" data-interval="10000">
                                        <img class="img-fluid" src="{{ url('libraries/pengadilan-agama/images/banner/banner.gif') }}" alt="Article Banner" style="border-radius: 5px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        {{-- end caption --}}
    </div>
    {{-- end banner manual --}}

    <div style="margin: 1rem 0rem 0rem 0rem;"></div>

    {{-- don't add slash div in here! --}}
    <div class="card-content-default" style="margin: 0rem 0rem 0rem 0rem; padding: 1rem 1rem 1rem 1rem; box-shadow: 0 3px 8px 0 rgba(0, 0, 0);">
        <div class="container">
            <div class="row">

                {{-- left layout main menu --}}

                <div class="col-12 col-md-8">

                    {{-- widget 4 --}}
                    @component('widget.case_schedule_component', [
                        // form config here
                        'case_schedules' => $case_schedules,
                        'times' => $times,
                    ])
                    {{-- slot --}}
                    @endcomponent

                    <div class="row">

                        {{-- start edit page --}}

                        {{-- berita --}}
                        <div class="col border-right border-top">
                            <div class="card-content-default" style="margin: 1rem 0rem 0rem 0rem; padding: 1rem 1rem 1rem 1rem;">
                                <h4>
                                    <i class="bx bx-news"></i>
                                    @lang('home.Berita')
                                </h4>

                                <div class="card-body">

                                    {{-- news content --}}
                                    @if ($newses)

                                        @foreach($newses as $news)
                                        <div class="media d-flex align-items-center mb-1">
                                            <a href="#">
                                                <img class="rounded" src="{{ url( $news['images_url']) }}" height="64" width="64">
                                                </a>
                                                <div class="media-body ml-1">
                                                    <h6 class="media-heading mb-0">
                                                        <a href="/article/{{ $news['slug'] }}" style="color: #056e4f;"><medium>{{ $news['title_short'] }}</medium></a>
                                                    </h6><small class="text-muted">{{ $news['time'] }}</small>
                                                </div>
                                            </div>
                                        @endforeach

                                    @else
                                        <div style="font-size:10px; color : #828D99; text-align:center;">
                                            @lang('home.TidakDitemukan')
                                        </div>
                                    @endif
                                    {{-- end news content --}}

                                    <div class="text-right mt-1">
                                        <a href="{{ url('berita') }}">
                                            <button type="button" class="btn btn-sm" style="line-height: 1.0; border-color: #000000 !important;background-color: #FF9900 !important;color: #fff;">
                                                Berita lainnya &rarr;
                                            </button>
                                        </a>
                                    </div>

                                </div>
                            </div>
                        </div>

                        {{-- pengumuman --}}
                        <div class="col border-right border-top">
                            <div class="card-content-default"
                                style="margin: 1rem 0rem 0rem 0rem; padding: 1rem 1rem 1rem 1rem;">
                                <h4>
                                    <i class="bx bxs-bell-ring"></i>
                                    @lang('home.Pengumuman')
                                </h4>

                                <div class="card-body">

                                    {{-- announcement content --}}
                                    @if ($announcements)

                                        @foreach($announcements as $announcement)
                                            <div class="media d-flex align-items-center mb-1">
                                                <div class="media-body ml-1">
                                                    <h6 class="media-heading mb-0">
                                                        <a href="/article/{{ $announcement['slug'] }}" style="color: #056e4f;"><medium>{{ $announcement['title_short'] }}</medium></a>
                                                    </h6><small class="text-muted">{{ $announcement['time'] }}</small>
                                                </div>
                                            </div>
                                        @endforeach

                                    @else
                                        <div style="font-size:10px; color : #828D99; text-align:center;">
                                            @lang('home.TidakDitemukan')
                                        </div>
                                    @endif
                                    {{-- end announcement content --}}

                                    <div class="text-right mt-1">
                                        <a href="{{ url('pengumuman') }}">
                                            <button type="button" class="btn btn-sm" style="line-height: 1.0; border-color: #000000 !important;background-color: #FF9900 !important;color: #fff;">
                                                Pengumuman lainnya &rarr;
                                            </button>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- list group menu buttom --}}
                    {{-- tab --}}
                    @component('widget.tab_component', [
                        // form config here
                        'tab_widgets' => $tab_widgets,
                    ])
                    {{-- slot --}}
                    @endcomponent

                    {{-- tab --}}
                    {{-- @component('widget.video_player_component', [
                    ])
                    @endcomponent --}}

                    {{-- end edit page --}}

                    <div class="mb-3">
                        {{-- top content --}}
                        @component('widget.video_component', [
                        // form config here
                        'videos' => $videos,
                        ])
                        {{-- slot --}}
                        @endcomponent
                    </div>

                    <div class="mb-3">
                        {{-- top content --}}
                        @component('widget.supporting_applications', [
                        // form config here
                        'supporting_widgets' => $supporting_widgets,
                        ])
                        {{-- slot --}}
                        @endcomponent
                    </div>

                </div>

                @component('widget_component', [
                // form config here
                'activities' => $activities,
                'links' => $links,
                'visits' => $visits,
                ])
                {{-- slot --}}
                @endcomponent

            </div>