@extends('template')

@section('content')
    <div class="container pt-5 h-screen inter">
        <div class="box mt-5 p-3 p-lg-5">
            <h1 class="text-green-dark">Gugus Depan</h1>
            <div class="wrapper-wrap " style="justify-content:center  ">
                @foreach ($gudep as $item)
                    <div
                        class="card  p-3 box center  m-3 h-100 "style="flex-direction: row!important; width:450px; height:200px;">
                        <div>
                            <p class="text-green m-0">Gugus Depan</p>
                            <h5 class="text-green-dark m-0">{{ $item->name }}</h5>
                            <p class="text-green m-0">alamat</p>
                            <p style="font-size:12px; " class="text-green-dark m-0 ">{{ $item->alamat }}</p>
                            <p class="text-green m-0">kode</p>
                            <p style="font-size:12px; " class="text-green-dark m-0 ">{{ $item->gudep->kode }}</p>
                        </div>
                        <div class="m-lg-3">
                            <img class="box-photo m-3" src="{{ asset('images/' . $item->photo) }}" alt="">
                        </div>

                    </div>
                @endforeach
            </div>
            <div class="center">

                {{ $gudep->links('pagination::bootstrap-4') }}
            </div>

        </div>
    </div>
@endsection