{% 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">Start at {{ scenario["start_at"] }} for {{ '{:.1f}'.format(scenario['duration'] | float) }}s</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['is_substep'] %}
                {% set step_prefix = "     ⤷" %}
            {% else %}
                {% set step_prefix = "" %}
            {% endif %}
            {% if step is defined %}
                {% set step_status = step['status'] %}
                {% if step['status'] == 'skipped' %}
                    {% set step_status = 'untested' %}
                {% endif %}
                {% if step['status'] in ('failed', 'passed') and step["timestamp"] %}
                    {% set step_timing = "{} for {:.3f}s".format(step["timestamp"].strftime("%H:%M:%S"), step["duration"]) %}
                    {% set step_start = step["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_at'] }}">{{ step_timing }}</pre></td>
            </tr>
            {% endif %}

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

            {% if step 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['stdout'] %}
                <details open>
                    <summary style="color: dimgray;">stdout ({{ step['stdout']|length }} lines)</summary>
                    <pre style="color: darkgray;">{{ escape("\n".join(step['stdout'])) }}</pre>
                </details>
                {% endif %}
                {% if step['stderr'] %}
                <details open>
                    <summary style="color: dimgray;">stderr ({{ step['stderr']|length }} lines)</summary>
                    <pre style="color: darkgray;">{{ escape("\n".join(step['stderr'])) }}</pre>
                </details>
                {% endif %}
                {% if step['screenshots'] %}
                <details open>
                    <summary style="color: dimgray;">images ({{ step['screenshots']|length }} images)</summary>
                    <div style="margin: 10px 0 0 0;">
                        {% for image in step['screenshots'] %}
                            <img class="mx-auto d-block img-fluid shadow bg-white rounded" id="{{ image['html_id'] }}" style="margin-bottom:15px" alt="{{ escape(image['label']) }}" title="{{ escape(image['label']) }}" src="{{ image['html_src'] }}"></img>
                            {% if image['highlight'] %}
                            <div class="step-image-highlight" id="{{ image['html_id']}}-highlight" height-ratio="{{ image['highlight']['height_ratio'] }}" width-ratio="{{ image['highlight']['width_ratio'] }}" top-ratio="{{ image['highlight']['top_ratio'] }}" left-ratio="{{ image['highlight']['left_ratio'] }}"></div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </details>
                {% endif %}
                {% if step['error_message'] %}
                <details open>
                    <summary style="color: dimgray;">error message ({{ step['error_message']|length }} lines)</summary>
                    <pre style="color: darkgray;">{% for entry in step['error_message'] %}{{ entry }}<br/>{% endfor %}</pre>
                </details>
                {% endif %}
                {% if step['browser_logs'] %}
                <details open>
                    <summary style="color: dimgray;">browser logs ({{ step['browser_logs']|length }} entries)</summary>
                    <pre style="color: darkgray;">{% for entry in step['browser_logs'] %}{{ browser_timestamp_to_datetime(entry['timestamp']) }} {{ entry['level'] }} {{ entry['source']}}: {{ entry['message'] }}<br/>{% endfor %}</pre>
                </details>
                {% endif %}
                {% if step['debug_output'] %}
                <details open>
                    <summary style="color: dimgray;">debug output ({{ step['debug_output']|length }} lines)</summary>
                    <pre style="color: darkgray;">{{ escape("\n".join(step['debug_output'])) }}</pre>
                </details>
                {% 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>
    <script src="../../external/manage_scenario_highlights.js"></script>
{% endblock %}