{% macro table(rows, has_column_header=false, has_row_header=false) -%}
    <div class="table-responsive">
        <table class="table table-hover table-condensed">
            {% for row in rows %}
            {% set outer_loop = loop %}
            <tr>
            {% for item in row %}
                {% if (outer_loop.first and has_column_header) or
                      (loop.first and has_row_header) %}
                    <th>{{ item }}</th>
                {% else %}
                    <td>{{ item }}</td>
                {% endif %}
            {% endfor %}
            </tr>
            {% endfor %}
        </table>
    </div>
{%- endmacro %}


{% macro modal(header, content, id) -%}

<!-- Modal -->
<div id="{{ id }}" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">{{ header }}</h4>
      </div>
      <div class="modal-body">
        <pre>{{ content }}</pre>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

{%- endmacro %}

{% macro plotly_graph(div_id, json_data, style=None) -%}

    <div class="plot_wrapper">

        {% if style != None %}
        <div class="col-xs-6 col-sm-6 col-md-4 {{ style }}" id="{{ div_id }}">
        {% else %}
        <div class="col-xs-6 col-sm-6 col-md-4 plot" id="{{ div_id }}">
        {% endif %}

        </div>

        {% if "help" in json_data %}
        <div class="col-xs-1 col-sm-1 col-md-1">
            <button type="button" class="btn btn-info" style="text-align:center" data-toggle="modal" data-target="#{{ div_id }}_help">
                <span class="glyphicon glyphicon-question-sign"></span>
                <!--Help-->
            </button>
            {{ modal(json_data["layout"]["title"], json_data["help"], div_id+"_help")}}
        </div>
        {% endif %}

    </div>
    <script>
        var graphs_{{ div_id }} = {{ json_data | tojson }};
        Plotly.newPlot({{ div_id }}, graphs_{{ div_id }}.data, graphs_{{ div_id }}.layout);
    </script>
{%- endmacro %}

{% macro plotly_graphs(graphs, styles=None) -%}
{% for div_id, json_data in graphs.items() %}
    {% if "img" in json_data %}
        <img src="data:image/png;base64,{{ json_data['img'] }}">
    {% elif styles != None %}
        {{ plotly_graph(div_id, json_data, style=styles.get(div_id)) }}
    {% else %}
        {{ plotly_graph(div_id, json_data) }}
    {% endif %}
{% endfor %}
{%- endmacro %}

{% macro panel(panel_title, panel_id, graphs, styles=None, tables=None, show=False) -%}
<div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-target="#collapse_{{ panel_id }}">
        <h4 class="panel-title">
            <a>{{ panel_title }}</a>
        </h4>
    </div>
    <div id="collapse_{{ panel_id }}" class="panel-collapse collapse{{ ' in' if show else ''}}">
        <div class="panel-body">
            <div class="container-fluid">
                {{ plotly_graphs(graphs, styles=styles) }}
            </div>
        </div>
        {% if tables %}
            <div class="panel-body">
                <div class="container-fluid">
                    {% for item in tables %}
                        {{ table(item) }}
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </div>
</div>
{%- endmacro %}

{% macro merging_statistics(scaling_tables, xtriage_output, id) -%}

<div>
    <h2> Merging statistics</h2>

    <div class="panel-group">

        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-target="#collapse_overall_{{id}}">
                <h4 class="panel-title">
                    <a>Overall</a>
                </h4>
            </div>
            <div id="collapse_overall_{{id}}" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div style="width: 800px">
                        {{ table(scaling_tables['overall'],
                                        has_column_header=true,
                                        has_row_header=true) }}
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-target="#collapse_merging_stats_{{id}}">
                <h4 class="panel-title">
                    <a>Resolution shells</a>
                </h4>
            </div>
            <div id="collapse_merging_stats_{{id}}" class="panel-collapse collapse">
                <div class="panel-body">
                    {{ table(scaling_tables['resolution_binned'],
                                    has_column_header=true) }}
                    *significant at p={{ scaling_tables['cc_half_significance_level'] }}
                </div>
            </div>
        </div>

        {% if xtriage_output %}
            {{ xtriage_results(
                xtriage_output['xtriage_success'],
                xtriage_output['xtriage_warnings'],
                xtriage_output['xtriage_danger'],
                suffix=id,) }}
        {% endif %}

    </div>
