<script src="app/js/cropper.min.js"></script>
<link rel="stylesheet" href="app/css/cropper.min.css">

<section id="cropper-main" class="px-3">
    <div id="cropper-imagecontainer">
        <img id="cropper-image" src="<?= getcompletefilepath($_POST['source'],true); ?>" alt="Cropping tool">
    </div>
    <div id="cropper-tools">
        <div class="cropper-icon cropper-rotate mb-3" data-angle="90"><img src="app/images/arrow-clockwise.svg"></div>
        <div class="cropper-icon cropper-rotate" data-angle="-90"><img src="app/images/arrow-counterclockwise.svg"></div>

        <form id="yc-form">
            <input type="hidden" name="source" value="<?= $_POST['source'] ?>">
            <input type="hidden" name="extension" value="<?php 
    echo strtolower(pathinfo($_POST['source'], PATHINFO_EXTENSION));
                                                         ?>">
            <input type="hidden" name="type" value="image">
            <input type="hidden" name="item" value="<?= $_POST['item'] ?>">

            <div class="mt-5" role="group" aria-label="Third group">
                <button id="cropper-submit" type="button" class="btn btn-success">OK</button>
            </div>
        </form>
    </div>
</section>
<script>




</script>