
<div id="image-editor-modal" class="modal modal-adaptive mobile-hidden" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">

        <c:url var="actionUrl" value="/mailing/${mailingId}/images/:id:/editRedesigned.action" />
        {{ var action = '${actionUrl}'.replace(':id:', id); }}

        <%--  !!!WARN!!! : NOT CHANGE TO <mvc:form> cuz it cause an error with url build --%>
        <s:form cssClass="modal-content" action="{{- action}}" enctype="multipart/form-data"
                data-form="static" data-controller="img-editor" data-initializer="img-editor" data-disable-controls="save">

            <input type="hidden" name="encodedFile"/>
            <div class="modal-header">
                <h1 class="modal-title"><mvc:message code="grid.mediapool.images.edit"/></h1>
                <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal">
                    <span class="sr-only"><mvc:message code="button.Cancel"/></span>
                </button>
            </div>
            <div class="modal-body pb-0">
                <div>
                    <div class="mb-3">
                        <label class="form-label" for="filename"><mvc:message code="settings.FileName"/></label>
                        <input id="filename" class="form-control" value="{{- name }}" readonly/>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="link"><mvc:message code="grid.mediapool.column.link"/></label>
                        <input id="link" class="form-control" placeholder="https://" value="{{- link}}" readonly/>
                    </div>
                    <div class="row mb-3">
                        <div class="col-6">
                            <label class="form-label" for="img-width"><mvc:message code="default.image.width"/></label>
                            <input id="img-width"
                                   type="number"
                                   value=""
                                   class="form-control"
                                   data-action="change-size"
                                   onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                                   onfocus="$(this).select()">
                        </div>
                        <div class="col-6">
                            <label class="form-label" for="img-height"><mvc:message code="grid.mediapool.image.sizes.height"/></label>
                            <input id="img-height"
                                   type="number"
                                   value=""
                                   class="form-control"
                                   data-action="change-size"
                                   onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                                   onfocus="$(this).select()">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="img-percent"><mvc:message code="default.Size"/>&nbsp;<mvc:message code="image.editor.inpercent"/></label>
                        <input id="img-percent"
                               type="number"
                               value=""
                               class="form-control"
                               data-action="change-size-via-percentage"
                               onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                               onfocus="$(this).select()">
                    </div>
                </div>

                <div class="mb-3 bordered-box">
                    <div id="canvas-editor-area" class="p-3 h-100">
                        <div style="position: relative;">
                            <canvas id="editor-canvas"></canvas>
                        </div>
                        <img class="hidden" id="editor-img" src="{{= src }}"/>
                    </div>
                </div>

                <div class="mb-3 d-flex flex-column gap-3">
                    <button type="button" class="btn btn-inverse justify-content-start" data-action="resize">
                        <i class="icon icon-expand"></i>
                        <mvc:message code="grid.resize"/>
                    </button>
                    <button type="button" class="btn btn-inverse justify-content-start" data-action="crop">
                        <i class="icon icon-crop-alt"></i>
                        <mvc:message code="image.editor.crop"/>
                    </button>
                    <button type="button" class="btn btn-inverse justify-content-start" data-action="rotate-clockwise">
                        <i class="icon icon-redo-alt"></i>
                        <mvc:message code="mediapool.image.rotate.clockwise"/>
                    </button>
                    <button type="button" class="btn btn-inverse justify-content-start" data-action="rotate-counterclockwise">
                        <i class="icon icon-undo-alt"></i>
                        <mvc:message code="mediapool.image.rotate.counterclockwise"/>
                    </button>
                    <button type="button" class="btn btn-inverse justify-content-start" data-action="flip-horizontally">
                        <i class="icon icon-grip-vertical"></i>
                        <mvc:message code="mediapool.image.flip.horizontal"/>
                    </button>
                    <button type="button" class="btn btn-inverse justify-content-start" data-action="flip-vertically">
                        <i class="icon icon-grip-horizontal"></i>
                        <mvc:message code="mediapool.image.flip.vertical"/>
                    </button>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-inverse flex-grow-1" data-form-reset data-action="reset">
                    <i class="icon icon-sync-alt"></i>
                    <mvc:message code="button.Reset"/>
                </button>
                <button type="button" class="btn btn-primary flex-grow-1" data-action="save" data-controls-group="save">
                    <i class="icon icon-save"></i>
                    <mvc:message code="button.Save"/>
                </button>
            </div>
        </s:form>
    </div>
</div>
