<!--
  ~
  ~  Copyright 2020 Jason H House
  ~  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
  ~  
  ~  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  ~  
  ~  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  -->

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Notifications</title>
</head>
<body>
<header th:fragment="telegram">
    <div class="row">
        <h4 class="col-10">Telegram Notifications</h4>
        <a id="telegramShowHide" class="btn btn-primary" data-toggle="collapse" href="#telegramConfiguration" role="button" aria-expanded="false"
           aria-controls="telegramConfiguration">
            Show/Hide
        </a>
    </div>
    <form id="telegramConfiguration" class="collapse">
        <div class="form-group">
            <label for="telegramBotId">Bot ID</label>
            <input type="text" class="form-control" id="telegramBotId" aria-describedby="telegramBotIdHelp"
                   th:value="${plexProperties?.telegramProperties?.botId}">
            <small id="telegramBotIdHelp" class="form-text text-muted"><a href="https://telegram.me/botfather" target="_blank" rel="noopener noreferrer">BotFather</a> is the one
                bot to rule them all.

                1. Make a bot using BotFather
                2. Paste the bot token in this field
                3. Message the bot via Telegram (either via a direct message or a message via a group)
                4. Test the bot

                * To reset the notifications receiving user or group, run rm /boot/config/plugins/dynamix/telegram/chatid in the terminal and re-run steps 3. and 4.</small>
        </div>
        <div class="form-group">
            <label for="telegramChatId">Chat ID</label>
            <input type="text" class="form-control" id="telegramChatId"
                   aria-describedby="telegramChatIdHelp"
                   th:value="${plexProperties?.telegramProperties?.chatId}">
            <small id="telegramChatIdHelp" class="form-text text-muted">Add IDBot and ask it /getid</small>
        </div>
        <div class="form-group">
            <label>Notification Types</label>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.telegramProperties?.hasTmdbConnectionApi()}"
                       id="telegramTmdbApiConnectionNotification">
                <label class="form-check-label" for="telegramTmdbApiConnectionNotification">
                    TMDB API Connection
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.telegramProperties?.hasPlexServerConnection()}"
                       id="telegramPlexServerConnectionNotification">
                <label class="form-check-label" for="telegramPlexServerConnectionNotification">
                    Plex Server Connection
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.telegramProperties?.hasPlexMetadataUpdate()}"
                       id="telegramPlexMetadataUpdateNotification">
                <label class="form-check-label" for="telegramPlexMetadataUpdateNotification">
                    Plex Metadata Update
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.telegramProperties?.hasPlexLibraryUpdate()}"
                       id="telegramPlexLibraryUpdateNotification">
                <label class="form-check-label" for="telegramPlexLibraryUpdateNotification">
                    Plex Library Update
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.telegramProperties?.hasGapsMissingCollections()}"
                       id="telegramGapsMissingCollectionsNotification">
                <label class="form-check-label" for="telegramGapsMissingCollectionsNotification">
                    Gaps Missing Collections
                </label>
            </div>
        </div>
        <div class="form-group">
            <label for="telegramEnabled">Notification Agent</label>
            <select class="form-control" id="telegramEnabled">
                <option th:value="false">Disabled
                </option>
                <option th:value="true"
                        th:selected="${plexProperties?.telegramProperties?.getEnabled() ?: false}">Enabled
                </option>
            </select>
        </div>
        <div class="form-group">
            <a class="btn btn-primary" href="javascript:void(0)" id="saveTelegram" onclick="saveTelegram();"
               type="button">Save</a>
            <a class="btn btn-info" href="javascript:void(0)" id="testTelegram" onclick="testTelegram();"
               type="button">Test</a>
        </div>
    </form>

    <div class="spinner-border text-primary gaps-hide top-margin" id="telegramSpinner" role="status">
        <span class="sr-only">Loading...</span>
    </div>

    <div class="alert alert-dismissible alert-danger gaps-hide top-margin" id="telegramTestError">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Error!</h4>
        <p class="mb-0">Could not connect to Telegram. Check the key and logs and try again.</p>
    </div>

    <div class="alert alert-dismissible alert-success gaps-hide top-margin" id="telegramTestSuccess">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Success!</h4>
        <p class="mb-0">Telegram message sent.</p>
    </div>

    <div class="alert alert-dismissible alert-danger gaps-hide top-margin" id="telegramSaveError">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Error!</h4>
        <p class="mb-0">Could not save your Telegram notification. Check the logs and try again.</p>
    </div>

    <div class="alert alert-dismissible alert-success gaps-hide top-margin" id="telegramSaveSuccess">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Success!</h4>
        <p class="mb-0">Your Telegram notification saved successfully.</p>
    </div>
