<div>
    <h5>Plex Settings</h5>
<h6>Plex Servers
    <button class="pull-right btn btn-sm btn-success" style="margin-bottom:10px;" ng-disabled="isProcessing" ng-click="addPlexServer()">
        Sign In/Add Servers
    </button>
</h6>
<div ng-if="isProcessing">
    <br>
    <h6>
        <span class="pull-right text-info">{{ isProcessing ? 'You have 2 minutes to sign into your Plex Account.' : ''}}</span>
    </h6>
    <br>
</div>
<table class="table">
    <tr>
        <th>Name</th>
        <th>uri</th>
        <th>UI Route</th>
        <th>Backend Route</th>
        <th></th>
    </tr>
    <tr ng-if="servers.length === 0">
        <td colspan="7">
            <p class="text-center text-danger">Add a Plex Server</p>
        </td>
    </tr>
    <tr ng-if="serversPending">
        <td><div class="loader"></div> <span class='text-info'>{{ addingServer }}</span></td>
    </tr>
    <tr ng-repeat="x in servers" ng-hide="serversPending" >
        <td>{{ x.name }}</td>
        <td><span class='text-secondary text-small'>{{ x.uri }}</span></td>
        <td>
            <div class='loader' ng-if="x.uiStatus == 0"></div>
            <div class='text-success' ng-if="x.uiStatus == 1"><i class='fa fa-check'></i>ok</div>
            <div class='text-danger' ng-if="x.uiStatus == -1"><i class='fa fa-exclamation-triangle'></i>error</div>
        </td>
        <td>
            <div class='loader' ng-if="x.backendStatus == 0"></div>
            <div class='text-success' ng-if="x.backendStatus == 1"><i class='fa fa-check'></i>ok</div>
            <div class='text-danger' ng-if="x.backendStatus == -1"><i class='fa fa-exclamation-triangle'></i>error</div>
        </td>
        <td>
            <button class="btn btn-sm btn-outline-secondary" ng-click="editPlexServer(x)">
                <span class="fa fa-edit"></span>
            </button>
        </td>
    <tr ng-if="serverError.length &gt; 0">
        <td colspan="5">
            <p class="text-center text-danger small">{{serverError}}</p>
        </td>
    </tr>
    <tr ng-if="isAnyUIBad()">
        <td colspan="5">
            <p class="text-center text-danger small">If a Plex server configuration has problems with the UI route, the channel editor won&apos;t be able to access its content.</p>
        </td>
    </tr>
    <tr ng-if="isAnyBackendBad()">
        <td colspan="5">
            <p class="text-center text-danger small">If a Plex server configuration has problems with the backend route, dizqueTV won&apos;t be able to play its content.</p>
        </td>
    </tr>

</table>

<hr>
<h6>Plex Transcoder Settings

    <button class="pull-right btn btn-sm btn-success" style="margin-left: 5px;" ng-click="updateSettings(settings)">
        Update
    </button>
    <button class="pull-right btn btn-sm btn-warning" ng-click="resetSettings(settings)">
        Reset Options
    </button>
</h6>
<hr>
<div class="row" >
    <div class="col-sm-3">
        <div class="form-group">
            <input id="debugLogging" type="checkbox" ng-model="settings.debugLogging"></input>
            <label for="debugLogging">Debug logging</label>
        </div>
        <div class="form-group">
            <label>Paths</label>
            <select ng-model="settings.streamPath" 
                ng-options="o.id as o.description for o in pathOptions" ></select>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="form-group">
            <input id="updatePlayStatus" type="checkbox" ng-model="settings.updatePlayStatus" ria-describedby="updatePlayStatusHelp"></input>
            <label for="updatePlayStatus">Send play status to Plex</label>
            <small id="updatePlayStatusHelp" class="form-text text-muted">Note: This affects the "on deck" for your plex account.</small>
        </div>
    </div>
</div>

<div class="row" ng-hide="hideIfNotPlexPath()">
<div class="col-sm-12">
    <p class="text-center text-info small">If stream changes video codec, audio codec, or audio channels upon episode change, you will experience playback issues unless ffmpeg transcoding and normalization are also enabled.</p>
</div>
</div>

