@extends('layouts.default-detail')

@section('content')

<!-- Page header -->
<div id="home" class="relative py-40 align-items-center d-flex bg-gray1 bb-1 b-gray1">
    <!-- Container for breadcrumb and title -->
    <div class="container">
        <!-- Row for all details -->
        <div class="row">
            <!-- Column for the title -->
            <div class="col-lg-6 t-left t-center-sm">
                <p class="font-secondary uppercase fs-20 dark">
                    STRUKTUR ORGANISASI
                </p>
            </div>
            <!-- Column for the breadcrumb -->
            <div class="col-lg-6 d-flex t-right t-center-sm justify-content-lg-end justify-content-center">
                <!-- Start breadcrumb -->
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 gray8 bold uppercase fs-12 c-default">
                        <li class="breadcrumb-item"><a href="/" class="colored-hover">Beranda</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Struktur Organisasi</li>
                    </ol>
                </nav>
                <!-- End breadcrumb -->
            </div>
        </div>
        <!-- End row for all details -->
    </div>
    <!-- End container for breadcrumb and title -->
</div>
<!-- End page header -->

<section id="team" class="bg-white pt-50 pb-120">
    <div class="container mt-50">
        <div class="row row-cols-3 mt-50">

            @foreach ($data as $item)
            <!-- Column for widget -->
            <div class="col mt-40 lh-25">
                <!-- Column title -->
                <h5 class="fs-20 font-tertiary semibold dark4">
                    {{ $item->position }}
                </h5>
                <!-- Detail -->
                <p class="mt-20 lh-25">
                    {{ $item->name }}
                </p>
            </div>
            <!-- End column for widget -->
            @endforeach

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

<!-- Row for related posts -->
<div class="row mt-30">
    <!-- Column for all -->
    <div class="col-12">
        <!-- Keeper -->
        <div class="fullwidth px-25 py-30 bg-gray2 d-block b-1 b-gray2">

            <!-- Title and navigation -->
            <div class="row align-items-center justify-content-between">
                <div class="col-auto">
                    <h3 id="latest-articles-title" class="font-secondary uppercase">
                        Daftar Pengurus
                    </h3>
                </div>
                <div class="col-auto ml-auto">
                    <div class="px-5">
                        <!-- Previous button -->
                        <button type="button" class="icon-sm ml-3 bg-dark white bg-colored-hover" data-slider-control="#related-post-slider" data-slider-dir="prev">
                            <i class="ti-angle-left"></i>
                        </button>
                        <!-- Next button -->
                        <button type="button" class="icon-sm ml-3 bg-dark white bg-colored-hover" data-slider-control="#related-post-slider" data-slider-dir="next">
                            <i class="ti-angle-right"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Slider -->
            <div id="related-post-slider" class="custom-slider block-img dots-circle c-grab mt-20" data-slick='{"speed":600, "fade": false, "draggable":true, "slidesToShow": 6, "slidesToScroll": 1, "responsive":[{"breakpoint": 1024,"settings":{"slidesToShow": 6}},{"breakpoint": 768,"settings":{"slidesToShow": 1}}]}'>
                @foreach ($data as $item)
                <!-- Slide -->
                <div class="px-5">
                    <a href="#" class="has-overlay d-flex hover-container">
                        <!-- Overlay text -->
                        <div class="overlay dark-bottom d-flex align-items-start justify-content-end flex-column px-30 py-20">
                            <h3 class="fs-16 medium lh-25 white">
                                {{ $item->name }}
                            </h3>
                            <p class="white mt-5 semibold fs-13 uppercase lh-normal">
                                <i class="ti-timer mr-3"></i>
                                {{ $item->created_at }}
                            </p>
                        </div>
                        <img src="images/blog/post_loader.svg" data-lazy="{{ asset('storage/team/'. $item->image) }}" class="zoom-in-hover-item slow" alt="post iamge template">
                    </a>
                </div>
                <!-- End slide -->
                @endforeach
            </div>
            <!-- End Slider -->

        </div>
        <!-- End keeper -->
    </div>
    <!-- End column for all -->
</div>
<!-- End row for related posts -->


@endsection