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

                        <div class="form-group">
                            <label for="name">Show Name:</label>
                            <input type="text" class="form-control" id="name" placeholder="Show Name" ng-model="name" ></input>
                        </div>
        
                        <h6 style="margin-top: 10px;">Clips</h6>
        
                        <div class="flex-container">
                            <div class="programming-counter small" ng-show="content.length > 0">
                                <span class="small"><b>Total:</b> {{content.length}}</span>
                            </div>
                            <div class='flex-pull-right' ></div>
                            <div>
                                <button class="btn btn-sm btn-secondary btn-programming-tools"
                                ng-click="showTools = !showTools"
                                ng-show="content.length !== 0">
                                <span
                                class="fa {{ showTools ? 'fa-chevron-down' : 'fa-chevron-right'}}"></span>&nbsp;&nbsp;Tools
                                </button>
                            </div>
                            <div>
                                <button class="btn btn-sm btn-primary" ng-click="showPlexLibrary = true">
                                    <span class="fa fa-plus"></span>
                                </button>
                            </div>
                        </div>
                        <div ng-show="showTools" class='tools-pane' >
                            <div class="row">
                                <!-- TODO: Probably sort shows and sort dates are needed here -->
                                <div class="input-group col-xl-3 col-lg-6" style="padding: 5px;">
                                    <button class="btn btn-sm btn-warning form-control form-control-sm" type="button" ng-click="sortShows()">
                                        <i class='fa fa-sort-alpha-down'></i> Sort TV Shows
                                    </button>
                                </div>
                                <div class="input-group col-xl-3 col-lg-6" style="padding: 5px;">
                                    <button class="btn btn-sm btn-warning form-control form-control-sm" type="button" ng-click="sortByDate()">
                                        <i class='fa fa-sort-alpha-down'></i> Sort Release Dates
                                    </button>
                                </div>
                                <div class="input-group col-xl-6 col-lg-12" style="padding: 5px;">
                                    <button class="btn btn-sm btn-warning form-control form-control-sm" type="button" ng-click="shuffleShows()">
                                        <i class='fa fa fa-random'></i> Random Shuffle
                                    </button>
                                </div>

                                
                                <div class="input-group col-xl-3 col-lg-6" style="padding: 5px;">
                                    <button class="btn btn-sm btn-danger form-control form-control-sm" type="button" ng-click="showRemoveDuplicates()">
                                        <i class='fa fa-trash-alt'></i> Remove Duplicates
                                    </button>
                                </div>

                                <div class="input-group col-xl-3 col-lg-6" style="padding: 5px;">
                                    <button class="btn btn-sm btn-danger form-control form-control-sm" type="button" ng-click="removeSpecials()">
                                        <i class='fa fa-trash-alt'></i> Remove Specials
                                    </button>
                                </div>


                                <div class="input-group col-xl-6 col-lg-12" style="padding: 5px;">
                                    <button class="btn btn-sm btn-danger form-control form-control-sm" type="button" ng-click="showRemoveAllShow()">
                                        <i class='fa fa-trash-alt'></i> Remove All
                                    </button>
                                </div>
                            </div>
                        </div>
        
                        
                        <div ng-show="content.length === 0">
                            <p class="text-center text-info">Click the <span class="fa fa-plus"></span> to import show content from your Plex server(s).</p>
                        </div>
    
                    </div>
                </div>
                <div vs-repeat class="modal-body container list-group list-group-root show-list" 
                 dnd-list="content" ng-if="showList()"
                    vs-repeat-reinitialized="vsReinitialized(event, startIndex, endIndex)"
                    ng-init="setUpWatcher()"
                    dnd-drop="dropFunction(index , item)"
                    dnd-list=""

                >
                    <div class="list-group-item flex-container show-row"  style="cursor: default; height:1.1em; overflow:hidden" ng-repeat="x in content" track-by="x.$index"  dnd-draggable="x"
                        dnd-effect-allowed="move"
                        dnd-moved="movedFunction(x.$index)"
                        >
                        <div class="program-start" >
                            X{{ (x.$index + 1).toString().padStart(2, '0') }}
                        </div>
                        <div ng-style="programSquareStyle(x, false)" ></div>
                        <div class="title" >
                            {{ getProgramDisplayTitle(x) }}
                        </div>
                        <div class="flex-pull-right">
                            <button class="btn btn-sm btn-link" ng-click="contentSplice(x.$index,1)">
                            <i class="text-danger fa fa-trash-alt" ></i>
                            </button>
                        </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-primary" ng-click="finished(false);">Done</button>
                </div>
            </div>
        </div>
    </div>
    <plex-library limit=1000000000 height="300" visible="showPlexLibrary" on-finish="importPrograms"></plex-library>
</div>