</header>

<header th:fragment="slack">
    <div class="row">
        <h4 class="col-10">Slack Notifications</h4>
        <a id="slackShowHide" class="btn btn-primary" data-toggle="collapse" href="#slackConfiguration" role="button" aria-expanded="false" aria-controls="slackConfiguration">
            Show/Hide
        </a>
    </div>
    <form id="slackConfiguration" class="collapse">
        <div class="form-group">
            <label for="slackWebHookUrl">Bot ID</label>
            <input type="text" class="form-control" id="slackWebHookUrl" aria-describedby="slackWebHookUrlHelp"
                   th:value="${plexProperties?.slackProperties?.webHookUrl}">
            <small id="slackWebHookUrlHelp" class="form-text text-muted">Get your WebHook as explained <a href="https://api.slack.com/incoming-webhooks"
                                                                                                          target="_blank" rel="noopener noreferrer">here.</a></small>
        </div>
        <div class="form-group">
            <label>Notification Types</label>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.slackProperties?.hasTmdbConnectionApi()}"
                       id="slackTmdbApiConnectionNotification">
                <label class="form-check-label" for="slackTmdbApiConnectionNotification">
                    TMDB API Connection
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.slackProperties?.hasPlexServerConnection()}"
                       id="slackPlexServerConnectionNotification">
                <label class="form-check-label" for="slackPlexServerConnectionNotification">
                    Plex Server Connection
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.slackProperties?.hasPlexMetadataUpdate()}"
                       id="slackPlexMetadataUpdateNotification">
                <label class="form-check-label" for="slackPlexMetadataUpdateNotification">
                    Plex Metadata Update
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.slackProperties?.hasPlexLibraryUpdate()}"
                       id="slackPlexLibraryUpdateNotification">
                <label class="form-check-label" for="slackPlexLibraryUpdateNotification">
                    Plex Library Update
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.slackProperties?.hasGapsMissingCollections()}"
                       id="slackGapsMissingCollectionsNotification">
                <label class="form-check-label" for="slackGapsMissingCollectionsNotification">
                    Gaps Missing Collections
                </label>
            </div>
        </div>
        <div class="form-group">
            <label for="slackEnabled">Notification Agent</label>
            <select class="form-control" id="slackEnabled">
                <option th:value="false">Disabled
                </option>
                <option th:value="true" th:selected="${plexProperties?.slackProperties?.getEnabled() ?: false}">
                    Enabled
                </option>
            </select>
        </div>
        <div class="form-group">
            <a class="btn btn-primary" href="javascript:void(0)" id="saveSlack" onclick="saveSlack();"
               type="button">Save</a>
            <a class="btn btn-info" href="javascript:void(0)" id="testSlack" onclick="testSlack();"
               type="button">Test</a>
        </div>
    </form>

    <div class="spinner-border text-primary gaps-hide top-margin" id="slackSpinner" role="status">
        <span class="sr-only">Loading...</span>
    </div>

    <div class="alert alert-dismissible alert-danger gaps-hide top-margin" id="slackTestError">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Error!</h4>
        <p class="mb-0">Could not connect to Slack. Check the key and logs and try again.</p>
    </div>

    <div class="alert alert-dismissible alert-success gaps-hide top-margin" id="slackTestSuccess">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Success!</h4>
        <p class="mb-0">Slack message sent.</p>
    </div>

    <div class="alert alert-dismissible alert-danger gaps-hide top-margin" id="slackSaveError">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Error!</h4>
        <p class="mb-0">Could not save your Slack notification. Check the logs and try again.</p>
    </div>

    <div class="alert alert-dismissible alert-success gaps-hide top-margin" id="slackSaveSuccess">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Success!</h4>
        <p class="mb-0">Your Slack notification saved successfully.</p>
    </div>
</header>

