<html>
        <!doctype html>
        <html lang="en">
          <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <meta name="description" content="Karaokards bot for twitch chat">
            <meta name="author" content="Martyn Ranyard">
            <title>Karaokards</title>
        
            <!-- Bootstrap core CSS -->
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
            <!-- Custom styles for this template -->
            <link href="/cover.css" rel="stylesheet">
        
            <style>
              .bd-placeholder-img {
                font-size: 1.125rem;
                text-anchor: middle;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
              }
        
              @media (min-width: 768px) {
                .bd-placeholder-img-lg {
                  font-size: 3.5rem;
                }
                    }
                    
                    li.match-nomatch{
                        background-color: #1e2122;
                    }
                    li.match-matchtrack{
                        background-color: #E9B000;
                    }
                    li.match-fullmatch{
                        background-color: #008F95;
                    }
                    li.match-matchtrackfuzzt{
                        background-color: darkgray;
                    }
                    li.match-fullmatchfuzzy{
                        background-color: darkgray;
                    }
                    a{
                        text-decoration-line: underline;
                    }
                    .displaySetting{
                      display: inline
                    }
                    .hiddenDisplaySetting{
                      display: none;
                    }
                    .hiddenSave {
                      display: none;
                    }
                    .editSetting{
                      display: none;
                    }
                    .visibleEditSetting{
                      display: inline;
                    }
                    .visibleSave {
                      display: inline;
                    }
        
            </style>
          </head>
          <body class="text-center">
                <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
                <header class="masthead mb-auto">
                <div class="inner">
                  <h3 class="masthead-brand">Karaokards</h3>
                  <nav class="nav nav-masthead justify-content-center">
                    <a class="nav-link active" href="/">Home</a>
                  </nav>
                </div>
                </header>
                <main role="main" class="inner cover">
                  
                <script>
                    function editMode() {
                        var alldisps = document.getElementsByClassName("displaySetting");
                        for (item of alldisps) {
                          item.classList.add("hiddenDisplaySetting")
                        }
                        for (item of alldisps) {
                          item.classList.remove("displaySetting")
                        }
                        var alldisps = document.getElementsByClassName("editSetting");
                        for (item of alldisps) {
                          item.classList.add("visibleEditSetting")
                        }
                        for (item of alldisps) {
                          item.classList.remove("editSetting")
                        }
                        document.getElementById("saveButton").classList.remove("hiddenSave")
                        document.getElementById("saveButton").classList.add("visibleSave")
                        document.getElementById("leaveButton").classList.remove("hiddenSave")
                        document.getElementById("leaveButton").classList.add("visibleSave")
                        document.getElementById("yuhateme").classList.remove("hiddenSave")
                        document.getElementById("yuhateme").classList.add("visibleSave")
                    }
                    </script>
                        <h1 class="cover-heading">Karaokards admin panel for {{.Channel}}!!!</h1>
                        <form method="POST">
                        {{ if .HasLeft }}
                        <h2>Not in your channel at the moment!</h2>
                        <p>The bot is not currently in your channel, chances are you've not ever asked it to join, you asked it to leave, or something went horribly wrong.</p>
                        <p>You can invite the bot to your channel by clicking here : <input id="joinButton" type="submit" name="join" value="Come on in"></p>
                        {{ else }}
                          {{ if .Leaving }}
                          <h2>Do you really want this bot to leave your channel?</h2>
                          <p><input id="leaveButton" type="submit" name="reallyleave" value="Really leave twitch channel"></p>
                          {{ else }}
                          <h2>Note you can give your moderators the url you are on right now to control this bot.  They don't have to be logged into twitch to do so.</h2>
                          <table>
                            <thead><tr><td>Channel Data :</td><td><input type="button" value="Edit" onclick="javascript:editMode();"></td></tr></thead>
                            <tbody>
                            <tr><td>Member of channel since {{.SinceTimeUTC}}</td></tr>
                            <tr><td>Command for prompt:</td><td class="displaySetting"></tdclass>{{.Command}}</td><td class="editSetting"><input type="text" name="Command" value="{{.Command}}"></td></tr>
                            <tr><td>Extra prompts (one per line):</td><td class="displaySetting">{{.ExtraStrings}}</td><td class="editSetting"><textarea name="ExtraStrings" >{{.ExtraStrings}}</textarea></td></tr>
                            <tr><td>&nbsp;</td><td><input id="saveButton" type="submit" class="hiddenSave" name="save" value="Save changes"></td></tr>
                            <tr id="yuhateme" class="hiddenSave"><td>Or... please don't go but...</td></tr>
                            <tr><td><input id="leaveButton" type="submit" class="hiddenSave" name="leave" value="Leave twitch channel"></td></tr>
                          </tbody>
                          </table>
                          {{ end }}
                        {{ end }}
                        </form>
                </main>
        <footer class="mastfoot mt-auto">
                <div class="inner">
                  <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
                </div>
                </footer>
                </div>
                </body>
                </html>
    </body>
</html>