<!DOCTYPE html>
<html>
    <head>
        <title>Discord Bot Management</title>
        <link rel="stylesheet" href="{{ url_for('static', filename='css/bot.css') }}">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/button.css') }}">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/category.css') }}">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/console.css') }}">
        <script src="{{ url_for('static', filename='js/main.js') }}"></script>

        <script>
            onload = function(){
                //start at bottom of textarea
                console = document.getElementById("console")
                console.scrollTop = console.scrollHeight;
            }
        </script>
    </head>

    <body>
        <h1 class="mainHeader">Discord Bot Management</h1>

        <div id="botInfo">
            <h2>{{ bot.user }}</h2>
            <p>ID: {{ bot.user.id }}</p>
            <p>Command Prefix: {{ command_prefix }}</p>
            <p>Shard Count: {{ bot.shard_count }}</p>
        </div>

        <ul id="botCategories">
            <li>
                <a href="{{ url_for('cogs') }}">Cogs</a>
            </li>

            <li>
                <a href="{{ url_for('commands') }}">Commands</a>
            </li>

            <li>
                <a href="{{ url_for('shards') }}">Shards</a>
            </li>

            <li>
                <a href="{{ url_for('console') }}">Console</a>
            </li>
        </ul>

        <div class="category">
            <textarea readonly id="console">{{ console_text }}</textarea>
            <form id="consoleForm" method="POST">
                <input type="hidden" name="formName" value="execute">
                <input type="submit" value="Execute" name="btnExecute"/>
                <div style="overflow: hidden; padding-right: .5em;">
                    <input required type="text" name="txtExecute" autocomplete="off"/>
                </div>

            </form>

            <form method="POST">
                <input type="hidden" name="formName" value="consoleSync">
                <input class="greenButton" type="submit" value="Sync" name="btnSync"/>
            </form>
        </div>
    </body>
</html>
