<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8" />

    <title>ScanAPI Report</title>
    <meta name="description" content="ScanAPI Report" />
    <meta name="author" content="scanapi/scanapi" />
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB11BMVEX////8/Pzn6erKzdCyt7qkqq6dpKiepKilq660ubzN0NLq6+z9/f3e4OGXnqJzfYN4gYeIkJWUnKCaoaWUm5+GjpR3gIZ1foTk5ufN0dNyfIKQl5zQ1dfw8/T7/f3+///6/P3u8fLLz9KJkZbX2tvp6+ynrbH5+fn/z8r/ta7/tq//tq7/4t/19/iboqZ/iI3x8vK3vL99hYvy8vP/xsD/qaD/qqL/qqH/3Nl1f4XFycyWnaJueH6co6ecpKidpKmepamdpamepKlpc3qlq6/+/v69wcSZoKRrdXuLk5iAiI5/h41zfIJ5goiUm6BocnmTmp+do6fFycvX2du7wMO5vcCrsbXs7u6Ci5D4+fmCipDz9PXIzM7r7O35+vrq7O3w8fLHy87v8PFcZ26tsrb6+/vs7e68wMNbZm27v8Lm6Ol2f4XMz9H4+PmGj5Tb3d+5vsGfpant7u/e4OKSmZ7AxMeAiY7u8PC6v8G6v8Jud36EjJHy8/ONlJnDx8rZ3N2DjJF8hIp8hYuzuLzR1Nba3d/KztB8hYqyuLv8/f3a3d7V2Nr6+vr3+PiHj5SqsLTd3+DT1tiRmJ3o6epsdnz4+Pi4vcCPl5vQ09VveH/o6uunrbDz9PRPvQCIAAAAAWJLR0QAiAUdSAAAAAd0SU1FB+QHGRE1H+ztMTUAAAEqSURBVDjLY2AYWoCRiZmFlY2dg5OLmwebPC8fv4CgkLCwiKiYOJsEpryklLSMrJw8A4O8gqKSspgKuryqmJq6hqaWNhBoaeno6ukboCkwNDJmMDE1AwNzCwZuSys0BdY2tux29g62Dva2jva2TnrOLqjyrm627h6eXjbCNt5sPr5+/gGBQRiuVFcODpFmlA5lsA0Lj+DG4s1IJAVRNFAQHRMbh6wgPiExCUVBTHJKKrKCtPSMTBQFWdk5uXn5mUAFBYyehUURTMU+qIHNWFKaX1ZeAVRQWVRVXVNbV9+AFtbMjU3NDKEgExhaWhnamto70FzZ2dXdA1TQ29cP4vFMmBiJLUmETpo8JWoqA24wbXpk0AxX3PKuwjNnMeADrrPL8CtgUJ/DMDQBAC0gTAcOoWsNAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA3LTI1VDE1OjUzOjMxKzAyOjAwcHYhkAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wNy0yNVQxNTo1MzozMSswMjowMAErmSwAAAAASUVORK5CYII=">
</head>

