<div ng-show="state.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">Plex Server</h5>
                    </div>
                </div>
                <div class="modal-body container" >

                    <div ng-if="state.channelReport == null"  class="form-group">
                        <label for="serverName">Name:</label>
                        <input class="form-control" type="text" placeholder="{{state.server.name}}" readonly></input>
                    </div>

                    <div ng-if="state.channelReport == null"  class="form-group">
                        <label for="uri">Server URI:</label>
                        <input type="text" class="form-control" id="uri" ng-model = "state.server.uri" ng-change="setModified()"></input>
                    </div>

                    <div ng-if="state.channelReport == null"  class="form-group">
                        <label ng-if="!state.accessVisible" for="accessToken">User Access Token</label>
                        <label ng-if="state.accessVisible" for="accessToken2">User Access Token (Do not share this token with strangers)</label>
                        <div class="input-group">
                            
                            <input ng-if="!state.accessVisible" type="password" class="form-control" id="accessToken" ng-model = "state.server.accessToken"  ng-change="setModified()"></input>
                            <input ng-if="state.accessVisible" type="text" class="form-control" id="accessToken2" ng-model = "state.server.accessToken"  ng-change="setModified()" aria-describedby="tokenHelp"></input>
                            <div class="input-group-append">
                                <button class="btn btn-secondary form-control form-control-sm" type="button" ng-click="state.accessVisible = ! state.accessVisible">
                                    <i ng-hide='state.accessVisible' class='fa fa-eye'></i>
                                    <i ng-show='state.accessVisible' class='fa fa-asterisk'></i>
                                </button>
                            </div>

                        </div>
                    </div>

                    <div ng-if="state.channelReport == null" class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="arGuide" ng-model="state.server.arGuide"  ng-change="setModified()">
                        <label class="form-check-label" for="arGuide">
                          Send Guide Updates
                        </label>
                    </div>
                    <div ng-if="state.channelReport == null"  class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="arChannels" ng-model="state.server.arChannels"  ng-change="setModified()">
                        <label class="form-check-label" for="arChannels">
                          Send Channel Updates
                        </label>
                    </div>

                    <hr ng-if="state.channelReport == null" ng-hide="state.showDelete"></ht>

                    <div ng-if="state.channelReport == null" ng-hide="state.showDelete"  class="form-group">
                        <button class="btn btn-link" ng-click="onShowDelete()">
                            <span class="text-danger"><i class="fa fa-trash-alt"></i> Delete server...</span>
                        </button>
                    </div>

                    <div ng-if="state.channelReport == null" ng-show="state.showDelete" class="card" style="width: 100%;">
                        <div class="card-body">
                          <h5 class="card-title">
                              Delete Server
                          </h5>
                          <p class="card-text">If you delete a plex server, all the existing programs that reference to it will be
                              replaced with Flex time. Fillers that reference to the server will be removed. This operation cannot be undone.</p>
                        </div>
                        <button ng-if="state.channelReport == null" type="button" class="btn btn-sm btn-danger" ng-click="onDelete();" ><i class='fa fa-trash-alt'></i> Delete</button>
                    </div>


                    <div ng-if="state.channelReport != null" class="card" style="width: 100%;">
                        <div class="card-body">
                          <h5 class="card-title">Server deleted</h5>
                            <table class='table'>
                                <tr ng-repeat="x in state.channelReport" ng-if="x.destroyedPrograms &gt; 0">
                                    <td>{{x.channelNumber}}</td>
                                    <td>{{x.channelName}}</td>
                                    <td>{{x.destroyedPrograms}} program{{ (x.destroyedPrograms&gt;1?&quot;s&quot;:&quot;&quot;) }} removed.</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                </div>

                <div class="modal-footer" ng-show='! loading.show'>
                    <div class='text-success small'>{{state.success}}</div>
                    <div class='text-danger small'>{{state.error}}</div>
                    <button type="button" class="btn btn-sm btn-link" ng-click="onFinish()">{{state.modified?"Cancel":"Close"}}</button>
                    <button type="button" class="btn btn-sm btn-primary" ng-click="onSave();" ng-show="state.modified" >Save</button>
                </div>
                <div class="modal-footer" ng-show='loading.show'>
                    <div class='loader'></div>
                </div>
            </div>
        </div>
    </div>
</div>
