{% macro genurl(string, force=False) %}
  {% if (force or
        ( string.startswith('/') and not string.startswith('//') )) %}
    {% set url = '/'.join([SITEURL.rstrip('/'),string.lstrip('/')]) %}
    {{- url -}}
  {% else %}
    {{- string -}}
  {% endif %}
{% endmacro %}

<!DOCTYPE html>
<html lang="{{ DEFAULT_LANG }}">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="{{ DESCRIPTION }}" />
    <meta name="author" content="Teckids e.V." />
    <style>
        :root {
            --teckids-orange-light: {{ PRIMARY_LIGHT }};
            --teckids-orange-dark: {{ PRIMARY_DARK }};
            --teckids-blue-light: {{ SECONDARY_LIGHT }};
            --teckids-blue-dark: {{ SECONDARY_DARK }};
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/{{ THEME_STATIC_DIR }}/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/{{ THEME_STATIC_DIR }}/css/style.css" />

    <title>
        {{ SITENAME }}
    </title>
</head>

<body>
    <header>
    <!-- Navigation -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="glyphicon glyphicon-th-list"></span>
                </button>
                <a class="navbar-brand" href="{{ SITEURL }}">
                 <img id="logo" src="{{ SITELOGO }}" alt="{{ SITENAME }}">
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav navbar-right" id="menuitem-list">
                    {% for title,url in MENUITEMS %}
                        {% if url is string %}
                            <li {% if output_file == url %}class="active"{% endif %}>
                                <a href="{{ genurl( url ) }}" >{{ title }}</a>
                            </li>
                        {% elif url is iterable %}
                            <li class="btn-group
                                {%- for title,item_url in url -%}
                                    {%- if item_url == output_file -%}
                                        {{- ' active' -}}
                                    {%- endif -%}
                                {%- endfor -%}
                            ">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    {{- title }}<b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu" role="menu">
                                {% for title,item_url in url %}
                                    <li {% if item_url == output_url %}class="active"{% endif %}>
                                        <a href="{{ genurl( item_url ) }}">{{ title }}</a>
                                    </li>
                                {% endfor %}
                                </ul>
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Header -->
    {% block header %}{% endblock %}

    <!-- Template Content head -->
    {% block template_content_head %}{% endblock %}
    </header>

    <main role="main"?
    <!-- Main Content -->
	{% block content %}{% endblock %}
    </main>

    <!-- Sponsoren-Footer -->
    <footer class="page-footer" id="sponsoren-footer">
        <!-- Template Content footer -->
        {% block template_content_footer %}{% endblock %}
        <div class="container">
            <div class="row">
                <div class="col s12">
                    <h3 id='sponsorheading' class="black-text">Sponsoren</h3>
		    <p id="sponsortext" class="black-text">{% block sponsorstext %}{{ SPONSORSTEXTS["de"] }}{% endblock %}</p>
                    {% for image, url in SPONSOR_LOGOS %}
                        <a href="{{ url }}"><img src="{{ image }}" href="{{ url }}" alt="{{ url }}" class="sponsorslogo" /></a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </footer>

    <!-- Footer -->
    <footer id="main-footer" class="page-footer">
        <div class="container">
            <div class="row">
                <div class="col s6">
                    <ul class="footer-link-list">
                        {% for name, link in FOOTERMENU %}
                            <li>
                                <a href="{{ link }}">{{ name }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
		{% block languagefooter %}{% endblock %}
                <div class="col s6">
                    <p style="text-align: right">
                        {% for text, link in MINIFOOTER_MENU %}
                            <a href="{{ link }}">{{ text }}</a><br />
                        {% endfor %}
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <script src="/{{ THEME_STATIC_DIR }}/js/jquery.min.js"></script>
    <script src="/{{ THEME_STATIC_DIR }}/js/bootstrap.min.js"></script>
</body>

</html>