<commit_before><template>
    <div class="SharpUpload" :class="classes">
        <div> <!-- keep content div to allow dropzone events (vue-clip) -->
            <template v-if="file">
                <div class="card card-body SharpUpload__card" :class="{ 'border-danger': hasError }">
                    <div :class="{ 'row': showThumbnail }">
                        <template v-if="showThumbnail">
                            <div class="SharpUpload__thumbnail" :class="[compactThumbnail?'col-4 col-sm-3 col-xl-2':'col-4 col-md-4']">
                                <img :src="imageSrc" alt="">
                            </div>
                        </template>

                        <div class="SharpUpload__infos" :class="{[compactThumbnail?'col-8 col-sm-9 col-xl-10':'col-8 col-md-8']:showThumbnail}">
                            <div class="mb-3">
                                <label class="SharpUpload__filename text-truncate d-block">{{ fileName }}</label>
                                <div class="SharpUpload__info mt-2">
                                    <div class="row g-2">
                                        <template v-if="size">
                                            <div class="col-auto">{{ size }}</div>
                                        </template>
                                        <template v-if="hasDownload">
                                            <div class="col-auto">
                                                <a class="SharpUpload__download-link" :href="downloadUrl" :download="fileName">
                                                    <i class="fas fa-download"></i>
                                                    {{ l('form.upload.download_link') }}
                                                </a>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <transition name="SharpUpload__progress">
                                    <template v-if="inProgress">
                                        <div class="SharpUpload__progress mt-2">
                                            <div class="SharpUpload__progress-bar" role="progressbar" :style="{width:`${progress}%`}"
                                                :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </template>
                                </transition>
                            </div>
                            <template v-if="!readOnly">
                                <div>
                                    <template v-if="hasEdit && !hasError">
                                        <Button outline small @click="handleEditButtonClick">
                                            {{ l('form.upload.edit_button') }}
                                        </Button>
                                    </template>
                                    <Button class="SharpUpload__remove-button" variant="danger" outline small @click="handleRemoveClicked">
                                        {{ l('form.upload.remove_button') }}
                                    </Button>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </template>
            <template v-else>
                <Button class="SharpUpload__browse dz-message" text block :disabled="readOnly" type="button" @click="handleClick">
                    {{ l('form.upload.browse_button') }}
                </Button>
            </template>
            <div ref="clip-preview-template" class="clip-preview-template" style="display: none;">
                <div></div>
            </div>
        </div>

        <EditModal
            :value="value"
            :visible.sync="showEditModal"
            :src="originalImageSrc"
            :transform-original="transformOriginal"
            :ratio-x="ratioX"
            :ratio-y="ratioY"
            @submit="handleEditSubmitted"
            ref="modal"
        />

        <template v-if="hasInitialTransform">
            <vue-cropper
                class="d-none"
                :src="originalImageSrc"
                :aspect-ratio="ratioX/ratioY"
                :auto-crop-area="1"
                :ready="onCropperReady"
                ref="cropper"
            />
        </template>

        <a style="display: none" ref="dlLink"></a>
    </div>
</template>

