{%- macro render_string_h_level(string, h_level) -%}
{%- if string -%}
    <h{{h_level}}>{{ string|replace("\n","<br/><br/>") }}</h{{h_level}}>
{%- endif -%}
{%- endmacro -%} 

{%- macro render_list_h_level(list, h_level) -%}
{%- if list -%}
    {%- for item in list -%}
        <h{{h_level}}>{{ item|replace("\n","<br/>") }}</h{{h_level}}>
    {%- endfor -%}
{%- endif -%}
{%- endmacro -%}

{%- macro render_application_name(data) -%}
{%- if data -%}
    {%- for key, value in data[0]["application_information"] -%}
        {%- if key == "package_name" -%}
            {{ value[0]|striptags }}
        {%- endif -%}
    {%- endfor -%}
{%- endif -%}
{%- endmacro -%}

{%- macro render_menu(data) -%}
{%- if data -%}
    {%- for item in data -%}
        {%- for nav_menu_header, nav_menu_item in item.iteritems() -%}
            <li class="nav-header">{{ nav_menu_header|replace('_', ' ')|title }}</li>
            {% for name,content in nav_menu_item -%}
                {%- if content -%}
                    {%- if name == "application_name" -%}
                        <li class="active"><a href="#{{ name|replace('_', '-') }}" data-toggle="tab">{{ name|replace('_', ' ')|title }}</a></li>
                    {%- else -%}
                        <li><a href="#{{ name|replace('_', '-') }}" data-toggle="tab">{{ name|replace('_', ' ')|title }}</a></li>
                    {%- endif -%}
                {%- endif %}
            {% endfor %}
        {%- endfor -%}
    {%- endfor -%}
{%- endif -%}
{%- endmacro -%}

{%- macro render_content(data) -%}
{%- if data -%}
    {%- for item in data -%}
        {%- for nav_menu_header, nav_menu_item in item.iteritems() -%}
                {%- for name,content in nav_menu_item %}
                    {%- if content -%}
                        {%- if name == "application_name" %}
                        <div class="tab-pane active" id="{{ name|replace('_', '-') }}">
                        {%- else %}
                        <div class="tab-pane" id="{{ name|replace('_', '-') }}">
                        {%- endif %}
                            {{ render_string_h_level(name|replace('_', ' ')|title, 2) }}
                            {{ render_list_h_level(content, 3) }}
                        </div>
                    {% endif -%}
                {% endfor -%}
        {%- endfor -%}
    {%- endfor -%}
{%- endif -%}
{%- endmacro -%}

{% macro render_indent_res(res) %}
{% include res %}
{% endmacro %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Androwarn report</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <style type="text/css">
    {{ render_indent_res('css/bootstrap.css') | indent(width=8) }}
    
    body {
        padding-top: 60px;
        padding-bottom: 40px;
    }
    .sidebar-nav {
        padding: 9px 0;
    }
    </style>
    
    <style type="text/css">
    {{ render_indent_res('css/bootstrap-responsive.css') | indent(width=8) }}
    </style>

    <!-- Le fav and touch icons -->
    <link href="data:image/x-icon;base64,AAABAAEAICAAAAEAIACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAABAAAAAAAAAAAAAAAAAA
[encoded data, 5698 characters]
/D////////////8=" rel="shortcut icon" type="image/x-icon">
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">
                <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">Androwarn Report</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a>{{ render_application_name(data) }}</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row-fluid">

            <div class="span3">
                <div class="well sidebar-nav">
                    <ul class="nav nav-list">
                    {{ render_menu(data) }}         
                    </ul>
                </div><!--/.well -->
            </div><!--/span-->

            <div class="span9">
                <div class="hero-unit" id="Package_name">
                    <div class="tab-content">
                    {{ render_content(data) }}
                    </div>
                </div>
            </div><!--/span-->

        </div><!--/row-->
    <hr>

    <footer>
        <p>&copy; Androwarn</p>
    </footer>

    </div><!--/.fluid-container-->

    <!-- Le javascript
    ================================================== -->
    <script>
        {{ render_indent_res('js/jquery.js') | indent(width=8) }}
    </script>
    
    <script>
        {{ render_indent_res('js/bootstrap-tab.js') | indent(width=8) }}
    </script>
    
    <script>
        $(function () {
            $('#myTab a:last').tab('show');
            $('.sidebar-nav a[href*=#]').click(function(){$('body').animate({ scrollTop: 0}, 200); });
        })
    </script>

  </body>
</html>