{% extends "layout.html" %}
{% block nav %}
    <nav class="navbar navbar-expand-sm sticky-top navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Scenario HTML Test Report</a>

            <div class="collapse navbar-collapse">
              <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                  <a class="nav-link" href="../../flat.html" title="go to Flat report">Flat</a>
                </li>
                <li class="nav-item active">
                  <a class="nav-link" href="../../index.html" title="go to Index report">Index</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="../../{{ feature['name'] }}.html" title="go to feature report">Feature</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="various log files">
                        Logs
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      {% for log_file in scenario['logs'] %}
                      <a class="dropdown-item" href="{{ log_file['filepath'] }}">{{ log_file['name'] }}</a>
                      {% endfor %}
                    </div>
                </li>
                <li class="nav-item active">
                    <button class="btn btn-md btn-light" title="show images" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls=".multi-collapse">🖼</button>
                </li>
                <li class="nav-item active">
                    <button class="btn btn-md btn-light" title="scroll to top" onclick="window.scrollTo({ top: 0, behavior: 'smooth' });" class="nav-link">⬆️</button>
                </li>
                <li class="nav-item active">
                    <button class="btn btn-md btn-light" title="scroll to bottom" onclick="window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });" class="nav-link">⬇️ </button>
                </li>
                <li class="align-middle">
                    <div style="padding: 8px">Started {{ scenario["started_at"] }} for {{ scenario['duration'] }}</div>
                </li>
              </ul>
            </div>
        </div>
    </nav>
{% endblock %}
{% block content %}
    <style>
    .anchor {
      display: inline;
      margin: 0;
      padding: 0;
      font-size: 8px;
      font-style: bold;
      text-decoration: none;
      visibility: hidden;
    }

    .anchor-toggle:hover > .anchor {
      display: inline;
      visibility: visible;
    }
    </style>
    <table class="table table-borderless container row">

        <tr class="row">
            <td style="min-width: 0;" class="col-10 text-truncate">
                <span style="display: inline; color: maroon;">Feature: </span><span title="{{ escape(feature['name']) }}">{{ escape(feature['name']) }}</span><br/>
                {% if feature['tags'] %}
                <span style="display: inline; color: darkslateblue">{{ feature['tags'] }}</span><br/>
                {% endif %}
                <span style="display: inline; color: maroon;">Scenario:</span> <span title="{{ escape(scenario['name']) }}">{{ escape(scenario['name']) }}</span><br/>
                <span style="display: inline; color: darkslateblue">{{ scenario['tags'] }}</span>
                {% if scenario['sub_headers'] %}
                <br/>
                {{ scenario['sub_headers'] }}
                {% endif %}
            </td>
            <td style="text-align: right; margin-top: auto;" class="col-2">
                <pre style="display: inline; color: gray;">Start Time and Duration (s)</pre>
            </td>
        </tr>
        {% for step in steps %}
            {% set step_name = step['keyword'] + ' ' + escape(step['name']) %}
            {% if step['substep'] %}
                {% set step_prefix = "     ⤷" %}
            {% else %}
                {% set step_prefix = "" %}
            {% endif %}
            {% if step['result'] is defined %}
                {% set step_status = step['result']['status'] %}
                {% if step['result']['status'] == 'skipped' %}
                    {% set step_status = 'untested' %}
                {% endif %}
                {% if step['result']['status'] in ('failed', 'passed') and step["result"]["timestamp"] %}
                    {% set step_timing = "{} for {:.3f}s".format(step["result"]["timestamp"].strftime("%H:%M:%S"), step["result"]["duration"]) %}
                    {% set step_start = step["result"]["timestamp"] %}
                {% endif %}
            {% else %}
                {% set step_status = 'untested' %}
                {% set step_timing = "" %}
                {% set step_start = "" %}
            {% endif %}
            {% set step_keyword = step_prefix + step['keyword'].rjust(6, ' ') %}

            {% if step['heading_level'] %}
            <tr class="row">
                <td style="min-width: 0;" class="anchor-toggle text-truncate col-12" colspan="2" data-toggle="collapse" href="#collapsable-row-{{ loop.index }}" role="button" aria-expanded="false" aria-controls="collapsable-row-{{ loop.index }}">
                    <a class="anchor" id="step_{{ loop.index}}" href="#step_{{ loop.index }}">🔗</a>
                    <{{ step['heading_level'] }} style="display: contents;" title="{{ escape(step['name']) }}"> {{ escape(step['name']) }}</{{ step['heading_level'] }}>
                </td>
            </tr>

            {% else %}
            <tr class="row">
                <td style="min-width: 0;" class="anchor-toggle text-truncate col-10" data-toggle="collapse" href="#collapsable-row-{{ loop.index }}" role="button" aria-expanded="false" aria-controls="collapsable-row-{{ loop.index }}">
                    <a class="anchor" id="step_{{ loop.index}}" href="#step_{{ loop.index }}">🔗</a>
                    <pre class="status-{{ step_status }}">{{ step_keyword }}</pre><span style="display: contents;" title="{{ escape(step['name']) }}"> {{ escape(step['name']) }}</span>
                </td>
                <td style="min-width: 0; text-align: right;" class="col-2"><pre style="display: inline; color: gray;" title="{{ step_start }}">{{ step_timing }}</pre></td>
            </tr>
            {% endif %}

            {% if step['text'] or step['table'] %}
                <tr class="row"><td style="min-width: 0;" class="col-12" colspan="2">
                {% if step['text'] %}
                        <pre style="margin: 0;">{{ escape(step['text']) }}</pre>
                {% endif %}
                {% if step['table'] %}
                        <pre style="margin: 0;">{{ escape(step['table']) }}</pre>
                {% endif %}
                </td></tr>
            {% endif %}

            {% if step['result'] is defined %}
                <tr class="row"><td style="min-width: 0;" class="col-12 collapse multi-collapse" id="collapsable-row-{{ loop.index }}" colspan="2">

                {% if step['result']['stdout'] %}
                    <p>stdout ({{ step['result']['stdout']|length }} lines)</p>
                    <pre style="color: darkgray; margin: 0;">{{ escape("\n".join(step['result']['stdout'])) }}</pre>
                {% endif %}
                {% if step['result']['stderr'] %}
                    <p>stderr ({{ step['result']['stderr']|length }} lines)</p>
                    <pre style="color: darkgray; margin: 0;">{{ escape("\n".join(step['result']['stderr'])) }}</pre>
                {% endif %}
                {% if step['images'] %}
                    <p>images ({{ step['images']|length }} images)</p>
                    {% for image in step['images'] %}
                        <img class="mx-auto d-block img-fluid shadow bg-white rounded" style="margin-bottom:15px" alt='{{ image["label"] }}' title='{{ image["label"] }}' src='{{ image["src"] }}'></img>
                    {% endfor %}
                {% endif %}
                {% if step['result']['error_message'] %}
                    <p>error message ({{ step['result']['error_message']|length }} lines)</p>
                    <pre style="color: gray; margin: 0">{{ escape("\n".join(step['result']['error_message'])) }}</pre>
                {% endif %}
                {% if step['result']['browser_logs'] %}
                    <p>browser logs ({{ step['result']['browser_logs']|length }} lines)</p>
                    <pre style="color: gray; margin: 0;">{{ escape("\n".join(step['result']['browser_logs'])) }}</pre>
                {% endif %}
                {% if step['result']['debug_output'] %}
                    <p>debug output ({{ step['result']['debug_output']|length }} lines)</p>
                    <pre style="color: gray; margin: 0;">{{ escape("\n".join(step['result']['debug_output'])) }}</pre>
                {% endif %}

                </td></tr>
            {% endif %}

        {% endfor %}
    </table>
    <script>
        const urlParams = new URLSearchParams(window.location.search)
        var expandables = [];
        var expandable_ids = urlParams.get('expand');
        if (expandable_ids === 'all') {
            expand = $('.collapse');
        } else if (expandable_ids) {
            var ids = expandable_ids.split(',');
            for (var index = 0; index < ids.length; index++) {
                expandables.push(document.getElementById(ids[index]));
            }
        }
        for (var index=0; index < expandables.length; index++) {
            $(expandables[index]).removeClass('hide')
            $(expandables[index]).addClass('show')
        }

        // necessary to make sure we jump to the anchored step as the page loads
        // and then we take the URL parameter and figure out which rows to
        // expand and only then would it make sense to adjust for any anchors
        // mentioned in the URL
        $('document').ready(function() {
            MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
            var observer = new MutationObserver(function(mutations, observer) {
                const params = new URLSearchParams(window.location.search)

                // update any open/closed rows
                var expanded = $('.collapse.show');
                var expanded_ids = [];
                for (var index=0; index < expanded.length; index++) {
                    expanded_ids.push(expanded[index].getAttribute('id'))
                }
                params.set('expand', expanded_ids.join(','));

                var url = window.location.pathname + '?' + params.toString() + window.location.hash;
                history.pushState(null, "", url);
            });
            observer.observe(document, {
              subtree: true,
              attributes: true
            });
        });
    </script>
{% endblock %}