<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_at_iso_format}}</td>
    </tr>
    <tr>
      <th>DURATION</th>
      <td colspan="4">{{ '%0.3f'| format(time.duration|float) }} seconds</td>
    </tr>
    <tr>
      <th>PLATFORM</th>
      <td>HttpRunner {{ platform.httprunner_version }} </td>
      <td>{{ platform.python_version }} </td>
      <td colspan="2">{{ platform.platform }}</td>
    </tr>
    <tr>
      <th>STAT</th>
      <th colspan="2">SUCCESS</th>
      <th colspan="2">FAIL</th>
    </tr>
    <tr>
      <td>total (details) =></td>
      <td colspan="2">{{stat.success}}</td>
      <td colspan="2">{{stat.fail}}</td>
    </tr>
  </table>

  <h2>Details</h2>

  {% for testcase_summary in testcases %}
  {% set testcase_index = loop.index %}
  <h3>{{testcase_summary.name}}</h3>
  <table id="testcase_{{testcase_index}}" class="details">
    <tr>
      <th>Status</th>
      <th colspan="2">Name</th>
      <th>Response Time</th>
      <th>Detail</th>
    </tr>

    {% set testcase = testcase_summary %}
    {% set step_datas = testcase_summary.step_datas %}
    {% for session_data in step_datas %}
    {% set step_index = "{}_{}".format(testcase_index, loop.index) %}
    <tr id="step_{{step_index}}">
      <th class="{{session_data.status}}" style="width:5em;">{{session_data.status}}</th>
      <td colspan="2">{{session_data.name}}</td>
      <td style="text-align:center;width:6em;">{{ session_data.stat.response_time_ms }} ms</td>
      <td class="detail">
        <a class="button" href="#popup_log_{{step_index}}">log-{{loop.index}}</a>
        <div id="popup_log_{{step_index}}" class="overlay">
          <div class="popup">
            <h2>Request and Response data</h2>
            <a class="close" href="#step_{{step_index}}">&times;</a>

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

              {% for req_resp in session_data.req_resps %}

              {% 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 in ["headers", "body"] %}
                            <pre>{{ value | e }}</pre>
                        {% 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" %}
                            <pre>{{ value | e }}</pre>
                          {% elif key == "body" %}
                            {% if "image" in req_resp.response.content_type %}
                              <img src="{{ req_resp.response.content }}" />
                            {% else %}
                              <pre>{{ value | e }}</pre>
                            {% endif %}
                          {% else %}
                            {{ value }}
                          {% endif %}
                        </td>
                      </tr>
                    {% endfor %}
                  </table>
              </div>
              {% endfor %}

              <h3>Validators:</h3>
                <div style="overflow: auto">
                {% set validate_extractors = session_data.validators.validate_extractor %}
                {% if validate_extractors %}
                <table>
                    <tr>
                      <th>check</th>
                      <th>comparator</th>
                      <th>expect value</th>
                      <th>actual value</th>
                    </tr>
                    {% for validator in validate_extractors %}
                    <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>
                {% endif %}

                {% set validate_script = session_data.validators.validate_script %}
                {% if validate_script %}
                    <table>
                        <tr>
                            <th>validate script</th><th>output</th>
                        </tr>
                        <tr>
                            <td><pre>{{validate_script.validate_script | safe}}</pre></td>
                            {% if validate_script.check_result == "pass" %}
                            <td class="passed">
                            {% elif validate_script.check_result == "fail" %}
                            <td class="failed">
                            {% endif %}
                            {{validate_script.output}}
                            </td>
                        </tr>
                    </table>
                {% endif %}
              </div>

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

            </div>
          </div>
        </div>

        {% if session_data.status == "failed" %}
          <a class="button" href="#popup_attachment_{{step_index}}">traceback</a>
          <div id="popup_attachment_{{step_index}}" class="overlay">
            <div class="popup">
              <h2>Traceback Message</h2>
              <a class="close" href="#step_{{step_index}}">&times;</a>
              <div class="content"><pre>{{ testcase.attachment | e }}</pre></div>
            </div>
          </div>
        {% endif %}

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