<html>
    <head>
        <title>{{ title }}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        {% block head_extra %}{% endblock %}
    </head>

    <body {%block body_extraargs %}{% endblock %}>
        <div id="navbar" class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">
                    {% block navbarcontainer %}
                        <a class="brand" href="#">{{ brandingtitle }}</a>

                        <div>
                            <ul class="nav">
                                <li><a href="#contenttypes">Content types</a></li>
                                <li><a href="#data">Data</a></li>
                            </ul>
                        </div>
                    {% endblock %}
                </div>
            </div>
        </div>

        <div class="container-fluid">
            {% block fluidcontainer_start %}{% endblock %}

            {% block herounit %}
            <div class="row-fluid">
                <div class="span12">
                    <div class="hero-unit">
                        <h1>{{ heading }}</h1>
                        <p>
                        {% block herotext %}
                            This is the <em>text/html</em> content-type view for this RESTful API.
                        {% endblock %}
                        </p>
                        <p>
                            {% block herobuttons %}
                            <a class="btn btn-primary btn-large" href="#contenttypes" href="">Content types &raquo;</a>
                            <a class="btn btn-large" href="#data">Data &raquo;</a>
                            {% endblock %}
                        </p>
                    </div>
                </div>
            </div>
            {% endblock %}

            {% block contenttypes %}
            <div class="row-fluid">
                {% block pre_content_types %}{% endblock %}
                <div class="row-fluid">
                    <div class="span12">
                        <div class="page-header">
                            <h1 id="contenttypes">Supported content-types</h1>
                        </div>
                        <table class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Mimetype</th>
                                    <th>View or download</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for contenttype in content_types %}
                                <tr>
                                    <td>{{ contenttype.mimetype }}</td>
                                    <td style="width:130px;">
                                        <a href="?mimetype={{ contenttype.mimetype }}">view</a> |
                                        <a href="?mimetype={{ contenttype.mimetype }}&downloadfile=true">download</a>
                                    </td>
                                    <td>
                                        {{ contenttype.description }}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </span>
                </div>
            </div>
            {% endblock %}

            {% block data %}
            <div class="row-fluid">
                <div class="span12">
                    <div class="page-header">
                        <h1 id="data">{% block data_heading %}Data preview <small>Encoded as application/json</small>{% endblock %}</h1>
                    </div>
                    {% block data_intro %}{% endblock %}
                    <pre class="{% block datapre_classes %}{% endblock %}">{{ previewdata|e }}</pre>
                </div>
            </div>
            {% endblock %}
        </div>

        <!-- Javascript.
        Placed at the end of the document so the pages load faster -->
        {% block javascript %}{% endblock %}
    </body>
</html>
