@extends('template.main')

@section('content')
<section id="services" class="services">


    <!-- CONTAINER -->
    <div class="main-container container-fluid">
        <!-- Row -->
        <div class="row row-sm">
            <div class="col-md-12 col-lg-12 col-xl-12">
            </div>
            <div class="col-md-12 col-lg-7 col-xl-12">
                <div class="row row-sm justify-content-center">
                    <div class="text-dark mb-4 ms-1 fs-10 fw-semibold">All Folders</div>
                    @foreach ($dokumen as $dok)
                    <div class="col mb-5">

                        <!-- Mengubah ukuran col-md-12 menjadi col-md-4 dan menambahkan mb-3 untuk memberi jarak antara card -->
                        <a href="folder/{{ $dok->id }}" class="text-decoration-none text-reset">
                            <!-- Menambahkan anchor tag untuk membuat card dapat diklik -->
                            <div class="card pos-relative" style="height: auto;">
                                <!-- Mengubah style untuk mengatur tinggi card menjadi otomatis -->
                                <div class="card-body px-2 pt-2 pb-1"> <!-- Mengubah ukuran padding -->
                                    <div class="d-flex justify-content-center align-items-center">
                                        <!-- Menengahkan ikon dan teks -->
                                        <span class="bg-warning-transparent border border-warning brround" style="width: 24px; height: 24px;">
                                            <!-- Mengatur ukuran ikon -->
                                            <svg style="width: 100%; height: 100%;" viewBox="0 0 24 24">
                                                <!-- Mengatur ukuran ikon -->
                                                <path fill="#f7b731" d="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z" />
                                            </svg>
                                        </span>
                                        <h5 class="text-dark mb-0 ms-1" style="font-size: 12px;">
                                            {{ $dok->nama_dokumen }}
                                        </h5>
                                        <!-- Mengubah ukuran dan memberikan jarak antara teks, serta mengubah warna teks -->
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
            <!-- End Row -->
        </div>
        <!-- End Row -->
    </div>
    <!-- CONTAINER CLOSED -->


</section>
@endsection