<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="{{title}}">
    <title>{{title}}</title>
    <link rel="stylesheet" href="report-styles.css">
    <style type="text/css">
        body {
            background-color: #fafafa;
            font-weight: 200;
        }

        h1, .h1, h2, .h2, h3, .h3 {
            margin: 10px;
            font-weight: 200;
        }

        h1, .h1 {
            font-size: 30px;
        }

        h2, .h2 {
            font-size: 24px;
        }

        h3, .h3 {
            font-size: 20px;
        }

        table {
            width: 100%;
        }

        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
            /*border-color: #ECEFF1;*/
        }

        .table-bordered > tbody > tr, .table-bordered > tfoot > tr {
            background-color: white;
        }

        .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 10px;
            padding-top: 10px;
            border-color: #ECEFF1;
        }

        .step-table .step-name {
            text-align: left;
        }

        .step-table .step-result {
            text-align: left;
        }

        .step-table .step-line {
            color: grey;
            text-align: right;
            display: inline;
        }
        .warning      {
            background-color: #FFCDD2;
            color: #AD2B2B;
        }
        span.error      {
            color: #AD2B2B;
        }
        span.success    {
            color: #53891E;
        }
        span.pending    {
            color: grey;
        }
        .suite-header {
            cursor: pointer;
        }
        .expandable-control {
            cursor: pointer;
        }
        .test-header {
            cursor: pointer;
        }
        .test-expand {
            margin: 2px;
            padding: 1px;
        }
        .test-title {
            margin: 2px;
            padding: 1px;
            text-align: left;
        }
        .test-pass, .suite-pass {
            background-color: #C8E6C9;
        }

        .test-fail, .suite-fail {
            background-color: #FFCDD2;
        }

        .test-skipped, .suite-pending {
            background-color: #B5C8D1;;
        }

        .test-unknown, .suite-unknown {
            background-color: #5EA3D1;;
        }
        .pre {
            display: block;
            padding: 9.5px;
            margin: 0 0 10px;
            margin-left: 0px;
            font-size: 13px;
            line-height: 1.42857143;
            color: #333;
            word-break: break-all;
            word-wrap: break-word;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .log-output {
            background-color: rgba(255, 192, 0, 0.36);
            margin-left:24px;
        }

        .screenshotWrapper {
            max-width: 1024px;
            margin-left:24px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .screenshot {
        }
        .screenshot-small {
            height: 20%;
            width: 20%;
        }

        .screenshot-large {
            height: 100%;
            width: 100%;
        }

        .table-test {
            margin: 0px;
            margin-bottom: 2px;
        }

        tr.test-row {
            border-top: 2px solid white;
        }

        .test-iteration{
            background-color: #9bf8ff;
        }

        .assert {
            background-color: #a39eff;
            margin-left:24px;
            font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
        }

        .stack {
            background-color: rgba(156, 135, 255, 0.36);
            margin-left:24px;
        }

        .filter {
            border: 1px solid;
            padding: 8px;
            border-radius: 4px;
            background-color: #ecda8c;
            cursor: pointer;
            /*color:white;*/
        }

        .filterOff{
            border: 1px solid;
            padding: 8px;
            border-radius: 4px;
            background-color: rgba(138, 226, 219, 0.59);
            cursor: pointer;
            /*color:white;*/
        }
        /* Style the accordion panel. Note: hidden by default */
        .panel {
            padding: 0 18px;
            display: none;
            overflow: hidden;
        }
    </style>
</head>

<body>
<div class="container">

    <div id="wdio-html-report" class="page-header"><h1>{{title}}</h1></div>

    <h2>Summary</h2>
    <table class="table">
        <thead>
        <th>Key</th>
        <th>Value</th>
        </thead>

        <tbody>
        <tr>
            <td>Browser</td>
            <td>{{browserName}}</td>
        </tr>

        <tr>
            <td>Start</td>
            <td>{{metrics.start}}</td>
        </tr>
        <tr>
            <td>End</td>
            <td>{{metrics.end}}</td>
        </tr>
        <tr>
            <td>Duration</td>
            <td>{{#humanizeDuration metrics.duration}}{{/humanizeDuration}}</td>
        </tr>
        <tr>
            <td>Breakdown</td>
            <td>
                <table class="table table-bordered">
                    <tr>
                        <td class='test-pass'>Tests Passed</td>
                        <td class='test-skipped'>Tests Skipped</td>
                        <td class='test-fail'>Test Failures</td>
                    </tr>
                    <tr>
                        <td>{{metrics.passed}}</td>
                        <td>{{metrics.skipped}}</td>
                        <td>{{metrics.failed}}</td>
                    </tr>
                </table>
            </td>
        </tr>
        </tbody>
    </table>

    <table class="table table-bordered">
        <tr>
            <td>
                <span class="filter toggleFailingTests"><span>Hide</span> Failing Suites</span>
                <span class="filter togglePassingTests"><span>Hide</span> Passing Suites</span>
            </td>
        </tr>
    </table>


    <h2>Results</h2>

    <table>
    <tr>
    <td>

        <table class="table table-bordered">
            <tr>
                <td colspan="2">
                {{#isValidReport suites}}
                    <h3>{{info.cid}}</h3>
                {{else}}
                    <h3 class="warning">{{info.cid}}</h3>
                {{/isValidReport}}
                    <table class="table table-bordered">
                        {{#if specs }}
                            {{#each specs as | spec|}}
                            <tr>
                                <td>Spec File</td>
                                <td>{{spec}}</td>
                            {{/each}}
                        {{else}}
                            {{#each info.specs as | spec|}}
                                <tr>
                                    <td>Spec File</td>
                                    <td>{{spec}}</td>
                            {{/each}}
                        {{/if}}
                        {{#each suites as |suiteInfo| }}
                            {{#isValidSuite suiteInfo}}
                                <table class="table table-bordered table-suite">
                                    <tr class="suite-header">
                                        <td colspan="2"
                                            class="{{#suiteStateColour suiteInfo.tests}}{{/suiteStateColour}}">
                                            <h3>
                                                <span style="margin: 2px; padding: 1px" class="glyphicon glyphicon-chevron-up">&nbsp;</span>Suite {{suiteInfo.suite.title}}
                                            </h3>
                                        </td>
                                    </tr>

                                    {{#ifSuiteHasTests suiteInfo.tests}}
                                        <tr>
                                            <td>Suite Start</td>
                                            <td>{{suiteInfo.suite.start}}</td>
                                        </tr>
                                        <tr>
                                            <td>Suite End</td>
                                            <td>{{suiteInfo.suite.end}}</td>
                                        </tr>
                                        <tr>
                                            <td>Suite Duration</td>
                                            <td>{{#humanizeDuration suiteInfo.suite._duration}}{{/humanizeDuration}}</td>
                                        </tr>


                                        <tr>
                                            <td colspan="2"><h4>{{suiteInfo.tests.length}}&nbsp;Test(s):</h4></td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <table>
                                                    {{#each suiteInfo.tests as | testInfo|}}
                                                        <tr>
                                                            <td>
                                                                <table class="table table-test">
                                                                    <tr class="test-header">
                                                                        <td colspan="2" class="{{#testStateColour testInfo}}{{/testStateColour}}">
                                                                            <span class="test-expand glyphicon glyphicon-chevron-up">&nbsp;</span>
                                                                            {{#testStateIcon testInfo}}{{/testStateIcon}}
                                                                            <span class="test-title">{{testInfo.testStats.title}}</span>
                                                                        </td>
                                                                    </tr>

                                                                    {{#each testInfo.events as |event|}}
                                                                        {{#ifEventIsError event}}
                                                                            <tr class="test-row expandable-control">
                                                                                <td colspan="2" >
                                                                                    <p class="pre assert ">
                                                                                        <span style="margin: 2px; padding: 1px" class='glyphicon glyphicon-chevron-down'>&nbsp;</span>
                                                                                        Assertion: {{event.message}}
                                                                                    </p>
                                                                                </td>
                                                                            </tr>
                                                                        {{#if event.stack }}
                                                                            <tr class="test-row">
                                                                                <td colspan="2">
                                                                                   <pre class='pre stack panel'>{{event.stack}}</pre>
                                                                                </td>
                                                                            </tr>
                                                                        {{/if}}
                                                                        {{/ifEventIsError}}

                                                                        {{#ifEventIsScreenshot event}}
                                                                        <tr class="test-row screenshot">
                                                                            <td colspan="2">
                                                                                <div class="screenshotWrapper">
                                                                                    <img class="toggle screenshot screenshot-small"
                                                                                         src="{{#imageAsBase64
                                                                                                 event.value
                                                                                                 runnerStat.config.screenshotPath}}{{/imageAsBase64}}"/>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        {{/ifEventIsScreenshot}}

                                                                        {{#ifEventIsLogMessage event}}
                                                                            <tr class="test-row log">
                                                                                <td colspan="2">
                                                                                    <pre class='pre {{logClass event.value}}'>{{event.value}}</pre>
                                                                                </td>
                                                                            </tr>
                                                                        {{/ifEventIsLogMessage}}
                                                                    {{/each}}
                                                                </table>
                                                            </td>
                                                        <tr>
                                                    {{/each}}
                                                </table>
                                            </td>
                                        </tr>
                                    {{/ifSuiteHasTests}}
                                </table>
                            {{/isValidSuite}}
                        {{/each}}
                    </table>
                </td>
            </tr>
        </table>
    </table>
</div>

<script type="text/javascript">

    window.addEventListener("load", (event) => {
        /*
            Helper functions
        */
        //Next Until - jQuery
        let nextUntil = (elem, selector, filter) => {
            var siblings = [];
            elem = elem.nextElementSibling;

            while (elem) {
                if (elem.matches(selector)) break;
                if (filter && !elem.matches(filter)) {
                    elem = elem.nextElementSibling;
                    continue;
                }
                siblings.push(elem);
                elem = elem.nextElementSibling;
            }

            return siblings;
        };

        //Slide Toggle - jQuery
        let slideUp = (target, duration = 500) => {
            target.style.transitionProperty = 'height, margin, padding';
            target.style.transitionDuration = duration + 'ms';
            target.style.boxSizing = 'border-box';
            target.style.height = target.offsetHeight + 'px';
            target.offsetHeight;
            target.style.overflow = 'hidden';
            target.style.height = 0;
            target.style.paddingTop = 0;
            target.style.paddingBottom = 0;
            target.style.marginTop = 0;
            target.style.marginBottom = 0;
            window.setTimeout(() => {
                target.style.display = 'none';
                target.style.removeProperty('height');
                target.style.removeProperty('padding-top');
                target.style.removeProperty('padding-bottom');
                target.style.removeProperty('margin-top');
                target.style.removeProperty('margin-bottom');
                target.style.removeProperty('overflow');
                target.style.removeProperty('transition-duration');
                target.style.removeProperty('transition-property');
                //alert("!");
            }, duration);
        }

        let slideDown = (target, duration = 500) => {
            target.style.removeProperty('display');
            let display = window.getComputedStyle(target).display;

            if (display === 'none')
                display = 'block';

            target.style.display = display;
            let height = target.offsetHeight;
            target.style.overflow = 'hidden';
            target.style.height = 0;
            target.style.paddingTop = 0;
            target.style.paddingBottom = 0;
            target.style.marginTop = 0;
            target.style.marginBottom = 0;
            target.offsetHeight;
            target.style.boxSizing = 'border-box';
            target.style.transitionProperty = "height, margin, padding";
            target.style.transitionDuration = duration + 'ms';
            target.style.height = height + 'px';
            target.style.removeProperty('padding-top');
            target.style.removeProperty('padding-bottom');
            target.style.removeProperty('margin-top');
            target.style.removeProperty('margin-bottom');
            window.setTimeout(() => {
                target.style.removeProperty('height');
                target.style.removeProperty('overflow');
                target.style.removeProperty('transition-duration');
                target.style.removeProperty('transition-property');
            }, duration);
        }
        let slideToggle = (target, duration = 500) => {
            if (window.getComputedStyle(target).display === 'none') {
                return slideDown(target, duration);
            } else {
                return slideUp(target, duration);
            }
        }

        //Parents - jQuery
        let getParents = (el, parentSelector) => {
            if (parentSelector === undefined) {
                parentSelector = document;
            }
            var parents = [];
            var p = el.parentNode;
            while (p && p !== parentSelector) {
                var o = p;
                parents.push(o);
                p = o.parentNode;
            }
            parents.push(parentSelector);
            return parents;
        }
        let toggleVisibilityText = (selector) => {
            if (selector.innerText == 'Show') {
                selector.innerText = 'Hide';
            } else {
                selector.innerText = 'Show';
            }
        }
        /*
            DOM Manipulations
        */
        // increase/decrease size of screenshot
        document.querySelectorAll('.screenshot').forEach(elem => {
            elem.addEventListener('click', event => {
                event.currentTarget.classList.toggle('screenshot-large');
                event.currentTarget.classList.toggle('screenshot-small');
            });
        });

        //setup the suites/scenarios
        document.querySelectorAll('.suite-header').forEach(elem => {
            Array.from(elem.children).filter((child) => {
                if (!child.classList.contains('suite-unknown')) {
                    nextUntil(elem, '.suite-header').forEach(item => {
                        slideDown(item, 100);
                    });
                }
            });
        });

        //hide the suites/scenarios
        document.querySelectorAll('.suite-header').forEach(elem => {
            elem.addEventListener('click', event => {
                Array.from(event.currentTarget.children).filter(child => {
                    if (!child.classList.contains('suite-unknown')) {
                        elem.querySelector('span').classList.toggle('glyphicon-chevron-up');
                        elem.querySelector('span').classList.toggle('glyphicon-chevron-down');
                        nextUntil(elem, '.suite-header').forEach(item => {
                            slideToggle(item, 100);
                        })
                    }
                })
            })
        });

        document.querySelectorAll('.test-header').forEach(elem => {
            Array.from(elem.children).filter(child => {
                if (!child.classList.contains('test-unknown')) {
                    nextUntil(elem, '.test-header').forEach(item => {
                        slideDown(item, 100);
                    })
                }
            })
        })

        //hide the test steps
        document.querySelectorAll('.test-header').forEach(elem => {
            elem.addEventListener('click', event => {
                Array.from(elem.children).filter(child => {
                    if (!child.classList.contains('test-unknown')) {
                        elem.querySelector('.test-expand').classList.toggle('glyphicon-chevron-up');
                        elem.querySelector('.test-expand').classList.toggle('glyphicon-chevron-down');
                        nextUntil(elem, '.test-header').forEach(item => {
                            slideToggle(item, 100);
                        })
                    }
                })
            })
        });

        document.querySelector('.toggleFailingTests').addEventListener('click', event => {
            document.querySelectorAll('.suite-fail').forEach(item => {
                if (item.parentElement.querySelector('span').classList.contains('glyphicon-chevron-up')) {
                    item.parentElement.querySelector('span').classList.toggle('glyphicon-chevron-up');
                    item.parentElement.querySelector('span').classList.toggle('glyphicon-chevron-down');
                    nextUntil(item.parentElement, '.suite-header').forEach(elItem => {
                        slideUp(elItem, 100);
                    })
                }
                slideToggle(item, 100);
            });

            let showHideTxt = event.currentTarget.querySelector('span');
            toggleVisibilityText(showHideTxt) ;

            event.currentTarget.classList.toggle('filter');
            event.currentTarget.classList.toggle('filterOff');
        });

        document.querySelector('.togglePassingTests').addEventListener('click', event => {
            document.querySelectorAll('.suite-pass').forEach(item => {
                if (item.parentElement.querySelector('span').classList.contains('glyphicon-chevron-up')) {
                    item.parentElement.querySelector('span').classList.toggle('glyphicon-chevron-up');
                    item.parentElement.querySelector('span').classList.toggle('glyphicon-chevron-down');
                    nextUntil(item.parentElement, '.suite-header').forEach(elItem => {
                        slideUp(elItem, 100);
                    })
                }
                slideToggle(item, 100);
            });

            let showHideTxt = event.currentTarget.querySelector('span');
            toggleVisibilityText(showHideTxt) ;
            event.currentTarget.classList.toggle('filter');
            event.currentTarget.classList.toggle('filterOff');
        });

        let expandable = document.querySelector('.expandable-control');
        if (expandable) {
            expandable.addEventListener('click', event => {
                event.currentTarget.querySelector('span').classList.toggle('glyphicon-chevron-down');
                event.currentTarget.querySelector('span').classList.toggle('glyphicon-chevron-up');
                let panel = event.currentTarget.nextElementSibling.querySelector('.pre.stack.panel');
                slideToggle(panel, 100);
            });
        }
        if ({{#ifCollapseTests}}{{/ifCollapseTests }}) {
            document.querySelectorAll('.test-header').forEach(item => {
                item.click();
            });
        }
        if ({{#ifCollapseSuites}}{{/ifCollapseSuites }}) {
            document.querySelectorAll('.suite-header').forEach(item => {
                item.click();
            });
        }
    }, false);
</script>
</body>
</html>
