{{ R.js('helpers') }}


<div class="col-xs-5 col-sm-5">
    <div class="base-box">
        <h1>ADD IMAGE</h1>

        <div>

            <div id="randomCrop"  data-moussabind="moussajax.moussaDropnCrop"
                 data-url="{{ R.url('ajaxSaveDropImage',{'context' : 'Intranet'}) }}"
                 data-entity="Randwork"
                    {#data-resultWidth="675"#}
                    {#data-resultHeight="460"#}
                 data-imageMask="medias/category-crop-mask.png"
                 data-inputprefix="save-image"
                 class="border-dashed randomCrop">
            </div>
        </div>



        <div>

            <div id="randomCropMobile"   data-moussabind="moussajax.moussaDropnCrop"
                 data-url="{{ R.url('ajaxSaveDropImage',{'context' : 'Intranet'}) }}"
                 data-entity="Randwork"
                    {#data-resultWidth="675"#}
                    {#data-resultHeight="460"#}
                    {#data-imageMask="medias/category-crop-mask.png"#}
                 data-resultratio="1.8"
                 data-inputprefix="mobile"
                 class="border-dashed randomCrop">
            </div>
        </div>


        <h4><span class=" label label-info">Drag your photo <span class="badge">1350px X 920px</span>
                    </span></h4>

        <div class="drag-zone">

            <img style="display: none;width: 878px " src="{{ media.url }}" id='imgToCropFirst'
                 class="cropimg"/>

            <p class="text-danger"></p>
            <form id="save-image" data-entity="RandWork" data-moussabind="moussajax.moussaForm"
                  data-refresh-url="{{ R.url('randomWorksImg') }}">

                <input id="RandWorkId" type="hidden" value="false" name="RandWorkId">
                <input id="save-imagerecropMediaId" type="hidden" value="false" name="recropMediaId">

                <input id="save-imageh" type="hidden" value="false" name="h">
                <input id="s" type="hidden" value="ustepslkdsj" name="prefix">
                <input id="save-imagew" type="hidden" value="false" name="w">
                <input id="save-imagex" type="hidden" value="false" name="x">
                <input id="save-imagey" type="hidden" value="false" name="y">
                <input id="save-imagetempMediaId" type="hidden" value="false" name="tempMediaId">

                <input id="mobilerecropMediaId" type="hidden" value="false" name="mobilerecropMediaId">
                <input id="mobileh" type="hidden" value="false" name="mobileh">
                <input id="mobilew" type="hidden" value="false" name="mobilew">
                <input id="mobilex" type="hidden" value="false" name="mobilex">
                <input id="mobiley" type="hidden" value="false" name="mobiley">
                <input id="mobiletempMediaId" type="hidden" value="false" name="mobiletempMediaId">


                <button class="btn btn-default btn-success" aria-label="Left Align" data-ajax-form="save-image"
                        type="button" id="btn-save-img" style="display:none">


                    Save
                </button>
            </form>
        </div>


        <input id="homeId" type="hidden" value="" name="homeId">

    </div>


</div>

<div class="col-xs-7 col-sm-7">
    <div class="base-box">
        <h1>RANDOM IMAGE</h1>
        <div id="rand-work-images">

            {% include 'Intranet/Work/randomWorksImg.php.twig' %}
        </div>
    </div>

</div>