<div ng-show="programs != null">
    <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">Tweak TV Shows Weights</h5>
                    </div>
                </div>
    
                <div class="modal-body container">

                    <div class="row" ng-repeat="x in programs">
                        <div class='col-sm-5 col-md-3'>
                            <input style="width:100%" class='custom-range' type="range" ng-model="x.weight"
                                    min="1" max="24" ng-change="setModified()"></input>
                        </div>
                        <div class='col-sm-7 col-md-9'>
                            <b ng-show='x.specialCategory'>{{x.displayName}}</b>
                            <span ng-show='! x.specialCategory'>{{x.displayName}}</span>
                        </div>
                    </div>
                </div>


                <div class="modal-footer">
                    <span ng-hide="modified" class="pull-right text-info small">{{message}}</span>

                    <button type="button" class="btn btn-sm btn-link" ng-click="programs = null" ng-show="modified">Cancel</button>
                    <button type="button" class="btn btn-sm btn-link" ng-click="programs = null" ng-show="!modified">Close</button>
                    <button type="button" class="btn btn-sm btn-primary" ng-click="finished(programs);" ng-show="modified" >Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>