<div class="stag-popup stag-popup-md mcp-theme-1" stag-popup-key="prescription-popup-IMAGING">
    <form method="POST" action="" class="overflow-visible">
        <h3 class="stag-popup-title mb-2">
            <span>Imaging Prescription</span>
            <a href="#" class="ml-auto text-secondary"
               onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
        </h3>

        <div class="d-flex align-items-baseline">
            <span class="font-weight-bold mr-3">Test Sets</span>
            <a href="#" v-on:click.prevent="addTestSet()">Add Test Set</a>
        </div>

        <div v-for="(item, itemIndex) in currentPrescription_IMAGING.clinicalDetailJson.items" class="border bg-light px-2 pt-2 pb-1 my-2">
            <div class="row">
                <div class="col-6 pr-2">
                    <div class="d-flex align-items-baseline mb-1">
                        <span class="text-secondary mr-3">Tests</span>
                        <a href="#" v-on:click.prevent="addTest(item)">Add Test</a>
                    </div>
                    <div v-for="(test, testIndex) in item.tests" class="d-flex align-items-baseline mb-1">
                        <div class="position-relative flex-grow-1">
                            <input type="text" class="min-width-unset form-control form-control-sm" v-model="test.desc">
                        </div>
                        <a href="#" v-if="item.tests && item.tests.length > 1" v-on:click.prevent="deleteTest(item, testIndex)" class="pl-2">
                            <i class="fa fa-trash-alt text-danger on-hover-opaque"></i>
                        </a>
                        <span v-if="item.tests && item.tests.length === 1" class="pl-2">
                            <i class="fa fa-trash-alt text-secondary on-hover-opaque"></i>
                        </span>
                    </div>
                </div>
                <div class="col-6 pl-2 border-left">
                    <div class="d-flex align-items-baseline mb-1">
                        <span class="text-secondary mr-3">ICDs</span>
                        <a href="#" v-on:click.prevent="addICD(item)">Add ICD</a>
                    </div>
                    <div v-for="(icd, icdIndex) in item.icds" class="d-flex align-items-baseline mb-1">
                        <input type="text" class="min-width-unset form-control form-control-sm width-100px mr-2"
                               data-field="icd" :data-item-index="itemIndex" :data-icd-index="icdIndex" data-category="IMAGING"
                               v-model="icd.code">
                        <input type="text" class="min-width-unset form-control form-control-sm flex-grow-1" v-model="icd.desc">
                        <a href="#" v-if="item.icds && item.icds.length > 1" v-on:click.prevent="deleteICD(item, icdIndex)" class="pl-2">
                            <i class="fa fa-trash-alt text-danger on-hover-opaque"></i>
                        </a>
                        <span v-if="item.icds && item.icds.length === 1" class="pl-2">
                            <i class="fa fa-trash-alt text-secondary on-hover-opaque"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex align-items-center justify-content-center mt-3">
            <button type="button" class="btn btn-sm btn-primary mr-2" v-on:click.prevent="savePrescription()">Submit
            </button>
            <button type="button" class="btn btn-sm btn-default border" onclick="return closeStagPopup()">Cancel
            </button>
        </div>
    </form>
</div>