<header th:fragment="push-bullet">
    <div class="row">
        <h4 class="col-10">PushBullet Notifications</h4>
        <a id="pushBulletShowHide" class="btn btn-primary" data-toggle="collapse" href="#pushBulletConfiguration" role="button" aria-expanded="false"
           aria-controls="pushBulletConfiguration">
            Show/Hide
        </a>
    </div>
    <form id="pushBulletConfiguration" class="collapse">
        <div class="form-group">
            <label for="pushBulletChannelTag">Channel Tag</label>
            <input type="text" class="form-control" id="pushBulletChannelTag"
                   aria-describedby="pushBulletChannelTagHelp"
                   th:value="${plexProperties?.pushBulletProperties?.channelTag}">
            <small id="pushBulletChannelTagHelp" class="form-text text-muted">The channel name to send a message to.</a></small>
        </div>
        <div class="form-group">
            <label for="pushBulletAccessToken">Access Token</label>
            <input type="text" class="form-control" id="pushBulletAccessToken"
                   aria-describedby="pushBulletAccessTokenHelp"
                   th:value="${plexProperties?.pushBulletProperties?.accessToken}">
            <small id="pushBulletAccessTokenHelp" class="form-text text-muted">The Access Token can be found <a href="https://www.pushbullet.com/account"
                                                                                                                target="_blank" rel="noopener noreferrer">here.</a></small>
        </div>
        <div class="form-group">
            <label>Notification Types</label>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.pushBulletProperties?.hasTmdbConnectionApi()}"
                       id="pushBulletTmdbApiConnectionNotification">
                <label class="form-check-label" for="pushBulletTmdbApiConnectionNotification">
                    TMDB API Connection
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.pushBulletProperties?.hasPlexServerConnection()}"
                       id="pushBulletPlexServerConnectionNotification">
                <label class="form-check-label" for="pushBulletPlexServerConnectionNotification">
                    Plex Server Connection
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.pushBulletProperties?.hasPlexMetadataUpdate()}"
                       id="pushBulletPlexMetadataUpdateNotification">
                <label class="form-check-label" for="pushBulletPlexMetadataUpdateNotification">
                    Plex Metadata Update
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.pushBulletProperties?.hasPlexLibraryUpdate()}"
                       id="pushBulletPlexLibraryUpdateNotification">
                <label class="form-check-label" for="pushBulletPlexLibraryUpdateNotification">
                    Plex Library Update
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.pushBulletProperties?.hasGapsMissingCollections()}"
                       id="pushBulletGapsMissingCollectionsNotification">
                <label class="form-check-label" for="pushBulletGapsMissingCollectionsNotification">
                    Gaps Missing Collections
                </label>
            </div>
        </div>
        <div class="form-group">
            <label for="pushBulletEnabled">Notification Agent</label>
            <select class="form-control" id="pushBulletEnabled">
                <option th:value="false">Disabled
                </option>
                <option th:value="true"
                        th:selected="${plexProperties?.pushBulletProperties?.getEnabled() ?: false}">
                    Enabled
                </option>
            </select>
        </div>
        <div class="form-group">
            <a class="btn btn-primary" href="javascript:void(0)" id="savePushBullet" onclick="savePushBullet();"
               type="button">Save</a>
            <a class="btn btn-info" href="javascript:void(0)" id="testPushBullet" onclick="testPushBullet();"
               type="button">Test</a>
        </div>
    </form>

    <div class="spinner-border text-primary gaps-hide top-margin" id="pushBulletSpinner" role="status">
        <span class="sr-only">Loading...</span>
    </div>

    <div class="alert alert-dismissible alert-danger gaps-hide top-margin" id="pushBulletTestError">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Error!</h4>
        <p class="mb-0">Could not connect to PushBullet. Check the key and logs and try again.</p>
    </div>

    <div class="alert alert-dismissible alert-success gaps-hide top-margin" id="pushBulletTestSuccess">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Success!</h4>
        <p class="mb-0">PushBullet message sent.</p>
    </div>

    <div class="alert alert-dismissible alert-danger gaps-hide top-margin" id="pushBulletSaveError">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Error!</h4>
        <p class="mb-0">Could not save your PushBullet notification. Check the logs and try again.</p>
    </div>

    <div class="alert alert-dismissible alert-success gaps-hide top-margin" id="pushBulletSaveSuccess">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Success!</h4>
        <p class="mb-0">Your PushBullet notification saved successfully.</p>
    </div>
