<!DOCTYPE html>
<html>
    <head>
        <title>Report</title>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
        <style>
            code > pre {
                background-color: #D9D9D9;
            }
            .test-case {

            }
            .test-case--passed {
                background-color: #A1D490;
            }
            .test-case--failed {
                background-color: #F25757;
            }
            .test-case--warning {

            }

            .filter-wrapper {
                padding: 10px;
            }
            .filter--active {
                background-color: #D6D6D6;
            }
            .filter-wrapper .material-icons {
                pointer-events: none;
            }

            .search-wrapper {
                /*display: inline-block;*/
            }
            .search-wrapper > input {
                border: 0;
                /*margin: 0;*/
            }
            .search-wrapper > input:focus {
                border: 0;
            }
            .search-wrapper > .material-icons {
                position: absolute;
                top: 10px;
                right: 10px;
            }
        </style>

        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col s12">
                    <h1>{{ test_report_title }}</h1>
                </div>
            </div>
            <div class="row">
                <div class="col s12">
                    <h4>Summary</h4>
                    <div class="row">
                        <div class="col s2">
                            <ul>
                                {% for key, val in test_summary.items() %}
                                    <li><strong>{{ key.title() }}</strong>: {{ val }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col s12">
                    <h4>Test Results</h4>
                    <div class="search-wrapper card">
                        <input id="page-search" />
                        <i class="material-icons">search</i>
                    </div>
                    <div class="filter-wrapper">
                        <span>Filter:</span>
                        <a id="filter-all" data-filter-result="all" class="waves-effect waves-light btn">All</a>
                        <a id="filter-pass" data-filter-result="passed" class="waves-effect waves-light btn-flat"><i class="material-icons left">done</i>Passed</a>
                        <a id="filter-fail" data-filter-result="failed" class="waves-effect waves-light btn-flat"><i class="material-icons left">error</i>Failed</a>
                        <a id="filter-error" data-filter-result="error" class="waves-effect waves-light btn-flat"><i class="material-icons left">error</i>Error</a>
                        <a id="filter-skip" data-filter-result="skipped" class="waves-effect waves-light btn-flat"><i class="material-icons left">warning</i>Skipped</a>
                    </div>
                    <ul class="collapsible" data-collapsible="accordian">
                        {% for test_result in test_results %}
                            <li data-filter-result="{{ test_result.result }}" data-search-key="{{ test_result.name }}">
                                <div class="collapsible-header test-case--{{ test_result.result }}">
                                    <i class="material-icons">
                                        {% if test_result.result == 'passed' %}
                                            done
                                        {% elif test_result.result in ['failed', 'error'] %}
                                            error
                                        {% elif test_result.result == 'skipped' %}
                                            warning
                                        {% endif %}
                                    </i>
                                    {{ test_result.name }}
                                </div>
                                <div class="collapsible-body">
                                    <strong>Description</strong>
                                    {% if test_result.description %}
                                        <p>{{ test_result.description.replace('\n', '<br/>') }}</p>
                                    {% else %}
                                        <p><em>This test has no docstring...</em></p>
                                    {% endif %}

                                    <strong>Result: {{ test_result.result }}</strong>
                                    <br/>

                                    <strong>Traceback</strong>
                                    <code><pre>{{ test_result.traceback }}</pre></code>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
        <script type="text/javascript">
            // Map test cases to their search terms
            var AUTOCOMPLETE_TERMS_MAP = {{ autocomplete_terms }};
            var AUTOCOMPLETE_TERMS_ARRAY = Object.keys(AUTOCOMPLETE_TERMS_MAP);

            $(function() {
                $('.filter-wrapper > a').click(function(ev) {
                    ev.preventDefault();
                    $('.filter-wrapper > a').removeClass('btn').addClass('btn-flat');
                    $('#' + ev.target.id).removeClass('btn-flat').addClass('btn');

                    var filterChoice = $(ev.target).attr('data-filter-result');
                    if (filterChoice === 'all') {
                        $('ul.collapsible > li').show();
                    } else {
                        $('ul.collapsible > li').hide();
                        $('ul.collapsible > li[data-filter-result="' + filterChoice + '"]').show();
                    }
                });

                var materialize_autocomplete_obj = {};
                Object.keys(AUTOCOMPLETE_TERMS_MAP).forEach(function(item) {
                    materialize_autocomplete_obj[item] = null
                });
                $('#page-search').autocomplete({
                    data: materialize_autocomplete_obj
                });
                $('#page-search').change(function(ev) {
                    var searchTerm = $(this).val();
                    console.log(searchTerm);

                    if (searchTerm.length === 0) {
                        $('ul.collapsible > li').show();
                        return;
                    }

                    if (Object.keys(AUTOCOMPLETE_TERMS_MAP).indexOf(searchTerm) < 0) {
                        return;
                    }

                    var matchingTestCases = AUTOCOMPLETE_TERMS_MAP[searchTerm];
                    console.log(matchingTestCases);

                    $('ul.collapsible > li').each(function(_, el) {
                        if (matchingTestCases.indexOf($(el).attr('data-search-key')) >= 0) {
                            $(el).show();
                        } else {
                            $(el).hide();
                        }
                    });
                });
            });
        </script>
    </body>
</html>
