@include('boilerplate::load.fileinput')

@component('components.layout.box-collapse', ['id' => ($prefix ?? '') . $name ?? 'images', 'title' => $title ?? 'Photos', 'collapsed' => $collapsed ?? false])

	@include('components.uploader.mini-gallery')

	@if ($can_edit ?? true)
		<div id="{{ $prefix ?? '' }}uploader-new-images"></div>
		@include('components.uploader.block_image_new', ['name' => ($name ?? 'images') . '[]'])
	@endif

	@if ($can_edit ?? true)
		<div class="card-footer">
			<button type="button" class="btn btn-xs btn-primary {{ $prefix ?? '' }}add-image pull-right">Ajout <i class="fa fa-plus"></i></button>
		</div>
	@endif

@endcomponent

@push('js')
	<script>
		@if ($can_edit ?? true)
			function {{ $prefix ?? '' }}append_image() {
				$("#{{ $prefix ?? '' }}uploader-new-images .file").fileinput();
				$("#{{ $prefix ?? '' }}uploader-new-images .file").focus();
			}

			$("#{{ $prefix ?? '' }}uploader-new-images").appender({
				rowSection: '.{{ $prefix ?? '' }}row-new-image',
				type: '.{{ $prefix ?? '' }}row-image',
				addBtn: '.{{ $prefix ?? '' }}add-image',
				appendEffect: 'fade',
				addClass: 'animated fadeIn',
				rowNumber: '.{{ $prefix ?? '' }}row-image-number',
				deleteBtn: '.{{ $prefix ?? '' }}delete-new-image-btn',
				callback: {{ $prefix ?? '' }}append_image,
				hideSection: true
			});
		@endif

		function {{ $prefix ?? '' }}loadImages()
		{
			$gallery = $("#{{ $prefix ?? '' }}uploader-mini-gallery");
			if ($gallery) {
				$gallery.load("{{ $load_url }}", function() {
					{{ $prefix ?? '' }}handleEnlargeImages();
					{{ $prefix ?? '' }}handleDeleteImages();
				});
			}
		}

		$(function() {
			{{ $prefix ?? '' }}loadImages();
		});
	</script>
@endpush