</div>

{%- endmacro %}

{% macro xtriage_results(success, warning, danger, suffix='') -%}

{% if success or warning or danger %}
    <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" data-target="#collapse_xtriage{{ suffix }}">
            <h4 class="panel-title">
                <a>Xtriage</a>
            </h4>
        </div>
        <div id="collapse_xtriage{{ suffix }}" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="panel-group">
                    {% if danger %}
                        <div class="panel panel-danger">
                            <div class="panel-heading" data-toggle="collapse" data-target="#collapse_xtriage_danger{{suffix}}">
                                <h4 class="panel-title">
                                    <span class="glyphicon glyphicon-remove"></span>
                                    <a>{{ danger|length}} serious warning{% if danger|length > 1%}s{% endif %}</a>
                                </h4>
                            </div>
                            <div id="collapse_xtriage_danger{{suffix}}" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    {% for issue in danger %}
                                        <button type="button" class="btn btn-danger btn-block" style="text-align:left; padding-left:6px" data-toggle="modal" data-target="#danger{{ suffix }}{{ loop.index }}">
                                        <span class="glyphicon glyphicon-remove"></span>
                                        {{ issue.text }}
                                        </button>
                                    {{ xtriage_modal(issue.header, issue.summary, "danger"+suffix+loop.index|string)}}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    {% if warning %}
                        <div class="panel panel-warning">
                            <div class="panel-heading" data-toggle="collapse" data-target="#collapse_xtriage_warning{{suffix}}">
                                <h4 class="panel-title">
                                    <span class="glyphicon glyphicon-exclamation-sign"></span>
                                    <a>{{ warning|length}} alert{% if warning|length > 1%}s{% endif %}</a>
                                </h4>
                            </div>
                            <div id="collapse_xtriage_warning{{suffix}}" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    {% for issue in warning %}
                                        <button type="button" class="btn btn-warning btn-block" style="text-align:left; padding-left:6px" data-toggle="modal" data-target="#warning{{ suffix }}{{ loop.index }}">
                                        <span class="glyphicon glyphicon-exclamation-sign"></span>
                                        {{ issue.text }}
                                        </button>
                                    {{ xtriage_modal(issue.header, issue.summary, "warning"+suffix+loop.index|string)}}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    {% if success %}
                        <div class="panel panel-success">
                            <div class="panel-heading" data-toggle="collapse" data-target="#collapse_xtriage_success{{suffix}}">
                                <h4 class="panel-title">
                                    <span class="glyphicon glyphicon-ok"></span>
                                    <a>{{ success|length}} check{% if success|length > 1%}s{% endif %} passed</a>
                                </h4>
                            </div>
                            <div id="collapse_xtriage_success{{suffix}}" class="panel-collapse collapse">
                                <div class="panel-body">
                                    {% for issue in success %}
                                        <button type="button" class="btn btn-success btn-block" style="text-align:left; padding-left:6px" data-toggle="modal" data-target="#success{{ suffix }}{{ loop.index }}">
                                        <span class="glyphicon glyphicon-ok"></span>
                                        {{ issue.text }}
                                        </button>
                                    {{ xtriage_modal(issue.header, issue.summary, "success"+suffix+loop.index|string)}}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
                <small>
                    Zwart, P. H., Grosse-Kunstleve, R. W. &amp; Adams, P. D. (2005). <i>CCP4 Newsl.</i> <b>43</b>, contribution 7.
                </small>
            </div>
        </div>
    </div>
{% endif %}

{%- endmacro %}

{% macro xtriage_modal(header, content, id) -%}

<!-- Modal -->
<div id="{{ id }}" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">{{ header }}</h4>
      </div>
      <div class="modal-body">
        {% autoescape true %}
          <pre>{{ content }}</pre>
        {% endautoescape %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

{%- endmacro %}
