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

<div class="card">
	<div class="card-header">
		<h3 class="card-title">{{ $title }}</h3>
		<div class="card-tools">
			
		</div>
	</div>
	<div class="card-body pt-3 pb-0">
		@if (isset($article['id']))
			@include('components.uploader.mini-gallery')
		@endif

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

@push('js')
	<script>
		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
		});

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

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