- var theme_customizer      = true;
- var tooltip               = true;
- var image_cropper         = true;

doctype html
html(lang='en')
    include ../../components/header-files
    body
        include ../../components/loader
        // page-wrapper Start
        #pageWrapper.page-wrapper.compact-wrapper
            include ../../components/header
            // Page Body Start
            .page-body-wrapper.sidebar-icon
                include ../../components/sidebar
                .page-body
                    .container-fluid
                        .page-header
                            .row
                                .col-lg-6
                                    h3
                                      | Image Cropper
                                    ol.breadcrumb
                                      li.breadcrumb-item
                                        a(href='index.html')
                                         i(data-feather="home")
                                      li.breadcrumb-item Bonus Ui
                                      li.breadcrumb-item.active Image Cropper
                                .col-lg-6
                                    include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                      .img-cropper
                        .row
                          .col-sm-12
                            .card
                              .card-header
                                h5 Image Cropper
                              .card-body
                                .row
                                  .col-xl-9.col-md-12
                                    .img-container
                                      img#image(src='../assets/images/other-images/img-cropper.jpg', alt='Picture')
                                  .col-xl-3.col-md-12
                                    // <h3>Preview:</h3>
                                    .docs-preview.clearfix
                                      // <div class="img-preview preview-lg"></div>
                                      .img-preview.preview-md
                                      .img-preview.preview-sm
                                      .img-preview.preview-xs
                                    // <h3>Data:</h3>
                                    .docs-data
                                      .input-group.input-group-sm
                                        span.input-group-prepend
                                          label.input-group-text(for='dataX') X
                                        input#dataX.form-control.digits(type='text', placeholder='x')
                                        span.input-group-append
                                          span.input-group-text px
                                      .input-group.input-group-sm
                                        span.input-group-prepend
                                          label.input-group-text(for='dataY') Y
                                        input#dataY.form-control.digits(type='text', placeholder='y')
                                        span.input-group-append
                                          span.input-group-text px
                                      .input-group.input-group-sm
                                        span.input-group-prepend
                                          label.input-group-text(for='dataWidth') Width
                                        input#dataWidth.form-control.digits(type='text', placeholder='width')
                                        span.input-group-append
                                          span.input-group-text px
                                      .input-group.input-group-sm
                                        span.input-group-prepend
                                          label.input-group-text(for='dataHeight') Height
                                        input#dataHeight.form-control.digits(type='text', placeholder='height')
                                        span.input-group-append
                                          span.input-group-text px
                                      .input-group.input-group-sm
                                        span.input-group-prepend
                                          label.input-group-text(for='dataRotate') Rotate
                                        input#dataRotate.form-control.digits(type='text', placeholder='rotate')
                                        span.input-group-append
                                          span.input-group-text deg
                                      .input-group.input-group-sm
                                        span.input-group-prepend
                                          label.input-group-text(for='dataScaleX') ScaleX
                                        input#dataScaleX.form-control.digits(type='text', placeholder='scaleX')
                                      .input-group.input-group-sm
                                        span.input-group-prepend
                                          label.input-group-text(for='dataScaleY') ScaleY
                                        input#dataScaleY.form-control.digits(type='text', placeholder='scaleY')
                            .card
                              .card-body
                                .row
                                  .col-xl-9.col-md-12.docs-buttons
                                    .btn-group
                                      button.btn.btn-primary(type='button', data-method='setDragMode', data-option='move', title='Move')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("setDragMode", "move")')
                                          span.fa.fa-arrows
                                      button.btn.btn-primary(type='button', data-method='setDragMode', data-option='crop', title='Crop')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("setDragMode", "crop")')
                                          span.fa.fa-crop
                                    .btn-group
                                      button.btn.btn-primary(type='button', data-method='zoom', data-option='0.1', title='Zoom In')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("zoom", 0.1)')
                                          span.fa.fa-search-plus
                                      button.btn.btn-primary(type='button', data-method='zoom', data-option='-0.1', title='Zoom Out')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("zoom", -0.1)')
                                          span.fa.fa-search-minus
                                    .btn-group
                                      button.btn.btn-outline-primary(type='button', data-method='move', data-option='-10', data-second-option='0', title='Move Left')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("move", -10, 0)')
                                          span.fa.fa-arrow-left
                                      button.btn.btn-outline-primary(type='button', data-method='move', data-option='10', data-second-option='0', title='Move Right')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("move", 10, 0)')
                                          span.fa.fa-arrow-right
                                      button.btn.btn-outline-primary(type='button', data-method='move', data-option='0', data-second-option='-10', title='Move Up')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("move", 0, -10)')
                                          span.fa.fa-arrow-up
                                      button.btn.btn-outline-primary(type='button', data-method='move', data-option='0', data-second-option='10', title='Move Down')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("move", 0, 10)')
                                          span.fa.fa-arrow-down
                                    .btn-group
                                      button.btn.btn-outline-primary(type='button', data-method='rotate', data-option='-45', title='Rotate Left')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("rotate", -45)')
                                          span.fa.fa-rotate-left
                                      button.btn.btn-outline-primary(type='button', data-method='rotate', data-option='45', title='Rotate Right')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("rotate", 45)')
                                          span.fa.fa-rotate-right
                                    .btn-group
                                      button.btn.btn-outline-primary(type='button', data-method='scaleX', data-option='-1', title='Flip Horizontal')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("scaleX", -1)')
                                          span.fa.fa-arrows-h
                                      button.btn.btn-outline-primary(type='button', data-method='scaleY', data-option='-1', title='Flip Vertical')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("scaleY", -1)')
                                          span.fa.fa-arrows-v
                                    .btn-group
                                      button.btn.btn-outline-primary(type='button', data-method='crop', title='Crop')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("crop")')
                                          span.fa.fa-check
                                      button.btn.btn-outline-primary(type='button', data-method='clear', title='Clear')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("clear")')
                                          span.fa.fa-remove
                                    .btn-group
                                      button.btn.btn-outline-primary(type='button', data-method='disable', title='Disable')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("disable")')
                                          span.fa.fa-lock
                                      button.btn.btn-outline-primary(type='button', data-method='enable', title='Enable')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("enable")')
                                          span.fa.fa-unlock
                                    .btn-group
                                      button.btn.btn-outline-primary(type='button', data-method='reset', title='Reset')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("reset")')
                                          span.fa.fa-refresh
                                      label.btn.btn-outline-primary.btn-upload(for='inputImage', title='Upload image file')
                                        input#inputImage.sr-only(type='file', name='file', accept='.jpg,.jpeg,.png,.gif,.bmp,.tiff')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='Import image with Blob URLs')
                                          span.fa.fa-upload
                                      button.btn.btn-outline-primary(type='button', data-method='destroy', title='Destroy')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("destroy")')
                                          span.fa.fa-power-off
                                    br
                                    .btn-group.btn-group-crop
                                      button.btn.btn-primary(type='button', data-method='getCroppedCanvas', data-option='{ "maxWidth": 4096, "maxHeight": 4096 }')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("getCroppedCanvas", { maxWidth: 4096, maxHeight: 4096 })')
                                          | Get Cropped Canvas
                                      button.btn.btn-primary(type='button', data-method='getCroppedCanvas', data-option='{ "width": 160, "height": 90 }')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("getCroppedCanvas", { width: 160, height: 90 })')
                                          | 160×90
                                      button.btn.btn-primary(type='button', data-method='getCroppedCanvas', data-option='{ "width": 320, "height": 180 }')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("getCroppedCanvas", { width: 320, height: 180 })')
                                          | 320×180
                                    // Show the cropped image in modal
                                    #getCroppedCanvasModal.modal.fade.docs-cropped(aria-hidden='true', aria-labelledby='getCroppedCanvasTitle', role='dialog', tabindex='-1')
                                      .modal-dialog
                                        .modal-content
                                          .modal-header
                                            h5#getCroppedCanvasTitle.modal-title Cropped
                                            button.close(type='button', data-dismiss='modal', aria-label='Close')
                                              span(aria-hidden='true') ×
                                          .modal-body
                                          .modal-footer
                                            button.btn.btn-primary(type='button', data-dismiss='modal') Close
                                            a#download.btn.btn-outline-primary(href='javascript:void(0);', download='cropped.jpg') Download
                                    // /.modal
                                    button.btn.btn-primary(type='button', data-method='getData', data-option='', data-target='#putData')
                                      span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("getData")')
                                        | Get Data
                                    button.btn.btn-primary(type='button', data-method='setData', data-target='#putData')
                                      span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("setData", data)')
                                        | Set Data
                                    button.btn.btn-primary(type='button', data-method='getContainerData', data-option='', data-target='#putData')
                                      span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("getContainerData")')
                                        | Get Container Data
                                    button.btn.btn-primary(type='button', data-method='getImageData', data-option='', data-target='#putData')
                                      span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("getImageData")')
                                        | Get Image Data
                                    button.btn.btn-primary(type='button', data-method='getCanvasData', data-option='', data-target='#putData')
                                      span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("getCanvasData")')
                                        | Get Canvas Data
                                    button.btn.btn-primary(type='button', data-method='setCanvasData', data-target='#putData')
                                      span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("setCanvasData", data)')
                                        | Set Canvas Data
                                    button.btn.btn-primary(type='button', data-method='getCropBoxData', data-option='', data-target='#putData')
                                      span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("getCropBoxData")')
                                        | Get Crop Box Data
                                    button.btn.btn-primary(type='button', data-method='setCropBoxData', data-target='#putData')
                                      span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='$().cropper("setCropBoxData", data)')
                                        | Set Crop Box Data
                                    button.btn.btn-primary(type='button', data-method='moveTo', data-option='0')
                                      span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='cropper.moveTo(0)')
                                        | Move to [0,0]
                                    button.btn.btn-primary(type='button', data-method='zoomTo', data-option='1')
                                      span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='cropper.zoomTo(1)')
                                        | Zoom to 100%
                                    button.btn.btn-primary(type='button', data-method='rotateTo', data-option='180')
                                      span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='cropper.rotateTo(180)')
                                        | Rotate 180°
                                    button.btn.btn-primary(type='button', data-method='scale', data-option='-2', data-second-option='-1')
                                      span.docs-tooltip(data-toggle='tooltip', title='cropper.scale(-2, -1)')
                                        | Scale (-2, -1)
                                    textarea#putData.form-control(rows='1', placeholder='Get data to here or set data with this value')
                                  // /.docs-buttons
                                  .col-xl-3.col-md-12.docs-toggles
                                    // <h3>Toggles:</h3>
                                    .btn-group.d-flex.flex-nowrap(data-toggle='buttons')
                                      label.btn.btn-primary.active
                                        input#aspectRatio0.sr-only(type='radio', name='aspectRatio', value='1.7777777777777777')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='aspectRatio: 16 / 9')
                                          | 16:9
                                      label.btn.btn-outline-primary
                                        input#aspectRatio1.sr-only(type='radio', name='aspectRatio', value='1.3333333333333333')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='aspectRatio: 4 / 3')
                                          | 4:3
                                      label.btn.btn-outline-primary
                                        input#aspectRatio2.sr-only(type='radio', name='aspectRatio', value='1')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='aspectRatio: 1 / 1')
                                          | 1:1
                                      label.btn.btn-outline-primary
                                        input#aspectRatio3.sr-only(type='radio', name='aspectRatio', value='0.6666666666666666')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='aspectRatio: 2 / 3')
                                          | 2:3
                                      label.btn.btn-outline-primary
                                        input#aspectRatio4.sr-only(type='radio', name='aspectRatio', value='NaN')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='aspectRatio: NaN')
                                          | Free
                                    .btn-group.d-flex.flex-nowrap(data-toggle='buttons')
                                      label.btn.btn-primary.active
                                        input#viewMode0.sr-only(type='radio', name='viewMode', value='0', checked='')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='View Mode 0')
                                          | VM0
                                      label.btn.btn-outline-primary
                                        input#viewMode1.sr-only(type='radio', name='viewMode', value='1')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='View Mode 1')
                                          | VM1
                                      label.btn.btn-outline-primary
                                        input#viewMode2.sr-only(type='radio', name='viewMode', value='2')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='View Mode 2')
                                          | VM2
                                      label.btn.btn-outline-primary
                                        input#viewMode3.sr-only(type='radio', name='viewMode', value='3')
                                        span.docs-tooltip(data-toggle='tooltip', data-animation='false', title='View Mode 3')
                                          | VM3
                                    .dropdown.dropup.docs-options.mb-0
                                      button#toggleOptions.btn.btn-primary.btn-block.dropdown-toggle(type='button', data-toggle='dropdown', aria-expanded='true')
                                        | Toggle Options
                                        span.caret
                                      ul.dropdown-menu(aria-labelledby='toggleOptions', role='menu')
                                        li.dropdown-item
                                          .form-check
                                            input#responsive.form-check-input(type='checkbox', name='responsive', checked='')
                                            label.form-check-label(for='responsive') responsive
                                        li.dropdown-item
                                          .form-check
                                            input#restore.form-check-input(type='checkbox', name='restore', checked='')
                                            label.form-check-label(for='restore') restore
                                        li.dropdown-item
                                          .form-check
                                            input#checkCrossOrigin.form-check-input(type='checkbox', name='checkCrossOrigin', checked='')
                                            label.form-check-label(for='checkCrossOrigin') checkCrossOrigin
                                        li.dropdown-item
                                          .form-check
                                            input#checkOrientation.form-check-input(type='checkbox', name='checkOrientation', checked='')
                                            label.form-check-label(for='checkOrientation') checkOrientation
                                        li.dropdown-item
                                          .form-check
                                            input#modal.form-check-input(type='checkbox', name='modal', checked='')
                                            label.form-check-label(for='modal') modal
                                        li.dropdown-item
                                          .form-check
                                            input#guides.form-check-input(type='checkbox', name='guides', checked='')
                                            label.form-check-label(for='guides') guides
                                        li.dropdown-item
                                          .form-check
                                            input#center.form-check-input(type='checkbox', name='center', checked='')
                                            label.form-check-label(for='center') center
                                        li.dropdown-item
                                          .form-check
                                            input#highlight.form-check-input(type='checkbox', name='highlight', checked='')
                                            label.form-check-label(for='highlight') highlight
                                        li.dropdown-item
                                          .form-check
                                            input#background.form-check-input(type='checkbox', name='background', checked='')
                                            label.form-check-label(for='background') background
                                        li.dropdown-item
                                          .form-check
                                            input#autoCrop.form-check-input(type='checkbox', name='autoCrop', checked='')
                                            label.form-check-label(for='autoCrop') autoCrop
                                        li.dropdown-item
                                          .form-check
                                            input#movable.form-check-input(type='checkbox', name='movable', checked='')
                                            label.form-check-label(for='movable') movable
                                        li.dropdown-item
                                          .form-check
                                            input#rotatable.form-check-input(type='checkbox', name='rotatable', checked='')
                                            label.form-check-label(for='rotatable') rotatable
                                        li.dropdown-item
                                          .form-check
                                            input#scalable.form-check-input(type='checkbox', name='scalable', checked='')
                                            label.form-check-label(for='scalable') scalable
                                        li.dropdown-item
                                          .form-check
                                            input#zoomable.form-check-input(type='checkbox', name='zoomable', checked='')
                                            label.form-check-label(for='zoomable') zoomable
                                        li.dropdown-item
                                          .form-check
                                            input#zoomOnTouch.form-check-input(type='checkbox', name='zoomOnTouch', checked='')
                                            label.form-check-label(for='zoomOnTouch') zoomOnTouch
                                        li.dropdown-item
                                          .form-check
                                            input#zoomOnWheel.form-check-input(type='checkbox', name='zoomOnWheel', checked='')
                                            label.form-check-label(for='zoomOnWheel') zoomOnWheel
                                        li.dropdown-item
                                          .form-check
                                            input#cropBoxMovable.form-check-input(type='checkbox', name='cropBoxMovable', checked='')
                                            label.form-check-label(for='cropBoxMovable') cropBoxMovable
                                        li.dropdown-item
                                          .form-check
                                            input#cropBoxResizable.form-check-input(type='checkbox', name='cropBoxResizable', checked='')
                                            label.form-check-label(for='cropBoxResizable') cropBoxResizable
                                        li.dropdown-item
                                          .form-check
                                            input#toggleDragModeOnDblclick.form-check-input(type='checkbox', name='toggleDragModeOnDblclick', checked='')
                                            label.form-check-label(for='toggleDragModeOnDblclick') toggleDragModeOnDblclick
                                    // /.dropdown
                                    // /.docs-toggles
                            .row
                              .col-md-6
                                .card
                                  .card-header
                                    h5 Disabled Zoom
                                  .card-body
                                    .img-container
                                      img.crop-zoomable.img-fluid(src='../assets/images/other-images/img-cropper.jpg', alt='')
                              .col-md-6
                                .card
                                  .card-header
                                    h5 Autocrop Disable
                                  .card-body
                                    .img-container
                                      img.crop-auto.img-fluid(src='../assets/images/other-images/img-cropper.jpg', alt='')
                              .col-md-6
                                .card
                                  .card-header
                                    h5 Disabled Image Drag
                                  .card-body
                                    .img-container
                                      img.crop-drag.img-fluid(src='../assets/images/other-images/img-cropper.jpg', alt='')
                              .col-md-6
                                .card
                                  .card-header
                                    h5 Minimum Zone Size
                                  .card-body
                                    .img-container
                                      img.crop-min.img-fluid(src='../assets/images/other-images/img-cropper.jpg', alt='')
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files
