<div ng-show="slot">
    <div class="modal" tabindex="-1" role="dialog" style="display: block; background-color: rgba(0, 0, 0, .5);">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div>
                    <div class="modal-header">
                        <h5 class="modal-title">{{slot.title}}</h5>
                    </div>
                </div>
    
                <div class="modal-body container">
                    <div class="form-row" ng-show='slot.isWeekly' >
                        <div class='form-group col-sm-auto'>
                            <label for="hour">Day</label>

                            <select
                                id="w" class="custom-select form-control"
                                ng-model="slot.w" ng-options="o.id as o.description for o in weekDayOptions"
                                >
                            </select>

                        </div>
                    </div>

                    <div class="form-row">
                        <div class='form-group col-sm-auto'>
                            <label for="hour">Hour</label>

                            <select
                                id="hour" class="custom-select form-control"
                                ng-model="slot.h" ng-options="o.id as o.description for o in hourOptions"
                                >
                            </select>

                        </div>
                        <div class='form-group col-sm-auto'>
                            <label for="hour">Minutes</label>

                            <select
                                id="hour" class="custom-select form-control"
                                ng-model="slot.m" ng-options="o.id as o.description for o in minuteOptions"
                                >
                            </select>

                        </div>

                        <div class='form-group col-sm-auto'>
                            <label for="hour">Seconds</label>

                            <select
                                id="hour" class="custom-select form-control"
                                ng-model="slot.s" ng-options="o.id as o.description for o in minuteOptions"
                                >
                            </select>

                        </div>

                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-link" ng-click="slot = null">Cancel</button>
                    <button type="button" class="btn btn-sm btn-primary"   ng-click="finished(slot);">Done</button>
                </div>
            </div>
        </div>
    </div>

</div>