<div class="px-3 pt-3 pb-2 bg-light">
    <div class="row mb-2">
        <div class="col-12">
            <label class="text-secondary mb-0 font-weight-normal font-size-16 d-flex align-items-center">
                Attachments
                (<span
                    v-html="<?=$category?>PopupItem.data.attachments && <?=$category?>PopupItem.data.attachments.length ? <?=$category?>PopupItem.data.attachments.length : '0'"></span>)
                <a href="#" class="ml-auto" v-on:click.prevent="toggleAddingReport()">Add from Reports</a>
            </label>
        </div>
    </div>
    <div class="mb-3" v-if="addingReport">
        <div v-for="(report) in reports" class="d-flex align-items-start py-1 border-bottom">
            <div v-if="report.hcp_pro_id" class="pro-initials pro-initials-sm text-uppercase mr-2"
                 :title="allProsFlat['pro_' + report.hcp_pro_id].displayedName"
                 :style="'background-color: ' + allProsFlat['pro_' + report.hcp_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + report.hcp_pro_id].colors.fc + ';'"
                 v-html="allProsFlat['pro_' + report.hcp_pro_id].displayedInitials">
            </div>
            <div v-if="!report.hcp_pro_id" class="pro-initials pro-initials-sm text-uppercase mr-2"
                 title="HCP not set"
                 style="background-color: #eee; color: #666">&hellip;</div>
            <div class="flex-grow-1">
                <div class="d-flex align-items-center">
                    <a class="pdf-viewer-trigger" native target="_blank"
                       :href="'/api/incomingReport/download/' + report.uid"
                       title="View">
                        <span v-if="report.title" v-html="report.title"></span>
                    </a>
                    <a class="ml-auto" native target="_blank" href="#"
                       v-if="!<?=$category?>PopupItem.data.attachments || <?=$category?>PopupItem.data.attachments.filter(_x => _x.uid === report.uid).length === 0"
                       v-on:click.prevent="addReportToItem(<?=$category?>PopupItem, report)">Add to ticket</a>
                    <span class="ml-auto text-secondary"
                       v-if="<?=$category?>PopupItem.data.attachments && <?=$category?>PopupItem.data.attachments.filter(_x => _x.uid === report.uid).length !== 0"
                       title="View">
                        <i class="fa fa-check"></i>
                        Added
                    </span>
                </div>
            </div>
        </div>
        <div class="adding-report-section"></div>
    </div>
    <div
        v-if="!addingReport && <?=$category?>PopupMode === 'edit' && <?=$category?>PopupItem.data.attachments && <?=$category?>PopupItem.data.attachments.length"
        class="py-2 bg-light">
        <div v-for="(attachment) in <?=$category?>PopupItem.data.attachments" class="d-flex align-items-start pb-2">
            <div v-if="attachment.hcp_pro_id" class="pro-initials pro-initials-sm text-uppercase mr-2"
                 :title="allProsFlat['pro_' + attachment.hcp_pro_id].displayedName"
                 :style="'background-color: ' + allProsFlat['pro_' + attachment.hcp_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + attachment.hcp_pro_id].colors.fc + ';'"
                 v-html="allProsFlat['pro_' + attachment.hcp_pro_id].displayedInitials">
            </div>
            <div v-if="!attachment.hcp_pro_id" class="pro-initials pro-initials-sm text-uppercase mr-2"
                 title="HCP not set"
                 style="background-color: #eee; color: #666">&hellip;</div>
            <div class="flex-grow-1">
                <div class="d-flex align-items-center">
                    <a class="pdf-viewer-trigger" native target="_blank"
                       :href="'/api/incomingReport/download/' + attachment.uid"
                       title="View">
                        <span v-if="attachment.title" v-html="attachment.title"></span>
                    </a>
                    <a class="text-warning-mellow ml-auto" native target="_blank" href="#"
                       v-on:click.prevent="removeAttachmentFromItem(<?=$category?>PopupItem, attachment)">Remove from ticket</a>
                </div>
            </div>
        </div>
        <div class="listing-attachments-section"></div>
    </div>
</div>
