@extends('client.layouts.content')
	@section('content')
		<div class="row mb-4">
			<div class="col-md-8 pr-2">
				<div class="card">
					<div class="card-header bg-white">
						<h6 class="card-title mb-0"><small class="font-weight-bold text-uppercase">{{ $map->name }} ({{ $map->attachments->count() }})</small></h6>
					</div>
					<div class="card-body fixed-height-unfiltered">
						@forelse($map->attachments as $attachment)
						<div class="d-inline-block">
							<a href="#" data-target="#img-modal-{{ $attachment->id }}" data-toggle="modal"><img class="img-thumbnail hazard-maps mr-2" data-toggle="tooltip" data-title="{{ $attachment->created_at->format('F d, Y') }}" src="{{ route('Load Image', ['filename' => $attachment->filename]) }}"></a>
							<!-- <div class="text-center">asd</div> -->
							<div class="modal fade" id="img-modal-{{ $attachment->id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
								<div class="modal-dialog modal-lg modal-dialog-centered">
									<div class="modal-content">
										<div class="modal-header">
											<h5 class="modal-title">{{ $attachment->filename }}</h5>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									        	<span aria-hidden="true">&times;</span>
									        </button>
										</div>
										<div class="modal-body">
											<img src="{{ route('Load Image', ['filename' => $attachment->filename]) }}" class="w-100">
										</div>
										@if($map->remarks)
										<div class="modal-footer">
											{!! $map->remarks !!}
										</div>
										@endif
									</div>
								</div>
							</div>
						</div>
						@empty
						@endforelse
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card border-0 h-100 card-background">
					@include('client.components.weather')
					@include('client.components.earthquake')
					@include('client.components.cyclone')
				</div>
			</div>
		</div>
	@endsection