<div ng-show="visible">
    <div class="modal" tabindex="-1" role="dialog" style="display: block; background-color: rgba(0, 0, 0, .5);">
        <div class="modal-dialog modal-dialog-scrollable modal-xl" role="document">
            <div class="modal-content">
                <div>
                    <div class="modal-header">
                        <h5 class="modal-title">Time Slots</h5>
                    </div>
                </div>

                <div class="modal-body" ng-show='loading' >
                    <p><span class='loader'></span> Generating lineup, please wait...</p>
                </div>

                <div class="modal-body" ng-show='! loading' >
                    <div class="form-row" ng-repeat = "slot in schedule.slots" track-by = "$index">
                        <div class='form-group' ng-class='timeColumnClass()' >
                            <label ng-if="$index==0" for="showTime{{$index}}">Time</label>

                            <button
                                type="button"
                                class="btn btn-outline-secondary form-control"
                                ng-click="editTime($index)"
                            >
                                {{ displayTime(slot.time) }}
                            </button>
                            <small class='form-text text-danger'>{{slot.timeError}}</small>
                        </div>
                        <div class='form-group' ng-class='programColumnClass()' >
                            <label ng-if="$index==0" for="showId{{$index}}">Program</label>
                            <select
                                id="showId{{$index}}" class="custom-select form-control"
                                ng-model="slot.showId" ng-options="o.id as o.description for o in showOptions"
                                ng-change="refreshSlots()"
                                >
                            </select>
                        </div>
                        <div class='form-group col-md-2'>
                            <label ng-if="$index==0" for="showOrder{{$index}}"  ng-show="canShowSlot(slot)" >Order</label>
                            <select
                                id="showOrder{{$index}}" class="custom-select form-control"
                                ng-model="slot.order" ng-options="o.id as o.description for o in orderOptions"
                                ng-change="refreshSlots()"
                                ng-show="canShowSlot(slot)"
                                ng-disabled="slot.showId == 'movie.'"
                                >
                            </select>
                        </div>

                        <div class='form-group col-md-1'>
                            <label ng-if="$index==0" for="delete{{$index}}">-</label>
                            <button id='delete{{$index}}' class='btn btn-link form-control' ng-click='deleteSlot($index)' >
                                <i class='text-danger fa fa-trash-alt'></i>
                            </button>
                        </div>
    
                    </div>
                    <div class="form-row">
                        <div class='form-group col-md-2' ng-class='timeColumnClass()'>
                            <label ng-if="schedule.slots.length==0" for="fakeTime">Time</label>
                            <button
                                type="button"
                                class="btn btn-outline-secondary form-control"
                                ng-click="addSlot()"
                            >
                                Add Slot
                            </button>
                        </div>
                    </div>
                    <hr>
                    <div class='form-group'>
                        <label for="period">Period</label>
                        <select
                            id="period" class="custom-select form-control"
                            ng-model="schedule.period" ng-options="o.id as o.description for o in periodOptions"
                            ng-change="periodChanged()"
                            aria-describedby="periodHelp"
                            >
                        </select>
                        <small id='periodHelp' class='form-text text-muted'>
                            By default, time slots are time of the day-based, you can change it to time of the day + day of the week. That means scheduling  7x the number of time slots. If you change from daily to weekly, the current schedule will be repeated 7 times. If you change from weekly to daily, many of the slots will be deleted.
                        </small>
    
                    </div>

                    <div class='form-group'>
                        <label for="lateness">Maximum lateness</label>
                        <select
                            id="lateness" class="custom-select form-control"
                            ng-model="schedule.lateness" ng-options="o.id as o.description for o in latenessOptions"
                            aria-describedby="latenessHelp"
                            >
                        </select>
                        <small id='latenessHelp' class='form-text text-muted'>
                            Allows programs to play a bit late if the previous program took longer than usual. If a program is too late, Flex is scheduled instead.
                        </small>
    
                    </div>

                    <div class='form-group'>
                        <label for="pad">Pad times</label>
                        <select
                            id="pad" class="custom-select form-control"
                            ng-model="schedule.pad" ng-options="o.id as o.description for o in padOptions"
                            aria-describedby="padHelp"
                            >
                        </select>
                        <small id='padHelp' class='form-text text-muted'>
                            Ensures programs have a nice-looking start time, it will add Flex time to fill the gaps.
                        </small>
    
                    </div>

                    <div class='form-group'>
                        <label for="pad">What to do with flex?</label>
                        <select
                            id="flexPreference" class="custom-select form-control"
                            ng-model="schedule.flexPreference" ng-options="o.id as o.description for o in flexOptions"
                            aria-describedby="flexPreferenceHelp"
                            >
                        </select>
                        <small id='flexPreferenceHelp' class='form-text text-muted'>
                            Usually slots need to add flex time to ensure that the next slot starts at the correct time. When there are multiple videos in the slot, you might prefer to distribute the flex time between the videos or to place most of the flex time at the end of the slot.
                        </small>
                    </div>
                   
                    <div class='form-group'>
                        <label for="lateness">Maximum days to precalculate</label>
                        <input
                            id="maxDays" class="form-control"
                            type='number'
                            ng-model="schedule.maxDays"
                            min = 1
                            max = 3652
                            aria-describedby="maxDaysHelp"
                            required
                            >
                        </input>
                        <small id="maxDaysHelp" class='form-text text-muted'>
                            Maximum number of days to precalculate the schedule. Note that the length of the schedule is also bounded by the maximum number of programs allowed in a channel.
                        </small>
    
                    </div>
    

                </div>

                <div class="modal-footer" ng-show='!loading'>
                    <div class='text-danger small'>{{error}}</div>
                    <button type="button" class="btn btn-sm btn-link" ng-click="finished(true)">Cancel</button>
                    <button ng-disabled='disableCreateLineup()' type="button" class="btn btn-sm btn-primary" ng-click="finished(false);">Create Lineup</button>
                </div>
            </div>
        </div>
    </div>

    <time-slots-time-editor slot="_editedTime" on-done="finishedTimeEdit"></time-slots-time-editor>
    <time-slots-time-editor slot="_addedTime" on-done="finishedAddingTime"></time-slots-time-editor>

</div>