@extends('layouts.layout-user')
@section('content')
<div class="row">
    <h1>Informasi System</h1>
    <form class="w-72" action="{{route('informasi.userIndex')}}" method="GET">
        <div class="input-group input-group-merge" style="max-width: 300px">
            <span class="input-group-text" id="basic-addon-search31"><i class="fa fa-search"></i></span>
            <input name="search" class="form-control" placeholder="Search..." aria-label="Search..." aria-describedby="basic-addon-search31"></input>
        </div>
    </form>
    <div class="w-full mb-4 mt-4">
        @if ($informasis->isEmpty())
        <div class="row mt-2">
            <div class="col-md-12">
                <div class="alert alert-warning" role="alert">
                    File Informasi Tidak Ada
                </div>
            </div>
        </div>
    @else
        @foreach ($informasis as $informasi)
            <div class="row mt-2">
                <div class="col-md-12">
                    <a href="{{ route('informasi.userShow', ['id' => $informasi->id]) }}" class="card shadow text-decoration-none">
                        <div class="card-body">
                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px;">
                                <div style="display:flex; align-items: center; ">
                                    <img src="{{ asset('foto/' . $informasi->foto) }}" alt="Foto" style="width: 100px; height: 100px; object-fit: cover;">
                                    <div style="text-align: left; margin-left:5%; margin-bottom: 6%;">
                                        <p class="card-title" style="margin-bottom: 0%; font-size:100%; font-weight:bold; ">{{$informasi->judul}}</p>
                                        <p class="card-text" style="font-size:80%;">{{$informasi->kategori}}</p>
                                    </div>
                                </div>
                                <!-- Tambahkan div grid-item lainnya sesuai kebutuhan -->
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        @endforeach
    @endif

    </div>
</div>
@endsection