</header>

<header th:fragment="gotify">
    <div class="row">
        <h4 class="col-10">Gotify Notifications</h4>
        <a id="gotifyShowHide" class="btn btn-primary" data-toggle="collapse" href="#gotifyConfiguration" role="button" aria-expanded="false" aria-controls="gotifyConfiguration">
            Show/Hide
        </a>
    </div>
    <form id="gotifyConfiguration" class="collapse">
        <div class="form-group">
            <label for="gotifyAddress">Address</label>
            <input type="text" class="form-control" id="gotifyAddress" aria-describedby="gotifyAddressHelp"
                   th:value="${plexProperties?.gotifyProperties?.address}">
            <small id="gotifyAddressHelp" class="form-text text-muted">The full server base URL including protocol and port. eg: https://example.com:8888/</small>
        </div>
        <div class="form-group">
            <label for="gotifyToken">Token</label>
            <input type="text" class="form-control" id="gotifyToken" aria-describedby="gotifyTokenHelp"
                   th:value="${plexProperties?.gotifyProperties?.token}">
            <small id="gotifyTokenHelp" class="form-text text-muted">The App Token to use.</small>
        </div>
        <div class="form-group">
            <label>Notification Types</label>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.gotifyProperties?.hasTmdbConnectionApi()}"
                       id="gotifyTmdbApiConnectionNotification">
                <label class="form-check-label" for="gotifyTmdbApiConnectionNotification">
                    TMDB API Connection
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.gotifyProperties?.hasPlexServerConnection()}"
                       id="gotifyPlexServerConnectionNotification">
                <label class="form-check-label" for="gotifyPlexServerConnectionNotification">
                    Plex Server Connection
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.gotifyProperties?.hasPlexMetadataUpdate()}"
                       id="gotifyPlexMetadataUpdateNotification">
                <label class="form-check-label" for="gotifyPlexMetadataUpdateNotification">
                    Plex Metadata Update
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.gotifyProperties?.hasPlexLibraryUpdate()}"
                       id="gotifyPlexLibraryUpdateNotification">
                <label class="form-check-label" for="gotifyPlexLibraryUpdateNotification">
                    Plex Library Update
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.gotifyProperties?.hasGapsMissingCollections()}"
                       id="gotifyGapsMissingCollectionsNotification">
                <label class="form-check-label" for="gotifyGapsMissingCollectionsNotification">
                    Gaps Missing Collections
                </label>
            </div>
        </div>
        <div class="form-group">
            <label for="gotifyEnabled">Notification Agent</label>
            <select class="form-control" id="gotifyEnabled">
                <option th:value="false">Disabled
                </option>
                <option th:value="true"
                        th:selected="${plexProperties?.gotifyProperties?.getEnabled() ?: false}">
                    Enabled
                </option>
            </select>
        </div>
        <div class="form-group">
            <a class="btn btn-primary" href="javascript:void(0)" id="saveGotify" onclick="saveGotify();"
               type="button">Save</a>
            <a class="btn btn-info" href="javascript:void(0)" id="testGotify" onclick="testGotify();"
               type="button">Test</a>
        </div>
    </form>

    <div class="spinner-border text-primary gaps-hide top-margin" id="gotifySpinner" role="status">
        <span class="sr-only">Loading...</span>
    </div>

    <div class="alert alert-dismissible alert-danger gaps-hide top-margin" id="gotifyTestError">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Error!</h4>
        <p class="mb-0">Could not connect to Gotify. Check the key and logs and try again.</p>
    </div>

    <div class="alert alert-dismissible alert-success gaps-hide top-margin" id="gotifyTestSuccess">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Success!</h4>
        <p class="mb-0">Gotify message sent.</p>
    </div>

    <div class="alert alert-dismissible alert-danger gaps-hide top-margin" id="gotifySaveError">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Error!</h4>
        <p class="mb-0">Could not save your Gotify notification. Check the logs and try again.</p>
    </div>

    <div class="alert alert-dismissible alert-success gaps-hide top-margin" id="gotifySaveSuccess">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Success!</h4>
        <p class="mb-0">Your Gotify notification saved successfully.</p>
    </div>
</header>

