<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">Delete Filler</h5>
                    </div>
                    <div style='padding-left: 1rem; padding-right: 1rem' >

                        <p>Are you sure you want to delete Filler List: {{name}}?</p>

                        <p ng-if='channels.length &gt; 0'>
                            The filler is currently in use by these channels:
                        </p>
    
                    </div>
                </div>


                <div class="modal-body container list-group list-group-root" vs-repeat="options" dnd-list="content">
                    <div class="list-group-item flex-container"  style="cursor: default;" ng-repeat="x in channels">
                        <div style='margin-left: 3rem' >
                            <span class='text-secondary'>{{x.number}} - {{x.name}}</span>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <div class='text-danger small'>{{error}}</div>
                    <button type="button" class="btn btn-sm btn-link" ng-click="finished(true)">Cancel</button>
                    <button type="button" class="btn btn-sm btn-danger" ng-click="finished(false);"><i class='fas fa-trash-alt'></i> Delete Filler</button>
                </div>
            </div>
        </div>
    </div>

</div>