<div class="row" ng-hide="hideIfNotPlexPath()">

    <div class="col-sm-6">
        <h6 style="font-weight: bold">Video Options</h6>
        <div class="form-group">
            <label>Supported Video Formats</label>
            <input type="text" class="form-control form-control-sm" ng-model="settings.videoCodecs" ria-describedby="videoCodecsHelp"></input>
        </div>
        <div class="form-group">
            <label>Max Playable Resolution</label>
            <select ng-model="settings.maxPlayableResolution" 
                ng-options="o.id as o.description for o in resolutionOptions" ></select>
        </div>
        <div class="form-group">
            <label>Max Transcode Resolution</label>
            <select ng-model="settings.maxTranscodeResolution" 
                ng-options="o.id as o.description for o in resolutionOptions "></select>
        </div>
    </div>
    <div class="col-sm-6">
        <h6 style="font-weight: bold">Audio Options</h6>
        <div class="form-group">
            <label>Supported Audio Formats</label>
            <input type="text" class="form-control form-control-sm" ng-model="settings.audioCodecs" ria-describedby="audioCodecsHelp" ></input>
            <small id="audioCodecsHelp" class="form-text text-muted">Comma separated list. Some possible values are 'ac3,aac,mp3'.</small>
        </div>
        <div class="form-group">
            <label>Maximum Audio Channels</label>
            <select ng-model="settings.maxAudioChannels" 
                ng-options="o.id as o.description for o in maxAudioChannelsOptions" ria-describedby="maxAudioChannelsHelp"></select>
            <small id="maxAudioChannelsHelp" class="form-text text-muted">Note: 7.1 audio and on some clients, 6.1, is known to cause playback issues.</small>
        </div>
        <div class="form-group">
            <label>Audio Boost</label>
            <select ng-model="settings.audioBoost" 
                ng-options="o.id as o.description for o in audioBoostOptions" ria-describedby="audioBoostHelp"></select>
            <small id="audioBoostHelp" class="form-text text-muted">Note: Only applies when downmixing to stereo.</small>
        </div>
    </div>
</div>
<div class="row" ng-hide="hideIfNotPlexPath()">
    <div class="col-sm-6">
        <h6 style="font-weight: bold">Miscellaneous Options</h6>
        <div class="form-group">
            <label>Max Direct Stream Bitrate (Kbps)</label>
            <input type="text" class="form-control form-control-sm" ng-model="settings.directStreamBitrate" ></input>
        </div>
        <div class="form-group">
            <label>Max Transcode Bitrate (Kbps)</label>
            <input type="text" class="form-control form-control-sm" ng-model="settings.transcodeBitrate" aria-described-by="transcodebrhelp" ></input>
            <small id="transcodebrhelp" class='text-muted form-text'>Plex will decide to transcode or direct play based on these settings and if Plex transcodes, it will try to match the transcode bitrate.</small>

        </div>
        <div class="form-group">
            <label>Direct Stream Media Buffer Size</label>
            <input type="text" class="form-control form-control-sm" ng-model="settings.mediaBufferSize" ></input>
        </div>
        <div class="form-group">
            <label>Transcode Media Buffer Size</label>
            <input type="text" class="form-control form-control-sm" ng-model="settings.transcodeMediaBufferSize" ></input>
        </div>
        <div class="form-group">
            <label>Stream Protocol</label>
            <select ng-model="settings.streamProtocol" 
                ng-options="o.id as o.description for o in streamProtocols" ></select>
        </div>
        <div class="form-group">
            <input id="forceDirectPlay" type="checkbox" ng-model="settings.forceDirectPlay" ></input>
            <label for="forceDirectPlay">Force Direct Play</label>
        </div>
    </div>
    <div class="col-sm-6">
        <h6 style="font-weight: bold">Subtitle Options</h6>
        <div class="form-group">
            <label>Subtitle Size</label>
            <input type="text" class="form-control form-control-sm" ng-model="settings.subtitleSize" ></input>
        </div>
        <div class="form-group">
            <input class="form-check-input" id="enableSubtitles" type="checkbox" ng-model="settings.enableSubtitles" ng-disabled="shouldDisableSubtitles()"  ></input>
            <label class="form-check-label" for="enableSubtitles">Enable Subtitles (Requires Transcoding)</label>
        </div>
    </div>
</div>
<div class="row" ng-hide="hideIfNotDirectPath()">
    <div class="col-sm-6">
        <h6 style="font-weight: bold">Path Replacements</h6>
        <div class="form-group">
            <label>Original Plex path to replace:</label>
            <input type="text" class="form-control form-control-sm" ng-model="settings.pathReplace" ></input>
        </div>
        <div class="form-group">
            <label>Replace Plex path with:</label>
            <input type="text" class="form-control form-control-sm" ng-model="settings.pathReplaceWith" ></input>
        </div>
    </div>
</div>
<plex-server-edit state="_serverEditorState" on-finish="serverEditFinished"></plex-server-edit>