<header th:fragment="email">
    <div class="row">
        <h4 class="col-10">Email Notifications</h4>
        <a id="emailShowHide" class="btn btn-primary" data-toggle="collapse" href="#emailConfiguration" role="button" aria-expanded="false" aria-controls="emailConfiguration">
            Show/Hide
        </a>
    </div>
    <form id="emailConfiguration" class="collapse">
        <div class="form-group">
            <label for="emailUsername">Username</label>
            <input type="text" class="form-control" id="emailUsername" aria-describedby="emailUsernameHelp"
                   th:value="${plexProperties?.emailProperties?.username}">
        </div>
        <div class="form-group">
            <label for="emailPassword">Password</label>
            <input type="password" class="form-control" id="emailPassword" aria-describedby="emailPasswordHelp"
                   th:value="${plexProperties?.emailProperties?.password}">
            <small id="emailPasswordHelp" class="form-text text-muted">Enter the username and password to login to your email account. Be aware that the password is stored
                unencrypted in the email configuration file.</small>
        </div>
        <div class="form-group">
            <label for="emailMailTo">Mail To</label>
            <input type="email" class="form-control" id="emailMailTo" aria-describedby="emailMailToHelp"
                   th:value="${plexProperties?.emailProperties?.mailTo}">
            <small id="emailMailToHelp" class="form-text text-muted">Recipient of status and error notifications. Specify one email address.</small>
        </div>
        <div class="form-group">
            <label for="emailMailFrom">Mail From</label>
            <input type="email" class="form-control" id="emailMailFrom" aria-describedby="emailMailFromHelp"
                   th:value="${plexProperties?.emailProperties?.mailFrom}">
            <small id="emailMailFromHelp" class="form-text text-muted">Email address of your mail account. This address is used as sender of the notifications.</small>
        </div>
        <div class="form-group">
            <label for="emailServer">Mail Server</label>
            <input type="url" class="form-control" id="emailServer" aria-describedby="emailServerHelp"
                   th:value="${plexProperties?.emailProperties?.mailServer}">
            <small id="emailServerHelp" class="form-text text-muted">Specify the name of the email server.</small>
        </div>
        <div class="form-group">
            <label for="emailPort">Mail Port</label>
            <input type="number" class="form-control" id="emailPort" aria-describedby="emailPortHelp"
                   th:value="${plexProperties?.emailProperties?.mailPort}">
            <small id="emailPortHelp" class="form-text text-muted">Specify the port of the email server.</small>
        </div>
        <div class="form-group">
            <label for="emailTransportProtocol">Transport Protocol</label>
            <input type="text" class="form-control" id="emailTransportProtocol"
                   aria-describedby="emailTransportProtocolHelp"
                   th:value="${plexProperties?.emailProperties?.mailTransportProtocol ?: 'smtp'}">
            <small id="emailTransportProtocolHelp" class="form-text text-muted">The email servers transport protocol. E.g. smtp.</small>
        </div>
        <div class="form-group">
            <label for="emailSmtpAuth">SMTP Authorization</label>
            <input type="text" class="form-control" id="emailSmtpAuth" aria-describedby="emailSmtpAuthHelp"
                   th:value="${plexProperties?.emailProperties?.mailSmtpAuth ?: 'true'}">
            <small id="emailSmtpAuthHelp" class="form-text text-muted">Use Smtp Auth. E.g. true</small>
        </div>
        <div class="form-group">
            <label for="emailSmtpTlsEnabled">SMTP TLS Enabled</label>
            <select class="form-control" id="emailSmtpTlsEnabled">
                <option th:value="false">Disabled
                </option>
                <option th:value="true"
                        th:selected="${plexProperties?.emailProperties?.getMailSmtpTlsEnabled() ?: false}">
                    Enabled
                </option>
            </select>
        </div>
        <div class="form-group">
            <label>Notification Types</label>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.emailProperties?.hasTmdbConnectionApi()}"
                       id="emailTmdbApiConnectionNotification">
                <label class="form-check-label" for="emailTmdbApiConnectionNotification">
                    TMDB API Connection
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.emailProperties?.hasPlexServerConnection()}"
                       id="emailPlexServerConnectionNotification">
                <label class="form-check-label" for="emailPlexServerConnectionNotification">
                    Plex Server Connection
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.emailProperties?.hasPlexMetadataUpdate()}"
                       id="emailPlexMetadataUpdateNotification">
                <label class="form-check-label" for="emailPlexMetadataUpdateNotification">
                    Plex Metadata Update
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.emailProperties?.hasPlexLibraryUpdate()}"
                       id="emailPlexLibraryUpdateNotification">
                <label class="form-check-label" for="emailPlexLibraryUpdateNotification">
                    Plex Library Update
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.emailProperties?.hasGapsMissingCollections()}"
                       id="emailGapsMissingCollectionsNotification">
                <label class="form-check-label" for="emailGapsMissingCollectionsNotification">
                    Gaps Missing Collections
                </label>
            </div>
        </div>
        <div class="form-group">
            <label for="emailEnabled">Notification Agent</label>
            <select class="form-control" id="emailEnabled">
                <option th:value="false">Disabled
                </option>
                <option th:value="true"
                        th:selected="${plexProperties?.emailProperties?.getEnabled() ?: false}">
                    Enabled
                </option>
            </select>
        </div>
        <div class="form-group">
            <a class="btn btn-primary" href="javascript:void(0)" id="saveEmail" onclick="saveEmail();"
               type="button">Save</a>
            <a class="btn btn-info" href="javascript:void(0)" id="testEmail" onclick="testEmail();"
               type="button">Test</a>
        </div>
    </form>

    <div class="spinner-border text-primary gaps-hide top-margin" id="emailSpinner" role="status">
        <span class="sr-only">Loading...</span>
    </div>

    <div class="alert alert-dismissible alert-danger gaps-hide top-margin" id="emailTestError">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Error!</h4>
        <p class="mb-0">Could not connect to Email. Check the key and logs and try again.</p>
    </div>

    <div class="alert alert-dismissible alert-success gaps-hide top-margin" id="emailTestSuccess">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Success!</h4>
        <p class="mb-0">Email message sent.</p>
    </div>

    <div class="alert alert-dismissible alert-danger gaps-hide top-margin" id="emailSaveError">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Error!</h4>
        <p class="mb-0">Could not save your Email notification. Check the logs and try again.</p>
    </div>

    <div class="alert alert-dismissible alert-success gaps-hide top-margin" id="emailSaveSuccess">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Success!</h4>
        <p class="mb-0">Your Email notification saved successfully.</p>
    </div>
