<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="fusion_rental.InspectionPhotoField" t-inherit="web.Many2ManyBinaryField" t-inherit-mode="primary">
        <xpath expr="//t[@t-call='web.Many2ManyBinaryField.attachment_preview']" position="replace">
            <t t-call="fusion_rental.InspectionPhotoField.attachment_preview"/>
        </xpath>
    </t>

    <t t-name="fusion_rental.InspectionPhotoField.attachment_preview">
        <t t-set="editable" t-value="!props.readonly"/>
        <div t-attf-class="o_attachment o_attachment_many2many #{ editable ? 'o_attachment_editable' : '' } #{upload ? 'o_attachment_uploading' : ''}" t-att-title="file.name">
            <div class="o_attachment_wrap">
                <t t-set="ext" t-value="getExtension(file)"/>
                <t t-set="url" t-value="getUrl(file.id)"/>
                <div class="o_image_box float-start" t-att-data-tooltip="file.name">
                    <a t-if="isImage(file)" href="#" t-on-click.prevent="() => this.onClickImage(file.id)">
                        <img class="o_preview_image o_hover object-fit-cover rounded align-baseline"
                             t-attf-src="/web/image/{{ file.id }}"
                             onerror="this.src = '/web/static/img/mimetypes/image.svg'"
                             style="cursor: zoom-in;"/>
                    </a>
                    <a t-else="" t-att-href="url" aria-label="Download" download="">
                        <span class="o_image o_preview_image o_hover" t-att-data-mimetype="file.mimetype" t-att-data-ext="ext" role="img"/>
                    </a>
                </div>

                <div class="caption">
                    <a class="ml4" t-att-data-tooltip="file.name" t-att-href="url" download=""><t t-esc='file.name'/></a>
                </div>
                <div class="caption small">
                    <a class="ml4 small text-uppercase" t-att-href="url" download=""><b><t t-esc='ext'/></b></a>
                    <div t-if="editable" class="progress o_attachment_progress_bar">
                        <div class="progress-bar progress-bar-striped active" style="width: 100%">Uploading</div>
                    </div>
                </div>

                <div class="o_attachment_uploaded"><i class="text-success fa fa-check" role="img" aria-label="Uploaded" title="Uploaded"/></div>
                <div t-if="editable" class="o_attachment_delete" t-on-click.stop="() => this.onFileRemove(file.id)"><span role="img" aria-label="Delete" title="Delete">x</span></div>
            </div>
        </div>
    </t>

</templates>
