<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'File Upload')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Forms', 'title' => 'File Upload')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Forms', 'title' => 'File Upload')) ?>

                    <div class="container">
<div class="grid grid-cols-1 gap-base">
<div class="card">
<div class="card-header block">
<h4 class="card-title mb-1.25">Dropzone</h4>
<p class="text-default-400">DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.</p>
</div>
<div class="card-body">
<form action="/" class="min-h-37.5 border-2 border-default-300 border-dashed rounded-lg p-5" data-plugin="dropzone" data-previews-container="#file-previews" data-upload-preview-template="#uploadPreviewTemplate" id="myAwesomeDropzone" method="post">
<div class="dz-message needsclick text-center my-8">
<div class="size-11 mx-auto mb-base">
<span class="btn btn-icon size-11 bg-info/15 text-info rounded-full">
<i class="iconify tabler--cloud-upload text-2xl"></i>
</span>
</div>
<h4 class="text-lg mb-3">Drop files here or click to upload.</h4>
<p class="text-default-400 italic mb-5 text-center">You can drag images here, or browse files via the button below.</p>
<div class="flex justify-center">
<button class="btn btn-sm shadow border border-default-300" type="button">Browse Images</button>
</div>
</div>
</form>
<!-- Preview -->
<div class="dropzone-previews mt-5" id="file-previews"></div>
<!-- file preview template -->
<div class="hidden" id="uploadPreviewTemplate">
<div class="card mt-1 border border-dashed border-default-300">
<div class="p-3">
<div class="flex items-center">
<div class="px-3">
<img alt="" class="size-8 rounded bg-light" data-dz-thumbnail="" src="/#"/>
</div>
<div>
<a class="font-semibold text-primary" data-dz-name="" href="javascript:void(0);"></a>
<p class="text-default-400" data-dz-size=""></p>
</div>
<div class="ms-auto">
<!-- Button -->
<a class="btn btn-sm text-danger" data-dz-remove="" href="#">
<i class="iconify tabler--x size-5 dropzone-close"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- end file preview template -->
</div>
</div>
<div class="card">
<div class="card-header block">
<h4 class="card-title mb-1.25">Filepond</h4>
<p class="text-default-400">A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.</p>
</div>
<div class="card-body">
<div class="mb-5">
<h5 class="mb-5">Basic Example</h5>
<div class="filepond-uploader">
<input class="filepond filepond-input-multiple" data-allow-reorder="true" data-max-file-size="3MB" data-max-files="5" multiple="" name="filepond" type="file"/>
</div>
</div>
<div class="mb-5">
<h5 class="mb-5">Two Grid Example</h5>
<div class="filepond-uploader two-grid">
<input class="filepond filepond-input-multiple" data-allow-reorder="true" data-max-file-size="3MB" data-max-files="5" multiple="" name="filepond" type="file"/>
</div>
</div>
<div>
<h5 class="mb-5">Three Grid Example</h5>
<div class="filepond-uploader three-grid">
<input class="filepond filepond-input-multiple" data-allow-reorder="true" data-max-file-size="3MB" data-max-files="5" multiple="" name="filepond" type="file"/>
</div>
</div>
</div>
<div class="border-t border-dashed border-default-300"></div>
<div class="card-body">
<h4 class="card-title mb-3">Profile Picture</h4>
<p class="text-default-400 mb-4">FilePond is a JavaScript library with profile picture-shaped file upload variation.</p>
<div class="grid grid-cols-2 gap-base">
<div class="col-span-1">
<div class="size-19.5">
<input accept="image/png, image/jpeg, image/gif" class="filepond filepond-input-circle rounded-full!" name="filepond" type="file"/>
</div>
</div>
<div class="col-span-1">
<div class="size-19.5">
<input accept="image/png, image/jpeg, image/gif" class="filepond filepond-input-circle rounded!" name="filepond" type="file"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>

        <!-- Dropzone Plugin Js -->
<script src="/plugins/dropzone/dropzone-min.js"></script>
<!-- Filepond Plugin Js -->
<script src="/plugins/filepond/filepond.min.js"></script>
<script src="/plugins/filepond/filepond-plugin-image-preview.min.js"></script>
<script src="/plugins/filepond/filepond-plugin-file-validate-size.min.js"></script>
<script src="/plugins/filepond/filepond-plugin-image-exif-orientation.min.js"></script>
<script src="/plugins/filepond/filepond-plugin-file-encode.min.js"></script>
<!-- File Upload Demo Js -->
<script src="/js/pages/form-fileupload.js"></script>
</body>
</html>