{% load static %}
<div class="sidebar-backdrop"></div>
<div class="sidebar">
    <div class="sidebar-header">
        <a href="/" class="sidebar-header-link me-auto">
            <img src="{% static '/images/pyrss_logo.webp' %}" alt="pyrss logo" class="sidebar-logo">
            <span class="sidebar-title font-atkinson-hyperlegible">PYRSS</span>
        </a>
        <button type="button" class="btn-close"></button>
    </div>
    <hr class="sidebar-divider">
    <ul id="serverList" class="sidebar-content overflow-y-auto">
        <li class="server-rate-limit">
            <p class="text-danger">
                <span>Failed to fetch results - you are being rate limited by Discord.</span>
                <i class="bi bi-question-circle-fill" data-bs-toggle="tooltip" data-bs-title="Discord rate-limits when requests are made in rapid succession."></i>
            </p>
            <button type="button" class="sidebar-btn sidebar-retry-btn w-100 rounded-1">
                <i class="bi bi-arrow-clockwise me-2"></i>
                <span>Retry</span>
            </button>
        </li>

        {% for i in "01234567890"|make_list %}
            <li class="sidebar-loading">
                <div class="sidebar-placeholder placeholder-wave">
                    <div class="sidebar-placeholder-image placeholder"></div>
                    <div class="sidebar-placeholder-data">
                        <span class="placeholder mb-3 w-75"></span>
                        <span class="placeholder {% if forloop.counter0|divisibleby:2 %}w-100{% else %}w-50{% endif %}"></span>
                    </div>
                </div>
            </li>
        {% endfor %}

    </ul>
    <hr class="sidebar-divider">
    <div class="sidebar-footer">
        <div class="sidebar-btn text-start flex-grow-1 dropdown p-0">
            <button type="button" class="sidebar-menu-btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                <img src="{{ request.user.avatar_url }}" alt="user icon" class="sidebar-avatar">
                <strong class="text-truncate">{{ request.user.global_name }}</strong>
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a href="https://gitea.cor.bz/corbz/PYRSS-Website" class="dropdown-item" target="_blank">
                        <i class="bi bi-git me-2"></i>
                        <span>Source Code</span>
                    </a>
                </li>
                <li>
                    <a href="https://gitea.cor.bz/corbz/PYRSS-Website/wiki" class="dropdown-item" target="_blank">
                        <i class="bi bi-question-lg me-2"></i>
                        <span>Help</span>
                    </a>
                </li>
                <li>
                    <hr class="dropdown-divider">
                </li>
                {% if request.user.is_superuser %}
                    <li>
                        <a href="/admin/" class="dropdown-item" target="_blank">
                            <i class="bi bi-person-check-fill me-2"></i>
                            <span>Admin</span>
                        </a>
                    </li>
                {% endif %}
                <li>
                    <form action="/logout/" method="post" class="m-0">
                        {% csrf_token %}
                        <button type="submit" class="dropdown-item">
                            <i class="bi bi-arrow-left me-2"></i>
                            <span>Logout</span>
                        </button>
                    </form>
                </li>
            </ul>
        </div>
        <div class="sidebar-btn sidebar-mini-btn dropdown">
            <button type="button" class="js-themeMenuBtn sidebar-menu-btn px-3" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                <i class="bi bi-sun"></i>
            </button>
            <ul class="theme-menu dropdown-menu dropdown-menu-center">
                <li>
                    <input type="radio" name="themeToggle" id="themeToggleLight" class="btn-check" value="light" autocomplete="off">
                    <label for="themeToggleLight" class="theme-btn" role="button" data-bs-toggle="tooltip" data-bs-title="Light Theme">
                        <i class="bi bi-sun"></i>
                    </label>
                </li>
                <li>
                    <input type="radio" name="themeToggle" id="themeToggleDark" class="btn-check" value="dark" autocomplete="off">
                    <label for="themeToggleDark" class="theme-btn" role="button" data-bs-toggle="tooltip" data-bs-title="Dark Theme">
                        <i class="bi bi-moon-stars"></i>
                    </label>
                </li>
                <li>
                    <input type="radio" name="themeToggle" id="themeToggleAuto" class="btn-check" value="auto" autocomplete="off">
                    <label for="themeToggleAuto" class="theme-btn" role="button" data-bs-toggle="tooltip" data-bs-title="Browser Preferred Theme">
                        <i class="bi bi-circle-half"></i>
                    </label>
                </li>
            </ul>
        </div>
        <button type="button" class="js-pinSidebar sidebar-btn sidebar-mini-btn d-flex d-lg-none">
            <i class="bi bi-pin-angle"></i>
        </button>
    </div>
</div>

<button type="button" class="reveal-sidebar-btn rounded-1 btn btn-lg btn-primary shadow">
    <i class="bi bi-list"></i>
</button>