
{% block header_nav_dropdown_link %}

    {% if slink == 'divider' %}
        <li class="divider"></li>
    {% elseif slink.dropdown %}
        <li class="dropdown-submenu">
            <a tabindex="-1" href="#">
                {% if slink.icon %}<i class="{{ slink.icon }}"></i>{% endif %}
                {{ slink.title | raw }}
            </a>
            <ul class="dropdown-menu">
                {% for slink in slink.dropdown %}
                    {{ block('header_nav_dropdown_link') }}
                {% endfor %}
            </ul>
        </li>
    {% else %}
        <li>
            <a {% if slink.data %}{% for k,v in slink.data %}data-{{ k }}="{{ v }}" {% endfor %}{% endif %}{% if slink.url %}href="{{ slink.url }}"{% else %} class="group"{% endif %}>{%if slink.icon %}<i class="{{ slink.icon }}"></i>
             {% endif %}{{ slink.title | raw }}</a>
        </li>
    {% endif %}

{% endblock %}

{% block header_li_a %}
        <li class="{{ link.id }}{% if link.dropdown %} dropdown{% endif %}{% if link.active %} active{% endif %}{% if link.justicon %} icon{% endif %}{% if link.class %} {{ link.class }}{% endif %}">
            <a {% if link.tooltip %}title="{{ link.tooltip }}"{% endif %} id="dw-header-link-{{ link.id }}" href="{{ link.url }}" {% if link.dropdown %}class="dropdown-toggle" data-toggle="dropdown" {% elseif link.modal %} data-toggle="modal"{% endif %}>
                {% if link.icon %}<i class="{{ link.icon }}"></i> {% endif %}
                {% if not link.icon or not link.justicon %}
                {{ link.title | raw }}
                {% endif %}
                {% if link.tooltip %}
                <span class="tt">{{ link.tooltip | raw }}</span>
                {% endif %}
{% endblock %}


{% block header_nav_link %}

    {% if link == 'divider' %}

        <li class="divider-vertical"></li>

    {% elseif link.dropdown %}

        {{ block('header_li_a') }}
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                {% for slink in link.dropdown %}
                    {{ block('header_nav_dropdown_link') }}
                {% endfor %}
            </ul>
        </li>

    {% else %}

        {{ block('header_li_a') }}
            </a>
        </li>

    {% endif %}
{% endblock %}


{% block header %}

    <div class="navbar {% if navbar_transparent %}navbar-transparent{% endif %} navbar-static-top{% if invert_navbar %} navbar-inverse{% endif %}">
        <div class="navbar-inner">
            <div class="container" style="position:relative">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>

                <a class="brand" href="/">
                    {% if custom_logo %}
                        <img src="{{ custom_logo }}" />
                    {% endif %}
                    {% if config.custom_title %}{{ config.custom_title }}{% else %}{% trans "Datawrapper" %}{% endif %}<span class="beta">{{ config.custom_title_tag }}</span>
                </a>

                <div class="nav-collapse">
                    <ul class="nav dw-header-nav pull-right">

                    {% for link in headlinks %}
                        {{ block('header_nav_link') }}
                    {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    $(function() {
        $('.navbar li.icon a[title]').mouseenter(function() {
            $('.navbar-static-top .tooltip').hide();
        });
        $('.navbar-static-top li a[title]').tooltip({
            placement: 'bottom',
            container: '.navbar-static-top',
            delay: 0
        });
    });
    </script>


{% endblock %}
