<head>
  <meta content="text/html; charset=utf-8" http-equiv="content-type" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{html_report_name}} - TestReport</title>
  <style>
    body {
      background-color: #f2f2f2;
      color: #333;
      margin: 0 auto;
      width: 960px;
    }
    #summary {
      width: 960px;
      margin-bottom: 20px;
    }
    #summary th {
      background-color: skyblue;
      padding: 5px 12px;
    }
    #summary td {
      background-color: lightblue;
      text-align: center;
      padding: 4px 8px;
    }
    .details {
      width: 960px;
      margin-bottom: 20px;
    }
    .details th {
      background-color: skyblue;
      padding: 5px 12px;
    }
    .details tr .passed {
      background-color: lightgreen;
    }
    .details tr .failed {
      background-color: red;
    }
    .details tr .unchecked {
      background-color: gray;
    }
    .details td {
      background-color: lightblue;
      padding: 5px 12px;
    }
    .details .detail {
      background-color: lightgrey;
      font-size: smaller;
      padding: 5px 10px;
      line-height: 20px;
      text-align: left;
    }
    .details .success {
      background-color: greenyellow;
    }
    .details .error {
      background-color: red;
    }
    .details .failure {
      background-color: salmon;
    }
    .details .skipped {
      background-color: gray;
    }

    .button {
      font-size: 1em;
      padding: 6px;
      width: 4em;
      text-align: center;
      background-color: #06d85f;
      border-radius: 20px/50px;
      cursor: pointer;
      transition: all 0.3s ease-out;
    }
    a.button{
      color: gray;
      text-decoration: none;
      display: inline-block;
    }
    .button:hover {
      background: #2cffbd;
    }

    .overlay {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.7);
      transition: opacity 500ms;
      visibility: hidden;
      opacity: 0;
      line-height: 25px;
    }
    .overlay:target {
      visibility: visible;
      opacity: 1;
    }

    .popup {
      margin: 70px auto;
      padding: 20px;
      background: #fff;
      border-radius: 10px;
      width: 50%;
      position: relative;
      transition: all 3s ease-in-out;
    }

    .popup h2 {
      margin-top: 0;
      color: #333;
      font-family: Tahoma, Arial, sans-serif;
    }
    .popup .close {
      position: absolute;
      top: 20px;
      right: 30px;
      transition: all 200ms;
      font-size: 30px;
      font-weight: bold;
      text-decoration: none;
      color: #333;
    }
    .popup .close:hover {
      color: #06d85f;
    }
    .popup .content {
      max-height: 80%;
      overflow: auto;
      text-align: left;
    }
    .popup .separator {
      color:royalblue
    }

    @media screen and (max-width: 700px) {
      .box {
        width: 70%;
      }
      .popup {
        width: 70%;
      }
    }

  </style>
</head>

