<div id="filemanager" class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Image Manager</h4> <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-sm-5"> <a href="<?php echo $parent; ?>" data-toggle="tooltip" title="Parent" id="button-parent" class="btn btn-icon btn-primary"><i class="fa fa-level-up"></i></a> <a href="<?php echo $refresh; ?>" data-toggle="tooltip" title="Refresh" id="button-refresh" class="btn btn-primary btn-icon"><i class="fa fa-refresh"></i></a> <button type="button" data-toggle="tooltip" title="Upload" id="button-upload" class="btn btn-icon btn-primary"><i class="fa fa-upload"></i></button> <button type="button" data-toggle="tooltip" title="Folder" id="button-folder" class="btn btn-icon btn-primary"><i class="fa fa-folder"></i></button> <button type="button" data-toggle="tooltip" title="Delete" id="button-delete" class="btn btn-icon btn-danger"><i class="fa fa-trash"></i></button> </div>
                <div class="col-sm-7">
                    <div class="input-group"> <input type="text" name="search" value="<?php echo $filter_name; ?>" placeholder="Search" class="form-control"> <span class="input-group-append"> <button type="button" data-toggle="tooltip" title="Search" id="button-search" class="btn btn-primary"><i class="fa fa-search"></i></button> </span> </div>
                </div>
            </div>
            <hr />
            <div class="row" style="max-height:300px; overflow-y:scroll;"> <?php foreach ($images as $image) { ?> <div class="col-6 image-box" style="border:1px solid lightgrey;"> <?php if ($image['type'] == 'directory') { ?> <div class="text-center"><a href="<?php echo $image['href']; ?>" class="directory" style="vertical-align: middle;"><i class="fa fa-folder fa-5x"></i></a></div> <label> <input type="checkbox" name="path[]" value="<?php echo $image['path']; ?>" /> <?php echo $image['name']; ?></label> <?php } ?> <?php if ($image['type'] == 'image') { ?> <a href="<?php echo $image['href']; ?>" class="thumbnail"><img style="max-width: 100%;" src="<?php echo $image['thumb']; ?>" alt="<?php echo $image['name']; ?>" title="<?php echo $image['name']; ?>" /></a> <label> <input type="checkbox" name="path[]" value="<?php echo $image['path']; ?>" /> <?php echo $image['name']; ?></label> <?php } ?> </div> <?php } ?> </div> <br />
        </div>
        <div class="modal-footer"><?php echo $pagination; ?></div>
    </div>
</div>
<script type="text/javascript">
    <!--$('a.directory').on('click', function(e) {	e.preventDefault();	$('#modal-image').load($(this).attr('href'));});$('.pagination a').on('click', function(e) {	e.preventDefault();	$('#modal-image').load($(this).attr('href'));});$('#button-parent').on('click', function(e) {	e.preventDefault();	$('#modal-image').load($(this).attr('href'));});$('#button-refresh').on('click', function(e) {	e.preventDefault();	$('#modal-image').load($(this).attr('href'));});$('input[name=\'search\']').on('keydown', function(e) {	if (e.which == 13) {		$('#button-search').trigger('click');	}});$('#button-search').on('click', function(e) {	var url = '<?= base_url('filemanager') ?>?directory=<?php echo $directory; ?>';	var filter_name = $('input[name=\'search\']').val();	if (filter_name) {		url += '&filter_name=' + encodeURIComponent(filter_name);	}	<?php if ($thumb) { ?>	url += '&thumb=' + '<?php echo $thumb; ?>';	<?php } ?>	<?php if ($target) { ?>	url += '&target=' + '<?php echo $target; ?>';	<?php } ?>	$('#modal-image').load(url);});//
    -->
</script>
<script type="text/javascript">
    <!--$('#button-upload').on('click', function() {	$('#form-upload').remove();	$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" value=""  /></form>');	$('#form-upload input[name=\'file\']').trigger('click');	if (typeof timer != 'undefined') {    	clearInterval(timer);	}	timer = setInterval(function() {		if ($('#form-upload input[name=\'file\']').val() != '') {			clearInterval(timer);			$.ajax({				url: '<?= base_url('filemanager/upload') ?>?directory=<?php echo $directory; ?>',				type: 'post',				dataType: 'json',				data: new FormData($('#form-upload')[0]),				cache: false,				contentType: false,				processData: false,				beforeSend: function() {					$('#button-upload i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');					$('#button-upload').prop('disabled', true);				},				complete: function() {					$('#button-upload i').replaceWith('<i class="fa fa-upload"></i>');					$('#button-upload').prop('disabled', false);				},				success: function(json) {					if (json['error']) {						alert(json['error']);					}					if (json['success']) {						$('#button-refresh').trigger('click');					}				},				error: function(xhr, ajaxOptions, thrownError) {					alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);				}			});		}	}, 500);});$('#button-folder').popover({	html: true,	placement: 'bottom',	trigger: 'click',	title: 'Folder',	content: function() {		html  = '<div class="input-group">';		html += '  <input type="text" name="folder" value="" placeholder="Folder" class="form-control">';		html += '  <span class="input-group-btn"><button type="button" title="Folder" id="button-create" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></span>';		html += '</div>';		return html;	}});$('#button-folder').on('shown.bs.popover', function() {	$('#button-create').on('click', function() {		$.ajax({			url: '<?= base_url('filemanager/folder') ?>?directory=<?php echo $directory; ?>',			type: 'post',			dataType: 'json',			data: 'folder=' + encodeURIComponent($('input[name=\'folder\']').val()),			beforeSend: function() {				$('#button-create').prop('disabled', true);			},			complete: function() {				$('#button-create').prop('disabled', false);			},			success: function(json) {				if (json['error']) {					alert(json['error']);				}				if (json['success']) {					$('#button-refresh').trigger('click');				}			},			error: function(xhr, ajaxOptions, thrownError) {				alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);			}		});	});});$('#modal-image #button-delete').on('click', function(e) {	if (confirm('Are you sure?')) {		$.ajax({			url: '<?= base_url('filemanager/delete') ?>',			type: 'post',			dataType: 'json',			data: $('input[name^=\'path\']:checked'),			beforeSend: function() {$('#button-delete').prop('disabled', true);},			complete: function() {$('#button-delete').prop('disabled', false);},			success: function(json) {				if (json['error']) {					alert(json['error']);				}				if (json['success']) {					$('#button-refresh').trigger('click');				}			},			error: function(xhr, ajaxOptions, thrownError) {				alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);			}		});	}});//
    -->
</script>