<header class="navbar">
    <section class="navbar-section">
        {% if crumbs %}
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><kbd>{{ user.username }}</kbd></li>
            {% for name, url in crumbs %}
            <li class="breadcrumb-item">
                {% if url %}
                <a href="{{ url }}">{{ name }}</a>
                {% else %}
                {{ name }}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </section>
    <section class="navbar-section">
        <div class="dropdown dropdown-right">
            <div class="btn-group">
                <a href="#" class="dropdown-toggle" tabindex="0">
                    <figure class="avatar avatar-lg badge" data-badge="3">
                        <img src="{{ url_for('static', path='/img/default-avatar.png') }}">
                    </figure>
                </a>
                <ul class="menu">
                    <li class="menu-item">
                        <div class="tile tile-centered">
                            <div class="tile-icon">
                                <img src="{{ url_for('static', path='/img/default-avatar.png') }}" class="avatar"
                                    alt="Avatar">
                            </div>
                            <div class="tile-content">
                                {{ user.username }}
                            </div>
                        </div>
                    </li>
                    <li class="divider"></li>
                    {% for key, value in avatar_menu.items() %}
                    <li class="menu-item">
                        {% if value is mapping and "quantity" in value and value["quantity"] > 0 %}
                        <div class="menu-badge">
                            <label class="label label-primary">{{ value["quantity"] }}</label>
                        </div>
                        {% set value = value["path"] %}
                        {% endif %}
                        <a href="{{ value }}">
                            {{ key }}
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </section>
</header>
