{% from 'bootstrap/form.html' import render_field %}

{% macro custom_render_form_row(fields, row_class='form-row', col_class_default='col', col_map={}, button_map={}, button_style='', button_size='', render_args={}) %}
    <div class="{{ row_class }}">
    {% for field in fields %}
        {% if field.name in col_map %}
            {% set col_class = col_map[field.name] %}
        {% else %}
            {% set col_class = col_class_default %}
        {% endif %}
        <div class="{{ col_class }}">
            {{ render_field(field, button_map=button_map, button_style=button_style, button_size=button_size, **render_args) }}
        </div>
    {% endfor %}
    </div>
{% endmacro %}

{% macro make_tabs(tabs)%}
    {% set tabs_id = tabs|tojson|hash %}
    <div class="row">
        <div class="col-lg">
            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            {% for label,tab in tabs if tab %}
                {% if tab %}
                    {% set id_name = [loop.index,tabs_id ]|join("-") %}
                    {% if not (loop.first and loop.last) %}
                        <li class="nav-item">
                            <a class="nav-link {{'active' if loop.first}}" id="nav-{{id_name}}-tab" data-toggle="pill" href="#pills-{{id_name}}" role="tab" aria-controls="pills-{{id_name}}" aria-selected="{{loop.first}}">
                                {{label}}
                            </a>
                        </li>
                    {% endif %}
                {% endif %}
            {% endfor %}
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-lg">
            <div class="tab-content" id="searchResults">
                {% for label,tab in tabs if tab %}
                    {% if tab %}
                        {% set id_name = [loop.index,tabs_id ]|join("-") %}
                        <div class="tab-pane fade {{'show active' if loop.first}}" id="pills-{{id_name}}" role="tabpanel" aria-labelledby="nav-{{id_name}}-tab">
                            {{ tab|safe }}
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
{% endmacro %}

{% macro render_tree(tree) -%}
<ul class="file_tree">
    {% for node,children in tree.items() recursive %}
        {% if node=="__info__" or not children is mapping -%} 
            {% set file = children %}
            <li>
                <div class="row" style="margin-left: 10px;">
                    <div class="progress" style="width: 100%;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated"
                            style="width: {{(file.progress*100)|round(2)}}%;" role="progressbar"
                            aria-valuenow="{{(file.progress*100)|round(2)}}" aria-valuemin="0" aria-valuemax="100">
                            {{(file.progress*100)|round(2)}}&nbsp;% ({{file.size|filesizeformat(binary=True)}})
                        </div>
                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
                            style="width: {{(((file.availability or 1) - file.progress)*100)|round(2)}}%;" role="progressbar"
                            aria-valuenow="{{(((file.availability or 1) - file.progress)*100)|round(2)}}" aria-valuemin="0" aria-valuemax="100">
                        </div> 
                    </div>
                </div> 
            </li>
        {% else -%}
            <li class="tree">
                <span class="{{'custom_caret' if children.items() else '' }}">
                    {{node}}
                </span>
                {% if children.items() -%}
                    <ul class="tree nested">
                        {{loop(children.items())}}
                    </ul>
                {% endif %}
            </li>
        {% endif %}
    {% endfor %}
</ul>
{% endmacro %}