<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8" />
    <title>{% block title %}Getränkeliste{% endblock %}</title>
    <link rel="stylesheet" href="/static/style.css" />
    <link rel="icon" type="image/png" href="/static/favicon.ico" />
    <!-- GitHub Icon -->
    <style>
        .github-icon-link {
            position: absolute;
            top: 16px;
            right: 16px;
            display: inline-block;
        }
        .github-icon-link svg {
            width: 32px;
            height: 32px;
            fill: #181717;
            transition: fill 0.2s;
        }
        .github-icon-link:hover svg {
            fill: #0366d6;
        }
    </style>
    <a class="github-icon-link" href="https://github.com/Moritz921/GetraenkelisteWebsite" target="_blank" title="GitHub" rel="noopener">
        <svg viewBox="0 0 16 16" aria-hidden="true">
            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
            0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52
            -.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2
            -3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64
            -.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08
            2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01
            1.93-.01 2.19 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
        </svg>
    </a>
</head>
<body>
    <header>
        <img src="/static/fachschaftslogo.png" alt="Logo" style="height: 50px; vertical-align: middle" />
        <h1>Getränkeliste</h1>
        {% if user %}
            <p>
                Angemeldet als {{ user.preferred_username }}{% if 'Getraenkeliste Verantwortliche' in user.groups %} (Admin){% endif %} –
                <a href="/logout">Logout</a>
            </p>
        {% endif %}
    </header>
    <main>
        {% block content %}{% endblock %}
        {% if user %}
            {% if 'Getraenkeliste Postpaid' in user.groups %}
                <p>Du bist Teil der Fachschaft Informatik.</p>
                {% if prepaid_users_from_curr_user %}
                    <p>Liste deiner Prepaid-User:</p>
                    <table>
                        <thead>
                            <tr>
                                <th style="padding: 0.5em 1em">Username</th>
                                <th style="padding: 0.5em 1em">Key</th>
                                <th style="padding: 0.5em 1em">Money (€)</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for prepaid_user_i in prepaid_users_from_curr_user %}
                                <tr{% if prepaid_user_i.money <= 0 %} style="background-color: rgba(179, 6, 44, 0.5)"{% endif %}>
                                    <td style="padding: 0.5em 1em">{{ prepaid_user_i.username }}</td>
                                    <td style="padding: 0.5em 1em">{{ prepaid_user_i.user_key }}</td>
                                    <td style="padding: 0.5em 1em">{{ prepaid_user_i.money / 100 }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% endif %}
                <p>Füge Nutzer zur Prepaid Liste hinzu:</p>
                <form method="post" action="/add_prepaid_user" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
                    <label for="username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
                    <input id="username" type="text" name="username" placeholder="Username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100%;" />
                    <label for="start_money" style="margin: 0 0.5em 0 0; font-weight: bold">Start Money (€):</label>
                    <input id="start_money" type="number" name="start_money" placeholder="Start Money" step="0.01" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
                    <button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Add User</button>
                </form>
                <p>Füge bestehendem Prepaid-User Geld hinzu:</p>
                {% if db_users_prepaid %}
                    <form method="post" action="/add_money_prepaid_user" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
                        <label for="addmoney-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
                        <select id="addmoney-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
                            {% for db_user in db_users_prepaid %}
                                <option value="{{ db_user.username }}">{{ db_user.username }}</option>
                            {% endfor %}
                        </select>
                        <label for="addmoney-money" style="margin: 0 0.5em 0 0; font-weight: bold">Amount (€):</label>
                        <input id="addmoney-money" type="number" name="money" placeholder="Money" step="0.01" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
                        <button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Add Money</button>
                    </form>
                {% else %}
                    <p>Es sind keine Prepaid-User vorhanden.</p>
                {% endif %}
            {% endif %}
            {% if 'Getraenkeliste Verantwortliche' in user.groups %}
                <h2>Admin Interface</h2>
                <p>Ausgleichszahlung:</p>
                <p>Der eingegebene Betrag wird vom aktuell eingeloggten Nutzer abgezogen und dem eingetragenem Nutzer gutgeschrieben.</p>
                <form method="post" action="/payup" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
                    <label for="payup-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
                    <select id="payup-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
                        {% for db_user in users %}
                            <option value="{{ db_user.username }}">{{ db_user.username }}</option>
                        {% endfor %}
                    </select>
                    <label for="payup-money" style="margin: 0 0.5em 0 0; font-weight: bold">Amount (€):</label>
                    <input id="payup-money" type="number" name="money" placeholder="Money" step="0.01" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
                    <button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Pay Up</button>
                </form>
                <h3>Postpaid Liste</h3>
                <p>Users in postpaid database:</p>
                <table>
                    <thead>
                        <tr>
                            <th style="padding: 0.5em 1em">ID</th>
                            <th style="padding: 0.5em 1em">Username</th>
                            <th style="padding: 0.5em 1em">Money (€)</th>
                            <th style="padding: 0.5em 1em">Activated</th>
                            <th style="padding: 0.5em 1em">last drink</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for db_user_i in users %}
                            <tr{% if db_user_i.money <= -5000 %} style="background-color: rgba(179, 6, 44, 0.5)"{% endif %}>
                                <td style="padding: 0.5em 1em">{{ db_user_i.id }}</td>
                                <td style="padding: 0.5em 1em">{{ db_user_i.username }}</td>
                                <td style="padding: 0.5em 1em">{{ db_user_i.money / 100 }}</td>
                                <td style="padding: 0.5em 1em">{{ db_user_i.activated }}</td>
                                <td style="padding: 0.5em 1em">{{ db_user_i.last_drink }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <p>(De-)Activate User</p>
                <form method="post" action="/toggle_activated_user_postpaid" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
                    <label for="activate-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
                    <select id="activate-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
                        {% for db_user in users %}
                            <option value="{{ db_user.username }}">{{ db_user.username }}</option>
                        {% endfor %}
                    </select>
                    <button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Toggle Activation</button>
                </form>
                <p>Set user money:</p>
                <form method="post" action="/set_money_postpaid" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
                    <label for="setmoney-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
                    <select id="setmoney-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
                        {% for db_user in users %}
                            <option value="{{ db_user.username }}">{{ db_user.username }}</option>
                        {% endfor %}
                    </select>
                    <label for="setmoney-money" style="margin: 0 0.5em 0 0; font-weight: bold">Amount (€):</label>
                    <input id="setmoney-money" type="number" name="money" placeholder="Money" step="0.01" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px; width: 100px;" />
                    <button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Set Money</button>
                </form>
                <h3>Prepaid Liste</h3>
                <p>Users in prepaid database:</p>
                {% if db_users_prepaid %}
                    <table>
                        <thead>
                            <tr>
                                <th style="padding: 0.5em 1em">ID</th>
                                <th style="padding: 0.5em 1em">Username</th>
                                <th style="padding: 0.5em 1em">Key</th>
                                <th style="padding: 0.5em 1em">Postpaid_User ID</th>
                                <th style="padding: 0.5em 1em">Money (€)</th>
                                <th style="padding: 0.5em 1em">Activated</th>
                                <th style="padding: 0.5em 1em">last drink</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for prepaid_user_i in db_users_prepaid %}
                                <tr{% if prepaid_user_i.money <= 0 %} style="background-color: rgba(179, 6, 44, 0.5)"{% endif %}>
                                    <td style="padding: 0.5em 1em">{{ prepaid_user_i.id }}</td>
                                    <td style="padding: 0.5em 1em">{{ prepaid_user_i.username }}</td>
                                    <td style="padding: 0.5em 1em">{{ prepaid_user_i.user_key }}</td>
                                    <td style="padding: 0.5em 1em">{{ prepaid_user_i.postpaid_user_id }}</td>
                                    <td style="padding: 0.5em 1em">{{ prepaid_user_i.money / 100 }}</td>
                                    <td style="padding: 0.5em 1em">{{ prepaid_user_i.activated }}</td>
                                    <td style="padding: 0.5em 1em">{{ prepaid_user_i.last_drink }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    <p>(De-)Activate User</p>
                    <form method="post" action="/toggle_activated_user_prepaid" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
                        <label for="activate-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
                        <select id="activate-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
                            {% for db_user in db_users_prepaid %}
                                <option value="{{ db_user.username }}">{{ db_user.username }}</option>
                            {% endfor %}
                        </select>
                        <button type="submit" style="padding: 0.5em 1em; background: rgb(0, 97, 143); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Toggle Activation</button>
                    </form>
                    <p>Delete User</p>
                    <form method="post" action="/del_prepaid_user" style="display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: var(--hellgrau); padding: 1em; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); max-width: 600px;">
                        <label for="del-username" style="margin: 0 0.5em 0 0; font-weight: bold">Username:</label>
                        <select id="del-username" name="username" required style="padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
                            {% for db_user in db_users_prepaid %}
                                <option value="{{ db_user.username }}">{{ db_user.username }}</option>
                            {% endfor %}
                        </select>
                        <button type="submit" style="padding: 0.5em 1em; background: rgb(179, 6, 44); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Delete User</button>
                {% else %}
                    <tr>
                        <td colspan="7" style="text-align: center">No users in prepaid database</td>
                    </tr>
                {% endif %}
            {% endif %}
        {% endif %}
    </main>
</body>
</html>
