<div class="p-3 border-bottom">

    <div v-if="<?=$category?>PopupMode === 'edit'">
        <div class="row mb-2">
            <div class="col-3 d-inline-flex align-items-center">
                <label class="text-secondary m-0">Assigned Pro</label>
            </div>
            <div class="col-9">
                <div class="d-flex align-items-center">
                    <div class="pro-initials text-uppercase"
                         :title="allProsFlat['pro_' + <?=$category?>PopupItem.assigned_pro_id].displayedName"
                         :style="'background-color: ' + allProsFlat['pro_' + <?=$category?>PopupItem.assigned_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + <?=$category?>PopupItem.assigned_pro_id].colors.fc + ';'"
                         v-html="allProsFlat['pro_' + <?=$category?>PopupItem.assigned_pro_id].displayedInitials">
                    </div>
                    <div class="flex-grow-1 ml-2">
                        <select provider-search
                                data-field="assigned_pro_uid"
                                v-model="<?=$category?>PopupItem.assigned_pro_uid"
                                :data-pro-name="[<?=$category?>PopupItem.assigned_pro.name_last, <?=$category?>PopupItem.assigned_pro.name_first].filter(Boolean).join(', ')"
                                class="form-control form-control-sm">
                            <option value=""> --select--</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-3 d-inline-flex align-items-center">
                <label class="text-secondary m-0">Ordering Pro</label>
            </div>
            <div class="col-9">
                <div class="d-flex align-items-center">
                    <div class="pro-initials text-uppercase"
                         :title="allProsFlat['pro_' + <?=$category?>PopupItem.ordering_pro_id].displayedName"
                         :style="'background-color: ' + allProsFlat['pro_' + <?=$category?>PopupItem.ordering_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + <?=$category?>PopupItem.ordering_pro_id].colors.fc + ';'"
                         v-html="allProsFlat['pro_' + <?=$category?>PopupItem.ordering_pro_id].displayedInitials">
                    </div>
                    <div class="flex-grow-1 mx-2">
                        <select :provider-search="!<?=$category?>PopupItem.has_ordering_pro_signed"
                                data-field="ordering_pro_uid"
                                v-model="<?=$category?>PopupItem.ordering_pro_uid"
                                :data-pro-name="[<?=$category?>PopupItem.ordering_pro.name_last, <?=$category?>PopupItem.ordering_pro.name_first].filter(Boolean).join(', ')"
                                class="form-control form-control-sm"
                                :class="<?=$category?>PopupItem.has_ordering_pro_signed ? 'd-none' : ''">
                            <option value=""> --select--</option>
                        </select>
                        <input v-if="<?=$category?>PopupItem.has_ordering_pro_signed" type="text" readonly
                               class="form-control form-control-sm mr-2"
                               :value="[<?=$category?>PopupItem.ordering_pro.name_last, <?=$category?>PopupItem.ordering_pro.name_first].filter(Boolean).join(', ')">
                    </div>
                    <div v-if="<?=$category?>PopupItem.has_ordering_pro_signed" class="text-success text-nowrap">
                        <i class="fa fa-check mr-1"></i>Signed
                    </div>
                    <div v-if="<?=$category?>PopupItem.ordering_pro_id === <?=$pro->id?>" class="ml-2 text-nowrap">
                        <span v-if="!<?=$category?>PopupItem.has_ordering_pro_signed"
                           class="btn btn-sm btn-primary text-white c-pointer"
                           v-on:click.prevent="signAsOrderingPro(<?=$category?>PopupItem)">
                            <i class="fa fa-signature mr-1"></i>Sign
                        </span>
                        {{--<span v-if="<?=$category?>PopupItem.has_ordering_pro_signed"
                           class="text-warning-mellow c-pointer"
                           v-on:click.prevent="undoSignAsOrderingPro(<?=$category?>PopupItem)">
                            <i class="fa fa-ban mr-1"></i>Undo
                        </span>--}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-3 d-inline-flex align-items-center">
            <label class="text-secondary m-0">Due Date</label>
        </div>
        <div class="col-9">
            <div class="d-flex align-items-center">
                <div class="pro-initials text-uppercase text-white bg-info"
                     title="Due Date">
                    <i class="fa fa-calendar-day"></i>
                </div>
                <div class="flex-grow-1 ml-2">
                    <input type="text" data-field="due_date" placeholder="Due Date"
                           v-model="<?=$category?>PopupItem.data.due_date" class="form-control form-control-sm date-input">
                </div>
            </div>
        </div>
    </div>

</div>
