<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>Whip validator report</title>

        <!-- CSS -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <style>
            body {
                position: relative;
            }

            h1, h2, h3, h4 {
                margin-top: 1rem;
            }

            main {
                margin-top: 30px;
                margin-bottom: 30px;
            }

            .theme-sidebar {
                position: sticky;
                top: 2rem;
                height: calc(100vh - 2rem);
                overflow-y: auto;
                }                     
                .theme-sidebar .nav-link.active {
                    background: #007bff;
                    color: white;
                }
            
            footer {
                background-color: #f5f5f5;
                border-top: 1px solid #dee2e6;
                padding: 30px 0;
            }
        </style>
    </head>

    <body data-spy="scroll" data-target="#theme-sidebar-nav">
        <main class="container">
            <h1>Whip validator report</h1>
            <p>Date: {{ report.executed_at }}</p>

            <h2>Summary</h2>
            
            <p>Total rows: {{ report.results.total_rows }}</p>

            {% if report.results.unknown_fields %}
            <section>
                <h4>Unknown fields</h4>
                <p>These fields are described in the whip specifications, but are missing in the data:</p>
                {% for field in report.results.unknown_fields|sort %}
                    <span class="badge badge-secondary">{{ field }}</span>
                {% endfor %}
            </section>
            {% endif %}

            {% if report.results.unspecified_fields %}
            <section>
                <h4>Unspecified fields</h4>
                <p>These fields exist in data, but have no whip specification:</p>
                {% for field in report.results.unspecified_fields|sort %}
                    <span class="badge badge-secondary">{{ field }}</span>
                {% endfor %}
            </section>
            {% endif %}

            {% if report.results.unspecified_fields %}
            <section>
                <h4>General warnings</h4>
                {% for warning in report.results.warnings|sort %}
                    <p class="small">{{ warning }}</p>
                {% endfor %}
            </section>
            {% endif %}

            <hr>

            <h2>Specifications</h2>

            <div class="row">
                <div class="col-12 col-md-3 order-md-2 d-none d-md-block theme-sidebar">
                    <nav id="theme-sidebar-nav">
                        <ul class="nav flex-column">
                        {% for field, rules in report.results.specified_fields.items()|sort %}
                            <li class="nav-item">
                                <a class="nav-link" href="#{{ field }}">{{ field }}</a>
                            </li>
                        {% endfor %}
                        </ul>
                    </nav>
                </div>

                <div class="col-12 col-md-9 order-md-1">
                {% for field, rules in report.results.specified_fields.items()|sort %}
                    <h4 id="{{ field }}">{{ field }}</h4>

                    <div class="d-flex flex-column">
                    {% for rule, info in rules.items()|sort %}
                        <div class="d-flex flex-row">
                            <div class="p-2" style="min-width: 25%;">{{ rule }}</div>
                            <div class="p-2 mr-auto">
                                <code>{{ info.constraint }}</code>
                            </div>
                            <div class="p-2" style="width: 15%;">
                                <div class="progress">
                                {% if not info.failed_rows %}
                                   <div class="progress-bar bg-success" role="progressbar" style="width: {{ 100*info.passed_rows/report.results.total_rows }}%;">{{ info.passed_rows }}</div>
                                {% else %}
                                   <div class="progress-bar bg-warning" role="progressbar" style="width: {{ 100*info.passed_rows/report.results.total_rows }}%;">{{ info.passed_rows }}</div>
                                {% endif %}
                                </div>
                            </div>
                            <div class="p-2" style="width: 5%;" data-toggle="collapse" data-target="#{{ field }}_{{ rule }}_examples">
                            {% if info.failed_rows %}
                                <i class="fas fa-fw fa-chevron-down"></i>
                            {% endif %}
                            </div>
                        </div>

                        {% if info.failed_rows %}
                            <div class="collapse" id="{{ field }}_{{ rule }}_examples">
                                <table class="table table-striped table-sm mt-3">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Data value</th>
                                            <th>Message</th>
                                            <th>Failed rows</th>
                                            <th>First row</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for value, details in info.samples.items()|sort(attribute='1.failed_rows', reverse=True) %}
                                        <tr>
                                            <td>{{ loop.index }}</td>
                                            <td><code>{{ value }}</code></td>
                                            <td>{{ details.message}}</td>
                                            <td>{{ details.failed_rows}}</td>
                                            <td>{{ details.first_row}}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        {% endif %}
                    {% endfor %}
                    </div>
                {% endfor %}
                </div>
            </div>
        </main>

        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-9">
                        Whip validation executed by <a href="https://inbo.github.io/pywhip/">pywhip</a> using the <a href="https://github.com/inbo/whip">whip</a> syntax, a human and machine-readable syntax to express specifications for data.
                    </div>
                    <div class="col-12 col-md-3">
                        <a href="https://twitter.com/lifewatchinbo"><i class="fab fa-lg fa-twitter"></i></a>
                        <a href="https://github.com/inbo/whip"><i class="fab fa-lg fa-github"></i></a>
                    </div>
                </div>
            </div>
        </footer>

        <!-- JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>
