<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>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>API Test Report</h1>

<h2>Summary</h2>
<table id="summary">
    <tr>
        <th>START AT</th>
        <td colspan="4">{{.Time.StartAt}}</td>
    </tr>
    <tr>
        <th>DURATION</th>
        <td colspan="4">{{ .Time.Duration }} seconds</td>
    </tr>
    <tr>
        <th>PLATFORM</th>
        <td>HttpRunnerPlus {{ .Platform.HttprunnerVersion }}</td>
        <td>{{ .Platform.GoVersion }}</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}}/0/{{.Stat.TestSteps.Failures}}/0)</td>
    </tr>
</table>

<h2>Details</h2>
{{ range $suite_index, $detail := .Details }}
<h3>{{.Name}}</h3>
<table id="suite_{{$suite_index}}" class="details">
    <tr>
        <td>TOTAL: {{.Stat.Total}}</td>
        <td>SUCCESS: {{.Stat.Successes}}</td>
        <td>FAILED: 0</td>
        <td>ERROR: {{.Stat.Failures}}</td>
        <td>SKIPPED: 0</td>
    </tr>
    <tr>
        <th>Status</th>
        <th colspan="2">Name</th>
        <th>Response Time</th>
        <th>Detail</th>
    </tr>
    {{- range $loop_index, $record := .Records }}
    {{- with $record}}
    {{- $status := "error"}}
    {{- if .Success }} {{ $status = "success" }} {{ end }}
    <tr id="record_{{$suite_index}}_{{$loop_index}}">
        <th class={{$status}} style="width:5em;">{{$status}}</th>
        <td colspan="2">{{.Name}}</td>
        <td style="text-align:center;width:6em;">{{ .Elapsed }} ms</td>
        <td class="detail">
            <a class="button" href="#popup_log_{{$suite_index}}_{{$loop_index}}">log</a>
            <div id="popup_log_{{$suite_index}}_{{$loop_index}}" class="overlay">
                <div class="popup">
                    <h2>Request and Response data</h2>
                    <a class="close" href="#record_{{$suite_index}}_{{$loop_index}}">&times;</a>
                    <div class="content">
                        <h3>Name: {{ .Name }}</h3>
                        {{- if .Data}}
                        <h3>Request:</h3>
                        <div style="overflow: auto">
                            <table>
                                {{- range $key, $value := .Data.ReqResps.Request}}
                                <tr>
                                    <th>{{$key}}</th>
                                    <td align="left">
                                        {{- if eq $key "headers" }}
                                        {{- range $k, $v := $value }}
                                        <pre>{{$k}}: {{$v}}</pre>
                                        {{- end -}}
                                        {{- else if eq $key "params" }}
                                        {{- range $k, $v := $value }}
                                        <pre>{{$k}}: {{$v}}</pre>
                                        {{- end -}}
                                        {{- else if eq $key "cookies" }}
                                        {{- range $k, $v := $value }}
                                        <pre>{{$k}}: {{$v}}</pre>
                                        {{- end -}}
                                        {{- else }}
                                        <pre>{{$value}}</pre>
                                        {{- end }}
                                    </td>
                                </tr>
                                {{- end }}
                            </table>
                        </div>
                        <h3>Response:</h3>
                        <div style="overflow: auto">
                            <table>
                                {{- range $key, $value := .Data.ReqResps.Response}}
                                <tr>
                                    <th>{{$key}}</th>
                                    <td align="left">
                                        {{- if eq $key "headers" }}
                                        {{- range $k, $v := $value}}
                                        <pre>{{$k}}: {{$v}}</pre>
                                        {{- end -}}
                                        {{- else if eq $key "cookies" }}
                                        {{- range $k, $v := $value }}
                                        <pre>{{$k}}: {{$v}}</pre>
                                        {{- end -}}
                                        {{- else }}
                                        <pre>{{ $value }}</pre>
                                        {{- end }}
                                    </td>
                                </tr>
                                {{- end }}
                            </table>
                        </div>

                        <h3>Validators:</h3>
                        <div style="overflow: auto">
                            {{- if .Data.Validators }}
                            <table>
                                <tr>
                                    <th>check</th>
                                    <th>comparator</th>
                                    <th>expect value</th>
                                    <th>actual value</th>
                                </tr>
                                {{- range $validator := .Data.Validators }}
                                <tr>
                                    {{- if eq $validator.CheckResult "pass" }}
                                    <td class="passed">
                                        {{- else if eq $validator.CheckResult "fail" }}
                                    <td class="failed">
                                        {{- else if eq $validator.CheckResult "unchecked" }}
                                    <td class="unchecked">
                                        {{- end }}
                                        {{$validator.Check}}
                                    </td>
                                    <td>{{$validator.Assert}}</td>
                                    <td>{{$validator.Expect}}</td>
                                    <td>{{$validator.CheckValue}}</td>
                                </tr>
                                {{- end }}
                            </table>
                            {{- end }}

                            <h3>Statistics:</h3>
                            <div style="overflow: auto">
                                <table>
                                    <tr>
                                        <th>content_size(bytes)</th>
                                        <td>{{ .ContentSize }}</td>
                                    </tr>
                                    <tr>
                                        <th>response_time(ms)</th>
                                        <td>{{ .Elapsed }}</td>
                                    </tr>
                                    <tr>
                                        <th>elapsed(ms)</th>
                                        <td>{{ .Elapsed }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        {{- end }}
                    </div>
                </div>
            </div>
            {{ if .Attachment }}
            <a class="button" href="#popup_attachment_{{$suite_index}}_{{$loop_index}}">traceback</a>
            <div id="popup_attachment_{{$suite_index}}_{{$loop_index}}" class="overlay">
                <div class="popup">
                    <h2>Traceback Message</h2>
                    <a class="close" href="#record_{{$suite_index}}_{{$loop_index}}">&times;</a>
                    <div class="content">
                        <pre>{{ .Attachment }}</pre>
                    </div>
                </div>
            </div>
            {{- end }}
        </td>
    </tr>
    {{- end }}
    {{- end }}
</table>
{{- end }}
</body>