{% extends template.self %}
{% block book_header %}
<div class="cocos-navbar navbar-collapse" id="navbar" role="navigation">
    <ul class="nav navbar-nav">
        <li><a href="https://cocos.com" class="btn" target="_blank"><img src="https://forum.cocos.org/images/logo.png" height="30" /></a></li>
        <li><a href="#" class="btn autohide" onclick="toggleLanguage()">中文</a></li>
{% for item in book.products %}
    {% if item.links %}
    <li>
        <a href="#" class="btn autohide"><i class="fa fa-book"></i>{{item.name}}</a>
        <ul class="hovershow">
            {% for entry in item.links %}
            <li><a href="{{entry.link}}" class="btn">{{entry.name}}</a></li>
            {% endfor %}
        </ul>
    </li>
    {% else %}
    <li><a href="{{item.link}}" class="btn autohide"><i class="fa fa-book"></i>{{item.name}}</a></li>
    {% endif %}
{% endfor %}
{% for item in book.version %}
    {% if item.links %}
    <li class="version-link">
        <a class="btn" style="color:#444">Version: <span style="font-weight:bold">{{item.name}}</span></a>
        <ul class="hovershow">
            {% for entry in item.links %}
            <li><a href="{{entry.link}}" class="btn">Version: <span style="font-weight:bold">{{entry.name}}</span></a></li>
            {% endfor %}
        </ul>
    </li>
    {% else %}
    <li><a href="{{item.link}}" class="btn">{{item.name}}</a></li>
    {% endif %}
{% endfor %}
    </ul>
</div>
<div class="book-header" role="navigation">
    {% if glossary.path %}
    <a href="{{ ('/' + glossary.path)|resolveFile }}" class="btn pull-left" aria-label="{{ "GLOSSARY_OPEN"|t }}"><i class="fa fa-sort-alpha-asc"></i></a>
    {% endif %}
    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="{{ "/"|resolveFile }}" >{{ page.title }}</a>
    </h1>
</div>
{% endblock %}