<!DOCTYPE html>
<html>
  <head>
    <title>Test Results</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>

  {% if expectation_suite_name %}
    {% set expectation_suite_name_dot_count = expectation_suite_name.count(".") -%}
  {% endif %}

  {% if "ValidationResults" in renderer_type or "ProfilingResults" in renderer_type %}
    {% set static_images_dir = ((expectation_suite_name_dot_count + 4) * "../") + "static/images/" -%}
  {% elif "ExpectationSuite" in renderer_type %}
    {% set static_images_dir = ((expectation_suite_name_dot_count + 1) * "../") + "static/images/" -%}
  {% elif "SiteIndex" in renderer_type %}
    {% set static_images_dir = "./static/images/" -%}
  {% endif %}


    {# {# Remove this when not debugging: #}
    {# <meta http-equiv="refresh" content="1"/> #}
    <link rel="stylesheet" href="{{ static_images_dir + "bootstrap-table.min.css" }}">
    <link rel="stylesheet" href="{{ static_images_dir + "bootstrap.min.css" }}">
    <link rel="stylesheet" type="text/css" href="{{ static_images_dir + "bootstrap-table-filter-control.min.css" }}">
    <link rel="stylesheet" type="text/css" href="{{ static_images_dir + "bootstrap-datepicker.min.css" }}">

    <style>{% include 'data_docs_default_styles.css' %}</style>

    <style>{% include 'data_docs_custom_styles.css' ignore missing %}</style>

    {% if "ValidationResults" in renderer_type or "ProfilingResults" in renderer_type %}
      {% set static_scripts_dir = "../../../../../static/scripts/" -%}
    {% elif "ExpectationSuite" in renderer_type %}
      {% set static_scripts_dir = "../../../../static/scripts/" -%}
    {% elif "SiteIndex" in renderer_type %}
      {% set static_scripts_dir = "./static/scripts/" -%}
    {% endif %}

    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
    <link rel="stylesheet" href="{{ static_images_dir + "all.min.css" }}">

    <script src="{{ static_images_dir + "jquery-3.4.1.min.js" }}"></script>
    <script src="{{ static_images_dir + "popper.min.js" }}"></script>
    <script src="{{ static_images_dir + "bootstrap.min.js" }}"></script>
    <script src="{{ static_images_dir + "bootstrap-table.min.js" }}"></script>
    <script src="{{ static_images_dir + "bootstrap-table-filter-control.min.js" }}"></script>
    <script src="{{ static_images_dir + "bootstrap-datepicker.min.js" }}"></script>

    {% include 'favicon.j2' %}
  </head>

  <body>
    {% include 'top_navbar.j2' %}
    <div class="container-fluid pt-4 pb-4 pl-5 pr-5">
      <div class="row">
        <div class="col-md-10 col-lg-10 col-xs-12 pl-md-4 pr-md-3"  style="width: 100%; max-width: 100%;">
          {% for section in sections %}
            {% set section_loop = loop -%}
            {% include 'section.j2' %}
          {% endfor %}
        </div>
      </div>
    </div>

    <style>
      footer {
        display: none;
      }

      @media (prefers-color-scheme: dark) {
        .table {
          color: #212529 !important;
          background-color: #f1f1f1
        }
        .table-bordered{
          border: #212529;
        }
        .table-hover tbody tr:hover {
          color: #212529;
          background-color: #f1f1f1
        }
        .form-control:disabled,
        .form-control[readonly]{
          background-color: #343a40;
          opacity: .8;
        }

        .bg-light {
          background: inherit !important;
        }

        .code-snippet {
          background: #CDCDCD !important;
        }

        .alert-secondary a {
          color: #0062cc;
        }

        .alert-secondary a:focus, .alert-secondary a:hover{
          color: #004fa5;
        }

      }
    </style>

    <script>
      document.querySelectorAll('.bg-dark').forEach(function(el) {
        el.classList.remove('bg-dark');
      });
    </script>

  </body>
</html>
