<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" ng-if="noServers">
                <div class="modal-header">
                    <h5 class="modal-title">Library</h5>
                </div>
                <div class="model-body">
                    <br></br>
                    <br></br>
                    <br></br>
                    <br></br>
                    <p class="text-center">Configure your Plex Server(s) in <a href="/#!/settings#plex">Settings</a></p>
                    <br></br>
                    <br></br>
                    <br></br>
                    <br></br>
                    <br></br>
                </div>
            </div>

            <div class="modal-content" ng-if="!noServers">
                <div class="modal-header">
                    <h5 class="modal-title">Library</h5>
                    <span class="pull-right">
                        <label class="small" for="displayImages">Thumbnails</label>&nbsp;
                        <input id="displayImages" type="checkbox" ng-model="displayImages" ></input>&nbsp;
                    </span>
                </div>
                <div class="modal-body">
                    <select class="form-control form-control-sm custom-select" ng-model="currentOrigin"
                        ng-options="x.name for x in origins" ng-change="selectOrigin(currentOrigin)"></select>
                    <hr ></hr>
                    <ul ng-show="currentOrigin.type=='plex' " class="list-group list-group-root plex-panel" ng-init="setHeight = {'height': height + 'px'}" ng-style="setHeight" lazy-img-container>
                        <li class="list-group-item" ng-repeat="a in libraries">
                            <div class="flex-container {{ displayImages ? 'w_images' : 'wo_images' }}" ng-click="getNested(a, true);">
                                <span class="fa {{ a.collapse ? 'fa-chevron-down' : 'fa-chevron-right' }} tab"></span>
                                <img ng-if="displayImages" lazy-img="{{a.icon}}" ></img>
                                <span>{{ displayTitle(a) }}</span><!-- Library -->
                                <span ng-if="a.type === 'show' || a.type === 'movie' || a.type === 'artist'" class="flex-pull-right" ng-click='$event.stopPropagation(); selectLibrary(a)'>
                                    <span class="fa fa-plus btn"></span>
                                </span>
                            </div>
                            <ul ng-if="a.collapse" class="list-group">
                                <li class="list-group-item {{ b.type !== 'movie' ? 'list-group-item-secondary' : 'list-group-item-video' }}"
                                    ng-repeat="b in a.nested">
                                    <div class="flex-container"
                                        ng-click="b.type !== 'movie' ? getNested(b) : selectItem(b, true)">
                                        <span ng-if="b.type === 'movie'" class="fa fa-plus-circle tab"></span>
                                        <span ng-if="b.type !== 'movie'" class="tab"></span>
                                        <span ng-if="b.type !== 'movie'" class="fa {{ b.collapse ? 'fa-chevron-down' : 'fa-chevron-right' }} tab"></span>
                                        <img ng-if="displayImages" lazy-img="{{ b.type === 'episode' ? b.episodeIcon : b.icon }}" ></img>
                                        {{ displayTitle(b) }}
                                        <span ng-if="b.type === 'movie'" class="flex-pull-right">
                                            {{b.durationStr}}
                                        </span>
                                        <span ng-if="b.type === 'playlist'" class="flex-pull-right" ng-click="$event.stopPropagation(); selectPlaylist(b);">
                                            <span class="fa fa-plus btn"></span>
                                        </span>
                                        <span ng-if="b.type === 'show' || b.type === 'collection' || b.type === 'genre' || b.type === 'artist'" class="flex-pull-right" ng-click="$event.stopPropagation(); selectShow(b);">
                                            <span class="fa fa-plus btn"></span>
                                        </span>
                                    </div>
                                    <ul ng-if="b.collapse" class="list-group">
                                        <li ng-repeat="c in b.nested"
                                            class="list-group-item {{ c.type !== 'movie' && c.type !== 'episode' && c.type !== 'track' ? 'list-group-item-dark' : 'list-group-item-video' }}">
                                            <div class="flex-container"
                                                ng-click="c.type !== 'movie' && c.type !== 'episode' && c.type !== 'track' ? getNested(c) : selectItem(c, true)">
                                                <span ng-if="c.type === 'movie' || c.type === 'episode' || c.type === 'track'"
                                                    class="fa fa-plus-circle tab"></span>
                                                <span ng-if="c.type !== 'movie' && c.type !== 'episode' && c.type !== 'track'"
                                                    class="tab"></span>
                                                <span ng-if="c.type !== 'movie' && c.type !== 'episode' && c.type !== 'track'"
                                                    class="tab"></span>
                                                <span ng-if="c.type !== 'movie' && c.type !== 'episode' && c.type !== 'track'"
                                                    class="fa {{ c.collapse ? 'fa-chevron-down' : 'fa-chevron-right' }} tab"></span>
                                                <img ng-if="displayImages" lazy-img="{{c.type === 'episode' ? c.episodeIcon : c.icon }}" ></img>
                                                {{ displayTitle(c) }}
                                                <span ng-if="c.type === 'movie' || c.type === 'episode' || c.type === 'track' "
                                                    class="flex-pull-right">
                                                    {{c.durationStr}}
                                                </span>
                                                <span ng-if="c.type === 'season' || c.type === 'album'" class="flex-pull-right" ng-click="$event.stopPropagation(); selectSeason(c);">
                                                    <span class="fa fa-plus btn"></span>
                                                </span>
                                            </div>
                                            <ul ng-if="c.collapse" class="list-group">
                                                <li class="list-group-item list-group-item-video"
                                                    ng-repeat="d in c.nested">
                                                    <div class="flex-container" ng-click="selectItem(d, true)">
                                                        <span class="fa fa-plus-circle tab"></span>
                                                        <img ng-if="displayImages" lazy-img="{{d.episodeIcon}}" ></img>
                                                        {{ displayTitle(d) }}
                                                        <span class="flex-pull-right">{{d.durationStr}}</span>
                                                        <!-- Episode -->
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <ul ng-show="currentOrigin.type=='dizquetv' " class="list-group list-group-root plex-panel" ng-init="setHeight = {'height': height + 'px'}" ng-style="setHeight" lazy-img-container>
                        <li class="list-group-item" ng-repeat="x in customShows">
                            <div class="flex-container" ng-click="addCustomShow(x);">
                                <span class="fa fa-plus-circle tab"></span>

                                <span>{{x.name}} ({{x.count}})</span>
                            </div>
                        </li>
                    </ul>

                    <hr></hr>
                    <div class="loader" ng-if="pending &gt; 0" ></div> <h6 style='display:inline-block'>Selected Items</h6>
                    
                    <div class="text-info small" ng-show='selection.length &gt; 10'>{{ selection.length }} elements added in total. Only the last 10 elements are displayed:</div>
                    <div class="text-danger small" ng-repeat="e in errors track by $index">{{ e }}</div>

                    <ul class="list-group list-group-root"  style="height: 180px; overflow-y: scroll" dnd-list="selection" scroll-glue>
                        <div ng-if="selection.length === 0">Select media items from your plex library above.</div>
                        <li ng-if="selection.length + x &gt;= 0" class="list-group-item" ng-repeat="x in allowedIndexes" style="cursor:default;" dnd-draggable="x" dnd-moved="selection.splice(selection.length + x, 1)" dnd-effect-allowed="move">
                            {{ getProgramDisplayTitle(selection[selection.length + x]) }}
                            <button class="pull-right btn btn-sm btn-link" ng-click="selection.splice(selection.length + x,1)">
                                <span class="text-danger fa fa-trash-alt" ></span>
                            </button>
                        </li>
                    </ul>
                </div>
                <div class='text-danger'>{{error}}</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-link" ng-click="_onFinish([])">Cancel</button>
                    <button type="button" class="btn btn-sm btn-primary" ng-click="_onFinish(selection);">Done</button>
                </div>
            </div>
        </div>
    </div>
</div>