</header>

<header th:fragment="push-over">
    <div class="row">
        <h4 class="col-10">PushOver Notifications</h4>
        <a id="pushOverShowHide" class="btn btn-primary" data-toggle="collapse" href="#pushOverConfiguration" role="button" aria-expanded="false"
           aria-controls="pushOverConfiguration">
            Show/Hide
        </a>
    </div>
    <form id="pushOverConfiguration" class="collapse">
        <div class="form-group">
            <label for="pushOverToken">Token</label>
            <input type="text" class="form-control" id="pushOverToken" aria-describedby="pushOverTokenHelp"
                   th:value="${plexProperties?.pushOverProperties?.token}">
            <small id="pushOverTokenHelp" class="form-text text-muted"></small>
        </div>
        <div class="form-group">
            <label for="pushOverUser">User</label>
            <input type="text" class="form-control" id="pushOverUser"
                   aria-describedby="pushOverUserHelp"
                   th:value="${plexProperties?.pushOverProperties?.user}">
            <small id="pushOverUserHelp" class="form-text text-muted"></small>
        </div>
        <div class="form-group">
            <label for="pushOverPriority">Priority</label>
            <select class="form-control" id="pushOverPriority">
                <option value="-2"
                        th:selected="${T(org.apache.commons.lang3.math.NumberUtils).isCreatable(plexProperties?.pushOverProperties?.getPriority()) && plexProperties?.pushOverProperties?.getPriority()?.equals(-2) ? true : false}">
                    No Notification/Alert
                </option>
                <option value="-1"
                        th:selected="${T(org.apache.commons.lang3.math.NumberUtils).isCreatable(plexProperties?.pushOverProperties?.getPriority()) && plexProperties?.pushOverProperties?.getPriority()?.equals(-1) ? true : false}">
                    Quiet Notification
                </option>
                <option value="0"
                        th:selected="${T(org.apache.commons.lang3.math.NumberUtils).isCreatable(plexProperties?.pushOverProperties?.getPriority()) && plexProperties?.pushOverProperties?.getPriority()?.equals(0) ? true : false}">
                    Normal Priority
                </option>
                <option value="1"
                        th:selected="${T(org.apache.commons.lang3.math.NumberUtils).isCreatable(plexProperties?.pushOverProperties?.getPriority()) &&  plexProperties?.pushOverProperties?.getPriority()?.equals(1) ? true : false}">
                    High-Priority
                </option>
                <option value="2"
                        th:selected="${T(org.apache.commons.lang3.math.NumberUtils).isCreatable(plexProperties?.pushOverProperties?.getPriority()) &&  plexProperties?.pushOverProperties?.getPriority()?.equals(2) ? true : false}">
                    High-Priority with required user confirmation
                </option>
            </select>
        </div>
        <div class="form-group">
            <label for="pushOverSound">Sound</label>
            <select class="form-control" id="pushOverSound">
            </select>
        </div>
        <div class="form-group">
            <label for="pushOverRetry">Retry</label>
            <input type="number" class="form-control" id="pushOverRetry" aria-describedby="pushOverRetryHelp"
                   th:value="${plexProperties?.pushOverProperties?.retry ?: 60}">
            <small id="pushOverRetryHelp" class="form-text text-muted"></small>
        </div>
        <div class="form-group">
            <label for="pushOverExpire">Expire</label>
            <input type="number" class="form-control" id="pushOverExpire" aria-describedby="pushOverExpireHelp"
                   th:value="${plexProperties?.pushOverProperties?.expire ?: 3600}">
            <small id="pushOverExpireHelp" class="form-text text-muted"></small>
        </div>
        <div class="form-group">
            <label>Notification Types</label>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.pushOverProperties?.hasTmdbConnectionApi()}"
                       id="pushOverTmdbApiConnectionNotification">
                <label class="form-check-label" for="pushOverTmdbApiConnectionNotification">
                    TMDB API Connection
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.pushOverProperties?.hasPlexServerConnection()}"
                       id="pushOverPlexServerConnectionNotification">
                <label class="form-check-label" for="pushOverPlexServerConnectionNotification">
                    Plex Server Connection
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.pushOverProperties?.hasPlexMetadataUpdate()}"
                       id="pushOverPlexMetadataUpdateNotification">
                <label class="form-check-label" for="pushOverPlexMetadataUpdateNotification">
                    Plex Metadata Update
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.pushOverProperties?.hasPlexLibraryUpdate()}"
                       id="pushOverPlexLibraryUpdateNotification">
                <label class="form-check-label" for="pushOverPlexLibraryUpdateNotification">
                    Plex Library Update
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.pushOverProperties?.hasGapsMissingCollections()}"
                       id="pushOverGapsMissingCollectionsNotification">
                <label class="form-check-label" for="pushOverGapsMissingCollectionsNotification">
                    Gaps Missing Collections
                </label>
            </div>
        </div>
        <div class="form-group">
            <label for="pushOverEnabled">Notification Agent</label>
            <select class="form-control" id="pushOverEnabled">
                <option th:value="false">Disabled
                </option>
                <option th:value="true"
                        th:selected="${plexProperties?.pushOverProperties?.getEnabled() ?: false}">Enabled
                </option>
            </select>
        </div>
        <div class="form-group">
            <a class="btn btn-primary" href="javascript:void(0)" id="savePushOver" onclick="savePushOver();"
               type="button">Save</a>
            <a class="btn btn-info" href="javascript:void(0)" id="testPushOver" onclick="testPushOver();"
               type="button">Test</a>
        </div>
    </form>

    <div class="spinner-border text-primary gaps-hide top-margin" id="pushOverSpinner" role="status">
        <span class="sr-only">Loading...</span>
    </div>

    <div class="alert alert-dismissible alert-danger gaps-hide top-margin" id="pushOverTestError">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Error!</h4>
        <p class="mb-0">Could not connect to PushOver. Check the key and logs and try again.</p>
    </div>

    <div class="alert alert-dismissible alert-success gaps-hide top-margin" id="pushOverTestSuccess">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Success!</h4>
        <p class="mb-0">PushOver message sent.</p>
    </div>

    <div class="alert alert-dismissible alert-danger gaps-hide top-margin" id="pushOverSaveError">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Error!</h4>
        <p class="mb-0">Could not save your PushOver notification. Check the logs and try again.</p>
    </div>

    <div class="alert alert-dismissible alert-success gaps-hide top-margin" id="pushOverSaveSuccess">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Success!</h4>
        <p class="mb-0">Your PushOver notification saved successfully.</p>
    </div>
