<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bowtie</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>


  <body>
    <nav class="navbar sticky-top bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Bowtie</a>
      </div>
    </nav>

    {% macro to_icon(valid) -%}
        {% if valid %}
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
          </svg>
        {% else %}
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
          </svg>
        {% endif %}
    {%- endmacro %}

    <div class="container">

      <div class="accordion" id="cases">
        {% for each, seq in results %}
          {% set case = each.case %}

          <div class="accordion-item">

            <h2 class="accordion-header" id="case-{{ seq }}-heading">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#case-{{ seq }}" aria-expanded="false" aria-controls="case-{{ seq }}">
                {{ case.description }}
              </button>

            </h2>

            <div id="case-{{ seq }}" class="accordion-collapse collapse" aria-labelledby="case-{{ seq }}-heading" data-bs-parent="#cases">
              <div class="accordion-body">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <td scope="col">test</td>
                      <td scope="col">instance</td>

                      {% for implementation in implementations %}
                        <td scope="col">{{ implementation.name }} ({{ implementation.language }})</td>
                      {% endfor %}
                    </tr>
                  </thead>

                  {% for test, test_results in each.results %}
                    <tr>
                      <td>{{ test.description }}</td>
                      <td>
                        <a type="button" tabindex="0" class="btn btn-secondary" role="button" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-trigger="focus" data-bs-content="{{ test.instance }}">
                          show
                        </a>
                      </td>
                      {% for implementation in implementations %}
                        <td>{{ to_icon(test_results.get(implementation.image, {"valid": None}).valid) }}</td>
                      {% endfor %}
                    </tr>
                  {% endfor %}
                </table>

                <pre>{{ pretty(case.schema) }}</pre>

              </div>
            </div>

          </div>
        {% endfor %}
      </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
    <script>
      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
  </body>
</html>
