<div class="card bg-light">
    <div class="card-body">
        <span class="d-flex align-items-center mb-2" v-if="item.assigned_pro_id">
            <span class="text-secondary text-sm width-70px">Assigned:</span>
            <b>@{{proNameFromId(item.assigned_pro_id)}}</b>
            <span class="d-inline-flex" v-if="item.manager_pro_id === {{$pro->id}}">
                <span class="mx-2 opacity-60 text-secondary">•</span>
                <a class="on-hover-opaque c-pointer" v-on:click.prevent="showProUpdatePopup('other-popup', 'Assigned', item)">
                    <i class="fa fa-edit"></i>
                </a>
            </span>
            <span class="d-inline-flex" v-if="item.assigned_pro_id === {{$pro->id}}">
                <span class="mx-2 opacity-60 text-secondary">•</span>
                <span v-if="item.has_assigned_pro_signed" class="text-success">
                    <i class="fa fa-check"></i>
                    Signed
                    <a class="ml-2 c-pointer" v-on:click.prevent="undoSignAsAssignedPro(item)">Undo</a>
                </span>
                <a v-if="!item.has_assigned_pro_signed" class="c-pointer"
                   v-on:click.prevent="signAsAssignedPro(item)">Sign</a>
            </span>
        </span>
        <span class="d-flex align-items-center mb-2" v-if="item.manager_pro_id">
            <span class="text-secondary text-sm width-70px">Manager:</span>
            <b>@{{proNameFromId(item.manager_pro_id)}}</b>
            <span class="d-inline-flex" v-if="item.manager_pro_id === {{$pro->id}}">
                <span class="mx-2 opacity-60 text-secondary">•</span>
                <a class="on-hover-opaque c-pointer" v-on:click.prevent="showProUpdatePopup('other-popup', 'Manager', item)">
                    <i class="fa fa-edit"></i>
                </a>
            </span>
            <span class="d-inline-flex" v-if="item.manager_pro_id === {{$pro->id}}">
                <span class="mx-2 opacity-60 text-secondary">•</span>
                <span v-if="item.has_manager_pro_signed" class="text-success">
                    <i class="fa fa-check"></i>
                    Signed
                    <a class="ml-2 c-pointer" v-on:click.prevent="undoSignAsManagerPro(item)">Undo</a>
                </span>
                <a v-if="!item.has_manager_pro_signed" class="c-pointer"
                   v-on:click.prevent="signAsManagerPro(item)">Sign</a>
            </span>
        </span>
        <span class="d-flex align-items-center mb-2" v-if="item.ordering_pro_id">
            <span class="text-secondary text-sm width-70px">Ordering:</span>
            <b>@{{proNameFromId(item.ordering_pro_id)}}</b>
            <span class="d-inline-flex" v-if="item.manager_pro_id === {{$pro->id}}">
                <span class="mx-2 opacity-60 text-secondary">•</span>
                <a class="on-hover-opaque c-pointer" v-on:click.prevent="showProUpdatePopup('other-popup', 'Ordering', item)">
                    <i class="fa fa-edit"></i>
                </a>
            </span>
            <span class="d-inline-flex" v-if="item.ordering_pro_id === {{$pro->id}}">
                <span class="mx-2 opacity-60 text-secondary">•</span>
                <span v-if="item.has_ordering_pro_signed" class="text-success">
                    <i class="fa fa-check"></i>
                    Signed
                    <a class="ml-2 c-pointer" v-on:click.prevent="undoSignAsOrderingPro(item)">Undo</a>
                </span>
                <a v-if="!item.has_ordering_pro_signed" class="c-pointer"
                   v-on:click.prevent="signAsOrderingPro(item)">Sign</a>
            </span>
        </span>
        <span class="d-flex align-items-center" v-if="item.initiating_pro_id">
            <span class="text-secondary text-sm width-70px">Initiating:</span>
            <b>@{{proNameFromId(item.initiating_pro_id)}}</b>
            <span class="d-inline-flex" v-if="item.manager_pro_id === {{$pro->id}}">
                <span class="mx-2 opacity-60 text-secondary">•</span>
                <a class="on-hover-opaque c-pointer" v-on:click.prevent="showProUpdatePopup('other-popup', 'Initiating', item)">
                    <i class="fa fa-edit"></i>
                </a>
            </span>
            <span class="d-inline-flex" v-if="item.initiating_pro_id === {{$pro->id}}">
                <span class="mx-2 opacity-60 text-secondary">•</span>
                <span v-if="item.has_initiating_pro_signed" class="text-success">
                    <i class="fa fa-check"></i>
                    Signed
                    <a class="ml-2 c-pointer" v-on:click.prevent="undoSignAsInitiatingPro(item)">Undo</a>
                </span>
                <a v-if="!item.has_initiating_pro_signed" class="c-pointer"
                   v-on:click.prevent="signAsInitiatingPro(item)">Sign</a>
            </span>
        </span>
    </div>
</div>
