@php
    /** @var UploadedPhoto[] $uploaded_photos */
    use WebDevEtc\BlogEtc\Models\UploadedPhoto;$uploadedPhoto = $uploaded_photos
@endphp
@extends('blogetc_admin::layouts.admin_layout')
@section('content')
    <h5>Admin - Uploaded Images</h5>

    <p>You can view all previously uploaded images here.</p>

    <p>It includes one thumbnail per photo - the smallest image is selected.</p>

    <script>
      function show_uploaded_file_row(id, img) {
        [].forEach.call(document.querySelectorAll('.' + id), function(el) {
          el.style.display = 'block';
        });
        document.getElementById(id).innerHTML = '<a href=\'' + img + '\'><img src=\'' + img +
            '\' style=\'max-width:100%; height:auto;\'></a>';
      }
    </script>
    @foreach($uploaded_photos as $uploadedPhoto)

        <div style="border-radius:15px; border:2px solid #efefef; background : #fefefe; margin: 15px;padding:15px">
            <h3>Image ID: {{$uploadedPhoto->id}}: {{$uploadedPhoto->image_title ?? "Untitled Photo"}}</h3>
            <h4>
                <small title="{{$uploadedPhoto->created_at}}">
                    Uploaded {{$uploadedPhoto->created_at->diffForHumans()}}</small>
            </h4>

            <div class="row">
                <div class="col-md-8">
                    <div class="row" style=" margin: 10px; background: #eee; overflow:auto; padding:5px;">
                                            </div>
                </div>
                <div class="col-md-4">
                    @if($smallest)
                        <div style="text-align:center;">
                            <a style="cursor: zoom-in;"
                               href="{{ asset(config("blogetc.blog_upload_dir") . "/". $smallest['filename']) }}"
                               target="_blank">
                                <img alt="" src="{{ asset(config("blogetc.blog_upload_dir") . "/". $smallest['filename']) }}"
                                     style="max-width:100%; height: auto;">
                            </a>
                        </div>

                    @else
                        <div class="alert alert-danger">
                            No image found
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endforeach

    <div class="text-center">
        {{ $uploaded_photos->links() }}
    </div>
@endsection