{% macro render_card_content(name, data) -%}
    <md-card ng-app>
        <md-card-title>
            <span class="md-headline">{{ name }}</span>
        </md-card-title>
        <md-list>
            {% for pair in data | dictsort %}
                {% if pair[1] is iterable and pair[1] is not string %}
                    {{ render_list_content(pair[0], pair[1]) }}
                {% else %}
                    <md-list-item class="md-no-proxy">
                        <span flex>{{ pair[0] }}</span>
                        <span>{{ pair[1] }}</span>
                        <md-button class="md-icon-button" aria-label="More" style="visibility: hidden">
                            <md-icon md-font-icon="expand_more">expand_more</md-icon>
                        </md-button>
                    </md-list-item>
                {% endif %}
                <md-divider ng-if="!$last"></md-divider>
            {% endfor %}
        </md-list>
    </md-card>
{%- endmacro %}

{% macro render_list_content(key, list) -%}

    <md-list-item class="md-no-proxy">
        <span flex>{{ key }}</span>
        <span>{{ list | length }}</span>
        <md-button class="md-icon-button" aria-label="More" ng-click="{{ key }} = !{{ key }}">
            <md-icon md-font-icon="expand_more">expand_more</md-icon>
        </md-button>
    </md-list-item>

    <md-list-item ng-show="{{ key }}">
        {{ list }}
    </md-list-item>
{%- endmacro %}

{% macro render_plot_card(name, data) -%}
    <md-card ng-app>
        <md-card-title>
            <span class="md-headline">{{ name }}</span>
        </md-card-title>

        <md-tabs md-dynamic-height>
        {% for pair in data | dictsort %}
            <md-tab id="tab_{{ pair[0] }}_{{ loop.index }}">
                <md-tab-label>
                    {{ pair[0] }}
                </md-tab-label>
                <md-tab-body>
                    {{ pair[1] }}
                </md-tab-body>
            </md-tab>
        {% endfor %}
        </md-tabs>
    </md-card>
{%- endmacro %}