<!DOCTYPE html>
<html lang="en">
<head>
    <title>OwnchatBot</title>
    <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
    
    <div class="navbar">
        <div class="tab">
            <button tabindex="0" class="tablinks" data-tab="ocbinfo" onclick="setActiveTabAndNavigate('ocbinfo', '{{ url_for('web_panels.user_panel', instance=instance, username=username) }}')">OwnchatBot Info</button>
            <button tabindex="1" class="tablinks" data-tab="rewards" onclick="setActiveTabAndNavigate('rewards', '{{ url_for('web_panels.user_panel', instance=instance, username=username) }}')">Points and Rewards</button>
            <button tabindex="2" style="background-color: #003399; color: white;" class="tablinks" data-tab="queue" onclick="window.location.href='{{ url_for('web_panels.user_queue', activeTab='queue') }}'">Rewards Queue</button>
        </div>
        <img alt="Ownchat Bot logo, whimsical robot" src="/static/img/ownchatbotwide.png">
    </div>

    <div id="queue" class="queuecontent">

        <body>
        <i>This page auto-refreshes every 30 seconds.</i>
            <h3>Queue</h3>
            {% if queue %}
            <table>
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>User</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                {% for row in queue %}
                <tr>
                    <td>{{ row[1].replace(tzinfo=utc_timezone).astimezone().strftime("%H:%M") }}</td>
                    {% if row[4] %}
                        <td><s>{{ prefix }}{{ row[2] }}</s></td>
                    {% else %}
                        <td>{{ prefix }}{{ row[2] }}</td>
                    {% endif %}
                    <td>{{ all_rewards[row[2]]["info"] }}</td>
                    {% if row[6] %}
                    <td>{{ row[6] }}</td>
                    {% else %}
                    <td></td>
                    {% endif %}
                </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
            &nbsp;&nbsp;<span style="color: yellow;">The queue is currently empty</span>
            {% endif %}
        </body>
        <br><br>
    </div>
    
    <script>
        window.onload = function() {
            var activeTab = 'queue';
            localStorage.setItem('activeTab', activeTab);
        }
        
        function setActiveTabAndNavigate(tabName, url) {
            localStorage.setItem('activeTab', tabName);
            window.location.href = url;
        }

        function refreshPage() {
            window.location.reload();
        }
    
        setTimeout(refreshPage, 30 * 1000);
    </script>

</html>
