<!DOCTYPE html>
<html>
<head>
    <title>Trace: {{ filename }}</title>
    <style>
        body {
            font-family: monospace;
            margin: 40px;
        }

        h1 {
            color: #333;
        }

        .back {
            margin-bottom: 20px;
        }

        a {
            color: blue;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        .trace {
            margin-top: 20px;
        }

        .span-tree {
            min-width: 120px;
            white-space: pre;
            width: 400px;
            overflow-x: auto;
            height: 24px;
            line-height: 24px;
            vertical-align: middle;
            display: inline-block;
        }

        .span-bar {
            display: inline-block;
            height: 8px;
            background: #4a90e2;
            border-radius: 3px;
            vertical-align: middle;
        }

        .duration {
            color: #666;
            vertical-align: middle;
            display: inline-block;
            margin-left: 5px;
        }

        .resource-block {
            margin-bottom: 32px;
            padding: 16px 0 0 0;
        }

        fieldset {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 16px;
            margin-bottom: 24px;
        }

        legend {
            font-weight: bold;
            padding: 0 10px;
        }

        .span-tree-row {
            display: block; /* Change to block */
            padding: 2px 0; /* Add some padding */
            line-height: 24px; /* Consistent line height */
            height: 24px; /* Fixed height */
        }

        .span-bar-container {
            display: inline-block; /* Change to inline-block */
            vertical-align: middle; /* Ensure vertical centering */
            position: relative;
        }
    </style>
</head>
<body>
<div class="back">
    <a href="/">← Back to file list</a>
</div>

<h1>Trace: {{ filename }}</h1>

<div class="trace">
    {% if resource_groups is defined and resource_groups|length > 0 %}
    {% for resource in resource_groups %}
    <div class="resource-block">
        <fieldset style="margin-bottom: 16px;">
            <legend>Resource</legend>
            {% if resource.attrs and resource.attrs|length > 0 %}
            <ul>
                {% for attr in resource.attrs %}
                <li><b>{{ attr.key }}</b>: {{ attr.value.stringValue or attr.value.intValue or attr.value.boolValue or
                    attr.value.doubleValue or attr.value or '' }}
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <span>(none)</span>
            {% endif %}
        </fieldset>
        {% if resource.span_trees_by_trace is defined %}
            {% for trace_id, root_spans in resource.span_trees_by_trace.items() %}
            <fieldset style="margin-bottom: 24px;">
                <legend>Trace</legend>
                {% macro render_span(span) %}
                <div class="span-tree-row">
                    <span class="span-tree">
                        {%- for i in range(span.depth - 1) %}&nbsp;&nbsp;{%- endfor -%}
                        {%- if span.depth > 0 %}└─ {%- endif -%}{{ span.name }}
                    </span>
                    <span class="span-bar-container">
                        <span class="span-bar"
                              style="margin-left:{{ ((span.startTimeUnixNano|int - min_start) / (max_end - min_start + 1e-9)) * 200 }}px;width:{{ ((span.endTimeUnixNano|int - span.startTimeUnixNano|int) / (max_end - min_start + 1e-9)) * 200 }}px;"></span>
                        <span class="duration">
                            ({{ ((span.endTimeUnixNano|int - span.startTimeUnixNano|int) / 1000000)|round(2) }} ms)
                        </span>
                    </span>
                </div>
                {% if span.children %}
                {% for child in span.children %}
                {{ render_span(child) }}
                {% endfor %}
                {% endif %}
                {% endmacro %}
                {% for span in root_spans %}
                    {{ render_span(span) }}
                {% endfor %}
            </fieldset>
            {% endfor %}
        {% endif %}
    </div>
    {% endfor %}
    {% else %}
    <tr>
        <td colspan="2"><i>No span data available.</i></td>
    </tr>
    {% endif %}
</div>
</body>
</html>
