<!DOCTYPE html>
<html lang="en">
<head>
    <title>Queue Manager</title>
    <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <script>
      function refreshPage() {
          window.location.reload();
      }
    </script>
</head>
    <script src="/static/userpanel.js"></script>
    <div class="panel">
    <div class="navbar">
        <p>Rewards Queue Management</p>
        <img alt="Ownchat Bot logo, whimsical robot" src="/static/img/ownchatbotwide.png">
    </div>
        <body>
            {% if votes %}
            <table>
                <thead>
                    <tr>
                        <th style="width: 20%;">Active Votes</th>
                        <th style="width: 40%;">Description</th>
                        <th style="width: 20%;">Price</th>
                        <th style="width: 20%;">Current Tally</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                {% for vote in votes %}
                    <tr>
                        <td> {{ prefix }}{{ vote[0] }} </td>
                        <td> {{ vote[2] }} </td>

                        {% set points_label = 'point' if rewards[vote[0]]["price"] == 1 else 'points' %}
                        <td> {{ rewards[vote[0]]["price"] }} {{ points_label }}</td>

                        {% set votes_label = 'vote' if vote[1] == 1 else 'votes' %}

                        <td> {{ vote[1] }} {{ votes_label }}</td>
                        <td></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
            <h3> You currently have no active votes. </h3>
            {% endif %}
            <hr>
            {% if goals %}
            <table>
                <thead>
                    <tr>
                        <th style="width: 20%;">Active Goals</th>
                        <th style="width: 40%;">Description</th>
                        <th style="width: 25%;">Progress</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                {% for goal in goals %}
                    <tr>
                        <td> {{ prefix }}{{ goal[0] }} </td>
                        <td> {{ goal[3] }} </td>
                        {% set progress = goal[1] / goal[2] * 100 %}
                        <td>
                            <div class="bar-light-grey bar-tiny bar-round" style="position: relative;">
                                <div class="bar-round bar-blue" style="text-align: center; width:{{ progress }}%;">{{ '%0.0f'| format(progress| float) }}%
                                </div>
                                {% set milestones = rewards[goal[0]]["milestones"] %}
                                {% for milestone_key, milestone in milestones.items() %}
                                    {% if milestones[milestone_key][0] and milestones[milestone_key][1] %}
                                        {% if milestones[milestone_key][1] < goal[2] %}
                                            {% set milestone_progress = milestones[milestone_key][1] / goal[2] * 100 %}
                                                <div class="milestone-marker" style="position: absolute; left: {{ milestone_progress }}%; transform: translateX(-50%);">
                                                    <img src="/static/img/milestone.png" style="width: 16px; height: 16px;" title="{{ milestones[milestone_key][1] }} points. {{ milestones[milestone_key][0] }}">
                                                </div>
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                            </div>
                        </td>

                        {% if goal[1] == goal[2] %}
                        <td> {{ goal[1] }} / {{ goal[2] }} <img alt="Party horn with confetti" src=/static/img/tada.png style="width: 24px; height: 24px;"></td>
                        {% else %}
                        <td> {{ goal[1] }} / {{ goal[2] }} </td>
                        {% endif %}
                    </tr>
                {% endfor %}
                    <tr style="border-bottom: none;">
                        <td>
                        </td>
                        <td>
                        </td>
                        <td style="font-size: small;">
                            (Mouse over flags for milestone details)
                        </td>
                    </tr>
                </tbody>
            </table>
            {% else %}
            <h3> You currently have no active goals. </h3>
            {% endif %}
            <hr>
            <h3>Redeems Queue</h3>
            {% if queue %}
            <a href="/mgmt/clearfulfilled"><button class="button button2">Clear Fullfilled Rewards</button></a>&nbsp;&nbsp;<a href="/mgmt/clearqueue"><button class="button button2">Clear All Rewards</button></a>
            <table>
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Reward</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>{{ row[2] }}</s></td>
                        {% else %}
                        <td>{{ row[2] }}</td>
                        {% endif %}
                        <td>{{ rewards[row[2]]["info"] }}</td>
                        <td>{{ row[6] }}</td>
                        {% if row[4] %}
                        {% if row[5] %}
                        <td>Refunded</td>
                        {% else %}
                        <td><a href="/mgmt/refund?reward={{ row[2] }}&username={{ row[6] }}&rewarder_id={{ row[3] }}&reward_id={{ row[0] }}"><button class="button button2">Refund</button></a></td>
                        {% endif %}
                        {% else %}
                        <td><a href="/mgmt/fulfill?reward_id={{ row[0] }}&username={{ row[6] }}&reward_name={{ row[2] }}"><button class="button button2">Fulfill</button></a></td>
                        {% endif %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p>There are currently no rewards waiting in the queue.</p>
            {% endif %}
        </body>
    </div>
    <script>
        setTimeout(refreshPage, 30 * 1000);
    </script>
</html>