<script>
    import VueClip from 'vue-clip/src/components/Clip';
    import VueCropper from 'vue-cropperjs';

    import { Button } from 'sharp-ui';
    import { Localization } from 'sharp/mixins';
    import { filesizeLabel, getErrorMessage, handleErrorAlert, logError } from 'sharp';

    import { downloadFileUrl } from "../../../api";
    import { getFiltersFromCropData } from "./util/filters";
    import EditModal from "./EditModal";

    export default {
        name: 'SharpVueClip',

        extends: VueClip,

        components: {
            EditModal,
            VueCropper,
            Button,
        },

        inject: {
            $form: {
                default: null,
            },
        },

        mixins: [ Localization ],

        props: {
            ratioX: Number,
            ratioY: Number,
            value: Object,
            transformable: {
                type: Boolean,
                default: true,
            },
            transformableFileTypes: Array,
            transformOriginal: Boolean,

            readOnly: Boolean,
            root: Boolean,
            compactThumbnail: Boolean,
            focused: Boolean,
            uniqueIdentifier: String,
            fieldConfigIdentifier: String,
        },

        data() {
            return {
                showEditModal: false,
                transformedImg: null,
            }
        },
        watch: {
            value(value) {
                if(!value) {
                    this.files = [];
                }
            },
            'file.status'(status) {
                (status in this.statusFunction) && this[this.statusFunction[status]]();
            },
        },
        computed: {
            classes() {
                return {
                    'SharpUpload--empty': !this.file,<commit_msg>rename transformOriginal into transformKeepOriginal<commit_after><template>
    <div class="SharpUpload" :class="classes">
        <div> <!-- keep content div to allow dropzone events (vue-clip) -->
            <template v-if="file">
                <div class="card card-body SharpUpload__card" :class="{ 'border-danger': hasError }">
                    <div :class="{ 'row': showThumbnail }">
                        <template v-if="showThumbnail">
                            <div class="SharpUpload__thumbnail" :class="[compactThumbnail?'col-4 col-sm-3 col-xl-2':'col-4 col-md-4']">
                                <img :src="imageSrc" alt="">
                            </div>
                        </template>

                        <div class="SharpUpload__infos" :class="{[compactThumbnail?'col-8 col-sm-9 col-xl-10':'col-8 col-md-8']:showThumbnail}">
                            <div class="mb-3">
                                <label class="SharpUpload__filename text-truncate d-block">{{ fileName }}</label>
                                <div class="SharpUpload__info mt-2">
                                    <div class="row g-2">
                                        <template v-if="size">
                                            <div class="col-auto">{{ size }}</div>
                                        </template>
                                        <template v-if="hasDownload">
                                            <div class="col-auto">
                                                <a class="SharpUpload__download-link" :href="downloadUrl" :download="fileName">
                                                    <i class="fas fa-download"></i>
                                                    {{ l('form.upload.download_link') }}
                                                </a>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <transition name="SharpUpload__progress">
                                    <template v-if="inProgress">
                                        <div class="SharpUpload__progress mt-2">
                                            <div class="SharpUpload__progress-bar" role="progressbar" :style="{width:`${progress}%`}"
                                                :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </template>
                                </transition>
                            </div>
                            <template v-if="!readOnly">
                                <div>
                                    <template v-if="hasEdit && !hasError">
                                        <Button outline small @click="handleEditButtonClick">
                                            {{ l('form.upload.edit_button') }}
                                        </Button>
                                    </template>
                                    <Button class="SharpUpload__remove-button" variant="danger" outline small @click="handleRemoveClicked">
                                        {{ l('form.upload.remove_button') }}
                                    </Button>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </template>
            <template v-else>
                <Button class="SharpUpload__browse dz-message" text block :disabled="readOnly" type="button" @click="handleClick">
                    {{ l('form.upload.browse_button') }}
                </Button>
            </template>
            <div ref="clip-preview-template" class="clip-preview-template" style="display: none;">
                <div></div>
            </div>
        </div>

        <EditModal
            :value="value"
            :visible.sync="showEditModal"
            :src="originalImageSrc"
            :transform-original="transformKeepOriginal"
            :ratio-x="ratioX"
            :ratio-y="ratioY"
            @submit="handleEditSubmitted"
            ref="modal"
        />

        <template v-if="hasInitialTransform">
            <vue-cropper
                class="d-none"
                :src="originalImageSrc"
                :aspect-ratio="ratioX/ratioY"
                :auto-crop-area="1"
                :ready="onCropperReady"
                ref="cropper"
            />
        </template>

        <a style="display: none" ref="dlLink"></a>
    </div>
</template>

<script>
    import VueClip from 'vue-clip/src/components/Clip';
    import VueCropper from 'vue-cropperjs';

    import { Button } from 'sharp-ui';
    import { Localization } from 'sharp/mixins';
    import { filesizeLabel, getErrorMessage, handleErrorAlert, logError } from 'sharp';

    import { downloadFileUrl } from "../../../api";
    import { getFiltersFromCropData } from "./util/filters";
    import EditModal from "./EditModal";

    export default {
        name: 'SharpVueClip',

        extends: VueClip,

        components: {
            EditModal,
            VueCropper,
            Button,
        },

        inject: {
            $form: {
                default: null,
            },
        },

        mixins: [ Localization ],

        props: {
            ratioX: Number,
            ratioY: Number,
            value: Object,
            transformable: {
                type: Boolean,
                default: true,
            },
            transformableFileTypes: Array,
            transformKeepOriginal: Boolean,

            readOnly: Boolean,
            root: Boolean,
            compactThumbnail: Boolean,
            focused: Boolean,
            uniqueIdentifier: String,
            fieldConfigIdentifier: String,
        },

        data() {
            return {
                showEditModal: false,
                transformedImg: null,
            }
        },
        watch: {
            value(value) {
                if(!value) {
                    this.files = [];
                }
            },
            'file.status'(status) {
                (status in this.statusFunction) && this[this.statusFunction[status]]();
            },
        },
        computed: {
            classes() {
                return {
                    'SharpUpload--empty': !this.file,
{'fraction_non_alphanumeric': 0.11448741559238797, 'fraction_numerical': 0.003069367710251688, 'mean_word_length': 1.0112654320987655, 'pattern_counts': {'":': 0, '<': 149, '<?xml version=': 0, '>': 149, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 94, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2555933', 'n_tokens_mistral': 3055, 'n_tokens_neox': 2865, 'n_words': 550}