<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">Random 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 col-md-2' >
                            <label ng-if="$index==0" for="showTime{{$index}}">Duration</label>

                            <select
                                id="showDuration{{$index}}" class="custom-select form-control"
                                ng-model="slot.duration" ng-options="o.id as o.description for o in durationOptions"
                                ng-change="refreshSlots()"
                                >
                            </select>
                            <small class='form-text text-danger'>{{slot.timeError}}</small>
                        </div>
                        <div class='form-group col-md-5' >
                            <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="showCooldown{{$index}}" >Cooldown</label>
                            <select
                                id="showCooldown{{$index}}" class="custom-select form-control"
                                ng-model="slot.cooldown" ng-options="o.id as o.description for o in cooldownOptions"
                                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 class='form-group col-md-2'>
                        </div>
                        <div class='form-group col-md-7' ng-if="schedule.randomDistribution == 'weighted'" >
                            <label ng-if="$index==0" for="weightRange{{$index}}">Weight</label>
                            <input class='form-control-range custom-range' id="weightRange{{$index}}" type='range' ng-model='slot.weight' min=1 max=600
                            data-toggle="tooltip" data-placement="bottom" title="Slots  with more weight will be picked more frequently."
                             ng-change="refreshSlots()"
                            >
                            </input>
                        </div>
                        <div class='form-group col-md-2' ng-if="schedule.randomDistribution == 'weighted'" >
                            <label ng-if="$index==0" for="weightp{{$index}}">%</label>
                            <input class='form-control flex-filler-percent' id="weightp{{$index}}" type='text' ng-model='slot.weightPercentage'
                            data-toggle="tooltip" data-placement="bottom" title="This is the overall probability this slot might be picked, assuming all lists are available." readonly
                            >
                            </input>
                        </div>


                        

                    </div>
                    <div class="form-row">
                        <div class='form-group col-md-2'>
                            <label ng-if="schedule.slots.length==0" for="fakeTime">Duration</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="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' ng-show='schedule.pad != 1'>
                        <label for="padStyle">What to pad?</label>
                        <select
                            id="padStyle" class="custom-select form-control"
                            ng-model="schedule.padStyle" ng-options="o.id as o.description for o in padStyleOptions"
                            aria-describedby="padStyleHelp"
                            >
                        </select>
                        <small id='padStyleHelp' class='form-text text-muted'>
                            When using the pad times option, you might prefer to only ensure the start times of the slot and not the individual episodes.
                        </small>
                    </div>


                    <div class='form-group'>
                        <label for="flexPreference">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="randomDistribution">Random Distribution</label>
                        <select
                            id="randomDistribution" class="custom-select form-control"
                            ng-model="schedule.randomDistribution" ng-options="o.id as o.description for o in distributionOptions"
                            aria-describedby="randomDistributiondHelp"
                            ng-change="randomDistributionChanged()"
                            >
                        </select>
                        <small id='randomDistributionHelp' class='form-text text-muted'>
                            Uniform means that all slots have an equal chancel to be picked. Weighted makes the configuration of the slots more complicated but allows to tweak the weight for each slot so you can make some slots more likely to be picked than others.
                        </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>
</div>