<body>
  <h1>Test Report: {{html_report_name}}</h1>

  <h2>Summary</h2>
  <table id="summary">
    <tr>
      <th>START AT</th>
      <td colspan="4">{{time.start_datetime}}</td>
    </tr>
    <tr>
      <th>DURATION</th>
      <td colspan="4">{{ '%0.3f'| format(time.duration|float) }} seconds</td>
    </tr>
    <tr>
      <th>PLATFORM</th>
      <td>zybats {{ platform.zybats_version }} </td>
      <td>{{ platform.python_version }} </td>
      <td colspan="2">{{ platform.platform }}</td>
    </tr>
    <tr>
      <th>STAT</th>
      <th colspan="2">TESTCASES (success/fail)</th>
      <th colspan="2">TESTSTEPS (success/fail/error/skip)</th>
    </tr>
    <tr>
      <td>total (details) =></td>
      <td colspan="2">{{stat.testcases.total}} ({{stat.testcases.success}}/{{stat.testcases.fail}})</td>
      <td colspan="2">{{stat.teststeps.total}} ({{stat.teststeps.successes}}/{{stat.teststeps.failures}}/{{stat.teststeps.errors}}/{{stat.teststeps.skipped}})</td>
    </tr>
  </table>

  <h2>Details</h2>

  {% for test_suite_summary in details %}
  {% set suite_index = loop.index %}
  <h3>{{test_suite_summary.name}}</h3>
  <table id="suite_{{suite_index}}" class="details">
    <tr>
      <td>TOTAL: {{test_suite_summary.stat.total}}</td>
      <td>SUCCESS: {{test_suite_summary.stat.successes}}</td>
      <td>FAILED: {{test_suite_summary.stat.failures}}</td>
      <td>ERROR: {{test_suite_summary.stat.errors}}</td>
      <td>SKIPPED: {{test_suite_summary.stat.skipped}}</td>
    </tr>
    <tr>
      <th>Status</th>
      <th colspan="2">Name</th>
      <th>Response Time</th>
      <th>Detail</th>
    </tr>

    {% for record in test_suite_summary.records %}
    {% set record_index = "{}_{}".format(suite_index, loop.index) %}
    {% set record_meta_datas = record.meta_datas_expanded %}
    <tr id="record_{{record_index}}">
      <th class="{{record.status}}" style="width:5em;">{{record.status}}</th>
      <td colspan="2">{{record.name}}</td>
      <td style="text-align:center;width:6em;">{{ record.response_time }} ms</td>
      <td class="detail">

        {% for meta_data in record_meta_datas %}
        {% set meta_data_index = "{}_{}".format(record_index, loop.index) %}
        <a class="button" href="#popup_log_{{meta_data_index}}">log-{{loop.index}}</a>
        <div id="popup_log_{{meta_data_index}}" class="overlay">
          <div class="popup">
            <h2>Request and Response data</h2>
            <a class="close" href="#record_{{meta_data_index}}">&times;</a>

            <div class="content">
              <h3>Name: {{ meta_data.name }}</h3>

              {% for req_resp in meta_data.data %}

              {% if loop.index > 1 %}
              <div class="separator">==================================== redirect to ====================================</div>
              {% endif %}

              <h3>Request:</h3>
              <div style="overflow: auto">
                <table>
                  {% for key, value in req_resp.request.items() %}
                    <tr>
                      <th>{{key}}</th>
                      <td>
                        {% if key == "headers" %}
                          {% for header_key, header_value in req_resp.request.headers.items() %}
                          <div>
                            <strong>{{ header_key }}</strong>: {{ header_value }}
                          </div>
                          {% endfor %}
                        {% else %}
                          {{value}}
                        {% endif %}
                      </td>
                    </tr>
                  {% endfor %}
                </table>
              </div>

              <h3>Response:</h3>
              <div style="overflow: auto">
                <table>
                    {% for key, value in req_resp.response.items() %}
                      <tr>
                        <th>{{key}}</th>
                        <td>
                          {% if key == "headers" %}
                            {% for header_key, header_value in req_resp.response.headers.items() %}
                            <div>
                              <strong>{{ header_key }}</strong>: {{ header_value }}
                            </div>
                            {% endfor %}
                          {% elif key == "content" %}
                            {% if "image" in req_resp.response.content_type %}
                              <img src="{{ req_resp.response.content }}" />
                            {% else %}
                              {{ value }}
                            {% endif %}
                          {% elif key == "text" %}
                              <pre>{{ req_resp.response.text | e }}</pre>
                          {% else %}
                            {{ value }}
                          {% endif %}
                        </td>
                      </tr>
                    {% endfor %}
                  </table>
              </div>
              {% endfor %}

              <h3>Validators:</h3>
              <div style="overflow: auto">
                  <table>
                    <tr>
                      <th>check</th>
                      <th>comparator</th>
                      <th>expect value</th>
                      <th>actual value</th>
                    </tr>
                    {% for validator in meta_data.validators %}
                    <tr>
                      {% if validator.check_result == "pass" %}
                      <td class="passed">
                      {% elif validator.check_result == "fail" %}
                      <td class="failed">
                      {% elif validator.check_result == "unchecked" %}
                      <td class="unchecked">
                      {% endif %}
                        {{validator.check | e}}
                      </td>
                      <td>{{validator.comparator}}</td>
                      <td>{{validator.expect | e}}</td>
                      <td>{{validator.check_value | e}}</td>
                    </tr>
                    {% endfor %}
                  </table>
              </div>

              <h3>Statistics:</h3>
              <div style="overflow: auto">
                <table>
                  <tr>
                      <th>content_size(bytes)</th>
                      <td>{{ meta_data.stat.content_size }}</td>
                    </tr>
                  <tr>
                    <th>response_time(ms)</th>
                    <td>{{ meta_data.stat.response_time_ms }}</td>
                  </tr>
                  <tr>
                    <th>elapsed(ms)</th>
                    <td>{{ meta_data.stat.elapsed_ms }}</td>
                  </tr>
                </table>
              </div>

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

        {% if record.attachment %}
          <a class="button" href="#popup_attachment_{{record_index}}">traceback</a>
          <div id="popup_attachment_{{record_index}}" class="overlay">
            <div class="popup">
              <h2>Traceback Message</h2>
              <a class="close" href="#record_{{record_index}}">&times;</a>
              <div class="content"><pre>{{ record.attachment | e }}</pre></div>
            </div>
          </div>
        {% endif %}

      </td>
    </tr>
  {% endfor %}
  </table>
  {% endfor %}
</body>