<body>
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
            background-color: #eeeeee;
            font-size: 18px;
            font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: #636c73;
            font-weight: bold;
        }

        h1 {
            text-align: center;
        }

        h3 {
            font-size: 21px;
        }

        details {
            margin-top: 20px;
            position: relative;
        }

        details div {
            background-color: #f5f5f5;
            padding: 20px 20px;
            border-radius: 10px;
        }

        summary {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        table {
            border-radius: 20px;
        }

        table,
        td,
        th {
            border: 1px solid #ccc;
            text-align: left;
            border-collapse: collapse;
        }

        th {
            background-color: #f5f5f5;
            text-align: center;
            padding: 8px 10px;
        }

        td {
            text-align: left;
            padding: 8px 10px;
        }

        /* Wrapper */
        .wrapper {
            background-color: white;
            border-radius: 8px;
            padding-bottom: 20px;
        }

        /* END -- Wrapper */

        /* Title */
        .title {
            border-bottom: 8px solid #eeeeee;
            margin-bottom: 20px;
            padding: 20px;
        }

        .title__name {
            margin: 0 0 10px 0;
            padding: 0;
            font-size: 36px;
            font-weight: 300;
        }

        .title__project {
            font-weight: bold;
            color: #F67164;
        }

        .title__overview {
            padding: 0;
            margin: 0;
            font-size: 16px;
            color: #636c73;
            text-align: center;
        }

        /* END -- Title */

        /* HEADER */
        .header {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header__image {
            width: 250px;
            margin: 20px 0;
        }

        .github {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px 0;
        }

        .github__svg {
            width: 30px;
        }

        .wrapper,
        .header {
            width: 1150px;
            margin: auto;
        }

        @media only screen and (max-width: 767px) {
            .wrapper {
                width: auto;
                padding: 0 20px;
            }
        }

        /* END -- HEADER */

        /* Endpoint */
        .endpoint {
            overflow: hidden;
            margin-bottom: 20px;
        }

        .endpoint__content {
            padding: 0 30px;
            height: 0;
        }

        .endpoint__response h3,
        .endpoint__request h3,
        .endpoint__tests h3 {
            text-transform: uppercase;
            margin: 20px 0;
            display: inline-block;
            border-radius: 10px;
        }

        .endpoint__operationTitle {
            margin: 20px 0;
        }

        .endpoint__title {
            background-color: #f5f5f5;
            padding: 10px 12px;
            border-radius: 10px;
            font-size: 20px;
            display: block;
            cursor: pointer;
            margin: 0 20px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .endpoint__url {
            line-break: anywhere;
        }

        .http_method {
            font-weight: bold;
        }

        .endpoint__titleInfo {
            display: flex;
            line-height: 22px;
        }

        .endpoint__status {
            margin-left: 10px;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 100px;
            text-align: center;
            color: white;
            font-size: 14px;
            line-height: 20px;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }

        .endpoint__status--P {
            background-color: green;
        }

        .endpoint__status--F {
            background-color: red;
        }

        .endpoint__titleInfo::after {
            content: "\276F";
            width: 1em;
            height: 1em;
            margin-left: 5px;
            text-align: right;
            transition: all 0.35s;
            color: #636c73;
        }

        .endpoint__checkbox {
            position: absolute;
            opacity: 0;
            z-index: -1;
        }

        .endpoint__checkbox:checked+.endpoint__title .endpoint__titleInfo::after {
            transform: rotate(90deg);
        }

        .endpoint__checkbox:checked~.endpoint__content {
            height: auto;
        }

        .endpoint__tests {
            display: flex;
            flex-direction: column;
        }

        .endpoint__testcase {
            display: flex;
            flex-direction: row;
            padding: 10px 0;
        }

        .endpoint__testcaseStatus {
            width: 10%;
        }

        .endpoint__testcaseLabel {
            display: flex;
            flex-direction: column;
        }

        .endpoint__testcase-failure {
            padding: 10px 0;
        }

        .endpoint__testcase-passed {
            color: green;
        }

        .endpoint__testcase-failed,
        .endpoint__testcase-error {
            color: red;
        }

        /* END -- ENDPOINT */

        /* TESTS SUMMARY */
        .tests__summary {
            background: #f9f9f9;
            padding: 10px 12px;
            margin: 0 20px;
            display: flex;
            flex-direction: column;
            border-radius: 10px;
            border: solid;
            border-width: 1px;
        }

        .tests__summary--passed {
            border-color: green;
        }

        .tests__summary--failed {
            border-color: red;
        }

        .tests__summaryTitle {
            text-align: center;
            margin-bottom: 30px;
        }

        .tests__summaryResults {
            margin-bottom: 21px;
            display: flex;
            justify-content: space-between;
        }

        /* END TESTS SUMMARY */

        /* START RENDERJSON */
        .json-body{
            padding: 0;
            margin: 0;
        }
        /* END RENDERJSON */

        /* START SNIPPET CONTENT */
        .snippet__content{
            background-color: #eeeeee;
            white-space: break-spaces;
            padding: 20px 40px 20px 10px;
            font-size: 16px;
        }

        .snippet__content a{
            text-decoration: none;
        }

        .copy__snippet{
            margin: 0;
            padding: 0;
            border: none;
        }

        .copy__snippet{
            position: absolute;
            top: 42px;
            right: 10px;
            background-color: #C6C4C4;
            border-radius: 2px;
            font-size: 18px;
            width: 25px;
            height: 23px;
            cursor: pointer;
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .copy__snippet:hover{
            background-color: #D6D8D6;
        }

        .copy__snippet:focus{
            outline: none;
        }

        .bg_green{
            background-color: green!important;
            color: white;
        }
        /* END SNIPPET CONTENT */
    </style>

    <div class="header">
        <img class="header__image" src="https://scanapi.s3.us-east-2.amazonaws.com/assets/images/logos/scanapi-no-background.png" />
    </div>

    <div class="wrapper">
        <header class="title">
            {% if project_name %}
            <h1 class="title__name">Report generated for <span class="title__project">{{ project_name }}</span></h1>
            {% else %}
            <h1 class="title__name">Report generated for your API</h1>
            {% endif %}
            <p class="title__overview">Generated at: {{now}}</p>
        </header>

        <!-- summary_box -->

        {% for result in results -%}
    {% set response = result["response"] %}
        {% set tests = result["tests_results"] %}
        {% set endpoint_status_label = "P" if result["no_failure"] else "F" %}
        {% set request = response.request %}

        <div class="endpoint" id="endpoint_{{ loop.index | string }}">
            <input type="checkbox" class="endpoint__checkbox" id="chck_{{ loop.index | string }}" />
            <label class="endpoint__title" for="chck_{{ loop.index | string }}">
                <span class="endpoint__url"><span class="http_method">{{request.method}}</span> {{ request.path_url }}</span>
                <span class="endpoint__titleInfo">
                    {{ response.status_code }}
                    <span class="endpoint__status endpoint__status--{{endpoint_status_label}}">
                        {{endpoint_status_label}}
                    </span>
                </span>
            </label>

            <div class="endpoint__content">
                <section class="endpoint__request">
                    <h3>Request</h3>
                    <p>Full URL: <a href="{{request.url}}"> {{request.url}}</a></p>

                    {% if request.headers|length > 0 %}
                    <table>
                        <thead>
                            <tr>
                                <th>
                                    Header
                                </th>
                                <th>
                                    Value
                                </th>
                            </tr>
                        </thead>

                        <tbody>
                            {% for key, value in request.headers.items() -%}
                            <tr>
                                <td>
                                    {{ key }}
                                </td>
                                <td>
                                    {{value}}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% endif %}

                    {% if ( request.body and request.body.decode("UTF-8") != "{}" ) %}
                    <details>
                        <summary>Body</summary>
                        <p class="json-body">{{ request|render_body }}</p>
                        <button class="copy__snippet">&#10063;</button>
                    </details>
                    {% endif %}

                    <details>
                        <summary>cURL</summary>
                        <pre>{{request|curlify(True)}}</pre>
                        <button class="copy__snippet">&#10063;</button>
                    </details>
                </section>

                <section class="endpoint__response">
                    <h3>Response</h3>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    status code
                                </td>
                                <td>
                                    {{ response.status_code }}
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    response time
                                </td>
                                <td>
                                    {{ response.elapsed.total_seconds() }} s
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    redirect
                                </td>
                                <td>
                                    {{ response.is_redirect }}
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    {% if response.headers|length > 0 %}
                    <details>
                        <summary>Headers</summary>
                        <table>
                            <thead>
                                <tr>
                                    <th>
                                        Header
                                    </th>
                                    <th>
                                        Value
                                    </th>
                                </tr>
                            </thead>
                            {% for key, value in response.headers.items() -%}
                            <tbody>
                                <tr>
                                    <td>
                                        {{ key }}
                                    </td>
                                    <td>
                                        {{value}}
                                    </td>
                                </tr>
                            </tbody>
                            {% endfor %}
                        </table>
                    </details>

                    <details>
                        <summary>Content</summary>
                        <p class="json-body">
                            {% if response.text %} {{ response.text }} {% else %} {{ response.content }} {% endif %}
                        </p>
                        <button class="copy__snippet">&#10063;</button>
                    </details>
                    {% endif %}
                </section>

                <section class="endpoint__tests">
                    <h3>Tests</h3>
                    {% for test in tests -%}
                    <div class="endpoint__testcase">
                        <div class="endpoint__testcaseStatus">
                            <strong class="endpoint__testcase-{{test.status}}">
                                [{{test.status|upper}}]
                            </strong>
                        </div>
                        <div class="endpoint__testcaseLabel">
                            <span>
                                {{test.name}}
                            </span>
                            {% if test.failure %}
                            <span class="endpoint__testcase-failure">{{test.failure}} is false</span>
                            {% endif %}
                            {% if test.error %}
                            <span class="endpoint__testcase-failure">{{test.error}}</span>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                    <section>
            </div>
        </div>
        {% endfor %}

        {% set final_status = "passed" if session.succeed else "failed" %}

        <div class="tests__summary tests__summary--{{final_status}}">
            <h3 class="tests__summaryTitle">Tests Summary</h3>
            <div class="tests__summaryResults">
                <span><strong>PASSED:</strong> {{session.successes}}</span>
                <span><strong>FAILURES:</strong> {{session.failures}}</span>
                <span><strong>ERRORS:</strong> {{session.errors}}</span>
                <span><strong>Total Time:</strong> {{ session.elapsed_time() }}</span>
            </div>
        </div>

        <a class="github" href="https://github.com/scanapi/scanapi"><img class="github__svg" src="https://scanapi.s3.us-east-2.amazonaws.com/assets/images/github/github-logo.svg" /></a>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/renderjson"></script>
        <script>
            renderjson.set_show_to_level(1);
            renderjson.set_max_string_length(65);

            const all_json_bodies = document.getElementsByClassName("json-body");

            function tryParseJSON(string) {
                try {
                    var o = JSON.parse(string);
                    if (o && typeof o === "object") {
                        return o;
                    }
                }
                catch (e) { console.log("Invalid JSON Body: " + e) }

                return false;
            };

            for (var i = 0; i < all_json_bodies.length; i++) {
                raw_json = all_json_bodies[i].innerText;
                parsed_json = tryParseJSON(raw_json)

                if (parsed_json) {
                    all_json_bodies[i].innerText = '';
                    all_json_bodies[i].appendChild(renderjson(parsed_json));
                    all_json_bodies[i].firstElementChild.setAttribute('data-content', raw_json);
                }
            }
            /*
            * Adding class name of snippet__content to all pre elements
            */
            var pre_elements = document.querySelectorAll('pre');

            for (var i = 0; i < pre_elements.length; i++){
                pre_elements[i].classList.add('snippet__content');
            }
            /*
            * Copying data to clipboard
            */
            var copy_snippet_button = document.querySelectorAll('.copy__snippet');

            var copyToClipBoard = function(value, button) {
                if ( value ){
                    navigator.clipboard.writeText(value)
                        .then(function(){
                            console.log('Copied!');
                            console.log(value)
                            button.classList.add('bg_green')

                            setTimeout(function(){
                                button.classList.remove('bg_green')
                            }, 180);
                        })
                        .catch(function(err){
                            console.log('Something went wrong', err);
                        })
                }
            }

            copy_snippet_button.forEach(function(elem){
                elem.addEventListener('click', function(evt){
                    var sibling_element = this.previousElementSibling;
                    var _this_button = this;
                    if ( sibling_element.className == 'snippet__content' ){
                        var content = sibling_element.textContent.trim();
                        copyToClipBoard(content, _this_button)
                    } else {
                        var child_element = sibling_element.children[0];
                        var content = child_element.getAttribute('data-content').trim()
                        copyToClipBoard(content, _this_button)
                    }
                })
            })
        </script>
        <script>
            function openAnchoredEndpoint(){
                const url = window.location.href;
                const containsAnEndpointAnchor = url.includes("#endpoint");
                if(containsAnEndpointAnchor) {
                    const elementId = url.split('#')[1];
                    const element = document.getElementById(elementId);
                    function scrollToElement() {
                        element.scrollIntoView({
                            block: 'start'
                        });
                    }
                    function openElement() {
                        element.getElementsByTagName('input')[0].click();
                    };
                    openElement();
                    scrollToElement();
                }
            }
            openAnchoredEndpoint();
        </script>
</body>

</html>
