@extends('layouts.client')

@push('meta_title')
    {{ __('Downloadables') }}
@endpush

@section('content')
<section class="section">
    <div class="container">
        <h4 class="fw-bold text-center text-uppercase">Downloadable Documents</h4>

        <ul class="list-group pt-5">
            @forelse ($downloadables as $downloadable)
                <li class="list-group-item d-flex justify-content-between align-items-center py-4">
                    <a href="" class="text-decoration-none d-flex align-items-center gap-3">
                        <img src="{{ $downloadable->image_file }}" loading="lazy" width="35" alt="">
                        {{ Str::of($downloadable->title)->limit(100) }}
                    </a>

                    <a href="{{ asset('storage/files/'.$downloadable->file->file_name) }}" target="_blank" rel="noopener noreferrer" class="btn btn-dark" download="{{ $downloadable->file->file_name }}">Download</a>
                </li>
            @empty
                <li class="list-group-item d-flex justify-content-center py-4 bg-light">
                    <span>No downloadable documents available</span>
                </li>        
            @endforelse
        </ul>
        
        <div class="d-flex justify-content-center mt-5">
            {{ $downloadables->withQueryString()->links() }}
        </div>
    </div>
</section>
@endsection