@extends('layouts.app')

@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>
                        Application Details
                    </h1>
                </div>
                <div class="col-sm-6">
                    <a class="btn btn-default float-right"
                       href="{{ route('applications.index') }}">
                                                  Back
                                            </a>
                </div>
            </div>
        </div>
    </section>

    <div class="content px-3">
    <div class="card">
            <div class="card-body">
                <div class="row">
                        @include('applications.show_fields')
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <h4>
                    Upload Details
                </h4>
            </div>
            <div class="card-body">
                <div class="row">
                        @include('applications.show_uploads')
                </div>
            </div>
        </div>
    </div>
@endsection


@push('page_css')
<!-- LightBox2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" integrity="sha512-ZKX+BvQihRJPA8CROKBhDNvoc2aDMOdAlcm7TUQY+35XYtrd3yh95QOOhsPDQY9QnKE0Wqag9y38OIgEvb88cA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
.gallery-image {
    object-fit: cover; 
    object-position: center; /* Center the image within the element */
    width: 200px;
    height: 200px;
    border-radius: 10px; 
}

.gallery-image-a {
    position: relative;
    text-align: center;
    background: black;
    padding: 1px;
    border-radius: 11px;
    margin: 5px;
}

.gallery-image-title {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: #00000080;
    color: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

</style>
@endpush

@push('page_scripts')

<!-- LightBox2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js" integrity="sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

@endpush