<nav class="navbar navbar-expand-lg navbar-absolute fixed-top navbar-transparent">
    <div class="container-fluid">
        <div class="navbar-wrapper">
            <div class="navbar-minimize">
                <button id="minimizeSidebar" class="btn btn-icon btn-round">
                    <i class="fas fa-chevron-right text-center visible-on-sidebar-mini"></i>
                    <i class="fas fa-chevron-left text-center visible-on-sidebar-regular"></i>
                </button>
            </div>
        <div class="navbar-toggle">
            <button type="button" class="navbar-toggler">
                <span class="navbar-toggler-bar bar1"></span>
                <span class="navbar-toggler-bar bar2"></span>
                <span class="navbar-toggler-bar bar3"></span>
            </button>
        </div>
            <div class="navbar-brand">{{ page_name }}</div>
        </div>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-bar navbar-kebab"></span>
                <span class="navbar-toggler-bar navbar-kebab"></span>
                <span class="navbar-toggler-bar navbar-kebab"></span>
            </button>
        <div class="collapse navbar-collapse justify-content-end" id="navigation">
            <ul class="navbar-nav">
            {% if is_activity_page %}
                <li class="nav-item" data-toggle="tooltip" data-placement="bottom" title="Edit Activity">
                    <a href="{{ activity.id }}/edit/" class="nav-link btn-rotate" id="edit-activity-button">
                        <i class="fas fa-pen"></i>
                    </a>
                </li>
                {% if activity.trace_file.longitude_list != "[]" %}
                <li class="nav-item" data-toggle="tooltip" data-placement="bottom" title="Download GPX File">
                    <a href="{{ activity.id }}/download/" class="nav-link btn-rotate" id="download-activity-button">
                        <i class="fas fa-download"></i>
                    </a>
                </li>
                {% endif %}
            {% endif %}
            {% if page_name in available_sport_names %}
                <li class="nav-item" data-toggle="tooltip" data-placement="bottom" title="Edit Sport">
                    <a href="{{ sport.slug }}/edit/" class="nav-link btn-rotate" id="edit-sport-button">
                        <i class="fas fa-pen"></i>
                    </a>
                </li>
            {% endif %}
                <li class="nav-item" data-toggle="tooltip" data-placement="bottom" title="Add Activity">
                    <a href="{% url 'add-activity' %}" class="nav-link btn-rotate" id="add-activity-button">
                        <i class="fas fa-running"></i>
                        <p>
                            <span class="d-lg-none d-md-block">Add Activity</span>
                        </p>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link btn-rotate" href="{% url 'help' %}" id="help-button">
                        <i class="fas fa-question-circle"></i>
                        <p>
                            <span class="d-lg-none d-md-block">Help</span>
                        </p>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link btn-rotate" href="{% url 'settings' %}" id="settings-button">
                        <i class="fas fa-cog" id="settings-cog"></i>
                        <p>
                            <span class="d-lg-none d-md-block">Settings</span>
                        </p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>
