{% include 'common/begin.html' %}

<main>
    <h1>Welcome back, <a>{{ user.display_name or 'Guest' }}</a>!</h1>

    <div class="profile-base">
        <div class="profile-header">
            <img src="{{ user.avatar }}" alt="Discord profile avatar">
            <h2>{{ user.username or 'Guest' }}</h2>
        </div>
        <div class="profile-info">
            <b>Your reward rank: </b> {{ user.role or 'default' }}<br>
            <b>API credits: </b> {{ user.credits or 0 }}<br>
            <b>Secret API key (click to reveal): </b>
            <br>
            <!-- <span class="secret">{{ user.api_key or '-' }}</span> -->
            <span class="secret">{{ "API key not shown for security reasons" or '-' }}</span>
            <br>(Click again to copy)
            <br>
            <script>
                let clicks = 0;

                // reveal secret API key on click by adding "revealed" class
                document.querySelector('.secret').addEventListener('click', function() {
                    this.classList.add('revealed');
                    clicks++;
                });

                // copy on click
                document.querySelector('.secret').addEventListener('click', function() {
                    if (clicks > 1) {
                        navigator.clipboard.writeText(this.textContent);
                        this.classList.add('copied')
                    }
                });

            </script>
            <br>
            <a href="/logout">Logout</a>
        </div>
    </div>
</main>

{% include 'common/end.html' %}