{% load socialaccount %}
<header class="d-flex justify-content-between align-items-center py-3 border-bottom">
    <h1 class="h2">
        <a href='{% url "index" %}' class="text-decoration-none nav-title">Twitch drops</a>
    </h1>
    <nav>
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href='{% url "games" %}'>Games</a>
            </li>
            <li>
                <a class="nav-link" href='{% url "reward_campaigns" %}'>Reward campaigns</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href=''>API</a>
            </li>
            <li class="nav-item d-none d-sm-block">
                <a class="nav-link" href="https://github.com/sponsors/TheLovinator1">Donate</a>
            </li>
            {% if not user.is_authenticated %}
                <li>
                    <a class="nav-link" href="{% provider_login_url 'twitch' %}">Login with Twitch</a>
                </li>
            {% else %}
                <li>
                    <form action="{% url 'account_logout' %}" method="post">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-link nav-link">Logout</button>
                    </form>
                </li>
            {% endif %}
        </ul>
    </nav>
</header>