<table v-if="events.length > 0"
       class="mb-0 table table-sm table-bordered appointments">
    <tr v-for="event in events" :class="getEventBgColor(event.status)">
        <td>
            <a :href="'/patients/view/' + event.clientUid" class="font-weight-bold">@{{
                event.clientName }}</a><br/>
            {{-- <span class="small d-inline-block text-secondary font-weight-normal"> (@{{ event.clientAge }} y.o. @{{event.clientSex}})</span>--}}
            @{{ event.friendlyStartTime }} - @{{ event.friendlyEndTime }} <span
                class="text-secondary">@{{ formatTimeZone(event.timezone) }}</span>
            <a :href="'/patients/view/' + event.clientUid + '/calendar/' + event.uid">
                <i class="fa fa-edit"></i>
            </a>

            <br/><span v-if="event.title"
                  class="d-inline-block ml- 2 text-secondary font-weight-bold">
                                                  @{{ event.title }}
                                                  </span>
        </td>
        <td>
            <div class="d-flex flex-column">
                <div class="d-flex align-items-center">
                    <div v-if="event.status === 'PENDING'"
                        class="text-warning-mellow font-weight-bold">
                        <i class="fa fa-exclamation-triangle"></i>
                        Pending
                    </div>
                    <div v-else-if="event.status === 'CONFIRMED'"
                        class="text-success font-weight-bold">
                        <i class="fa fa-check"></i>
                        Confirmed
                    </div>
                    <div v-else-if="event.status === 'CANCELLED'"
                        class="text-danger font-weight-bold">
                        <i class="fa fa-stop"></i>
                        Cancelled
                    </div>
                    <div v-else-if="event.status === 'COMPLETED'"
                        class="text-success font-weight-bold">
                        <i class="far fa-calendar-check"></i>
                        Completed
                    </div>
                    @include('app.mcp.dashboard.appointment-change-status')
                </div>              
                
                <div v-if="selectedDate === '{{ date('Y-m-d') }}'"
                     class=""
                     :class="event.started ? 'text-danger': 'text-secondary'">
                    @{{ event.inHowManyHours }}
                </div>
            </div>
        </td>
        <td>
            <div>
                <b v-if="event.coverage == 'YES'" class="text-success">Covered</b>
                <b v-else-if="event.coverage == 'NO'" class="text-danger">Not
                    Covered</b>
                <b v-else class="text-warning-mellow">Pending</b>
            </div>
        </td>
    </tr>
</table>
<div v-if="numEventsForDate === 0 && selectedDate"
     class="bg-light p-3 text-secondary border bounded">
    <span v-if="filterStatus === ''">You have no appointments on <b>@{{ formatSelectedDate(selectedDate) }}</b></span>
    <span v-if="filterStatus !== ''">You have no appointments on <b>@{{ formatSelectedDate(selectedDate) }}</b> with status <b>@{{ filterStatus }}</b></span>
</div>
<div v-show="!selectedDate" class="bg-light p-3 text-secondary border bounded">
    Please select a date from the calendar on the left
</div>