</header>

<header th:fragment="discord">
    <div class="row">
        <h4 class="col-10">Discord Notifications</h4>
        <a id="discordShowHide" class="btn btn-primary" data-toggle="collapse" href="#discordConfiguration" role="button" aria-expanded="false"
           aria-controls="discordConfiguration">
            Show/Hide
        </a>
    </div>
    <form id="discordConfiguration" class="collapse">
        <div class="form-group">
            <label for="discordWebHookUrl">WebHook Url</label>
            <input type="text" class="form-control" id="discordWebHookUrl" aria-describedby="discordWebHookUrlHelp"
                   th:value="${plexProperties?.discordProperties?.webHookUrl}">
            <small id="discordWebHookUrlHelp" class="form-text text-muted">Get your WebHook as explained <a
                    href="https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks"
                    target="_blank" rel="noopener noreferrer">here.</a></small>
        </div>
        <div class="form-group">
            <label>Notification Types</label>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.discordProperties?.hasTmdbConnectionApi()}"
                       id="discordTmdbApiConnectionNotification">
                <label class="form-check-label" for="discordTmdbApiConnectionNotification">
                    TMDB API Connection
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.discordProperties?.hasPlexServerConnection()}"
                       id="discordPlexServerConnectionNotification">
                <label class="form-check-label" for="discordPlexServerConnectionNotification">
                    Plex Server Connection
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.discordProperties?.hasPlexMetadataUpdate()}"
                       id="discordPlexMetadataUpdateNotification">
                <label class="form-check-label" for="discordPlexMetadataUpdateNotification">
                    Plex Metadata Update
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.discordProperties?.hasPlexLibraryUpdate()}"
                       id="discordPlexLibraryUpdateNotification">
                <label class="form-check-label" for="discordPlexLibraryUpdateNotification">
                    Plex Library Update
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       th:checked="${plexProperties?.discordProperties?.hasGapsMissingCollections()}"
                       id="discordGapsMissingCollectionsNotification">
                <label class="form-check-label" for="discordGapsMissingCollectionsNotification">
                    Gaps Missing Collections
                </label>
            </div>
        </div>
        <div class="form-group">
            <label for="discordEnabled">Notification Agent</label>
            <select class="form-control" id="discordEnabled">
                <option th:value="false">Disabled
                </option>
                <option th:value="true" th:selected="${plexProperties?.discordProperties?.getEnabled() ?: false}">
                    Enabled
                </option>
            </select>
        </div>
        <div class="form-group">
            <a class="btn btn-primary" href="javascript:void(0)" id="saveDiscord" onclick="saveDiscord();"
               type="button">Save</a>
            <a class="btn btn-info" href="javascript:void(0)" id="testDiscord" onclick="testDiscord();"
               type="button">Test</a>
        </div>
    </form>

    <div class="spinner-border text-primary gaps-hide top-margin" id="discordSpinner" role="status">
        <span class="sr-only">Loading...</span>
    </div>

    <div class="alert alert-dismissible alert-danger gaps-hide top-margin" id="discordTestError">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Error!</h4>
        <p class="mb-0">Could not connect to Discord. Check the key and logs and try again.</p>
    </div>

    <div class="alert alert-dismissible alert-success gaps-hide top-margin" id="discordTestSuccess">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Success!</h4>
        <p class="mb-0">Discord message sent.</p>
    </div>

    <div class="alert alert-dismissible alert-danger gaps-hide top-margin" id="discordSaveError">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Error!</h4>
        <p class="mb-0">Could not save your Discord notification. Check the logs and try again.</p>
    </div>

    <div class="alert alert-dismissible alert-success gaps-hide top-margin" id="discordSaveSuccess">
        <button class="close" data-hide="alert" type="button">&times;</button>
        <h4 class="alert-heading">Success!</h4>
        <p class="mb-0">Your Discord notification saved successfully.</p>
    </div>
</header>
</body>
</html>