{% extends "issues/base.html" %}
{% load static %}
{% load stricter_templates %}

{% block tab_content %}

{# this is here to fool tailwind (because we're foolish enough to put html in python) <span class="text-xs"></span> #}
<div class="flex">
    <div class="overflow-hidden">
        <div class="italic">{{ event.server_side_timestamp|date:"j M G:i T" }} (Event {{ event.ingest_order }} of {{ issue.event_count }})</div>
    </div>

    <div class="ml-auto flex-none">
        <div class="flex place-content-end">
            {% include "issues/_event_nav.html" %}
        </div>
    </div>
</div>


{# NOTE if we store event.grouper on the event, we could also show that here #}

<h1 class="text-2xl font-bold mt-4"><a name="key-info">Key info</a></h1>

<div class="mb-6">
    {% for key, value in key_info %}
        <div class="flex {% if forloop.first %}border-slate-300 border-t-2{% endif %}">
            <div class="w-1/4 {% if not forloop.last %}border-b-2 border-dotted border-slate-300{% endif %}">{{ key }}</div>
            <div class="w-3/4 {% if not forloop.last %} border-b-2 border-dotted border-slate-300{% endif %} font-mono">{{ value }}</div>
        </div>
    {% endfor %}
</div>


{% if deployment_info %}
    <h1 class="text-2xl font-bold mt-4"><a name="deployment">Deployment</a></h1>
            
    <div class="mb-6">
        {% for key, value in deployment_info %}
            <div class="flex {% if forloop.first %}border-slate-300 border-t-2{% endif %}">
                <div class="w-1/4 {% if not forloop.last %}border-b-2 border-dotted border-slate-300{% endif %}">{{ key }}</div>
                <div class="w-3/4 {% if not forloop.last %} border-b-2 border-dotted border-slate-300{% endif %} font-mono">{{ value }}</div>
            </div>
        {% endfor %}
    </div>
{% endif %}

{% if parsed_data.tags %}
    <h1 class="text-2xl font-bold mt-4"><a name="tags">Tags</a></h1>
            
    <div class="mb-6">
        {% for key, value in parsed_data.tags|items %}
            <div class="flex {% if forloop.first %}border-slate-300 border-t-2{% endif %}">
                <div class="w-1/4 {% if not forloop.last %}border-b-2 border-dotted border-slate-300{% endif %}">{{ key }}</div>
                <div class="w-3/4 {% if not forloop.last %} border-b-2 border-dotted border-slate-300{% endif %} font-mono">{{ value }}</div>
            </div>
        {% endfor %}
    </div>
{% endif %}

{% if parsed_data.user %}
    <h1 class="text-2xl font-bold mt-4"><a name="user">User</a></h1>
            
    <div class="mb-6">
        {% for key, value in parsed_data.user|items %}
            <div class="flex {% if forloop.first %}border-slate-300 border-t-2{% endif %}">
                <div class="w-1/4 {% if not forloop.last %}border-b-2 border-dotted border-slate-300{% endif %}">{{ key }}</div>
                <div class="w-3/4 {% if not forloop.last %} border-b-2 border-dotted border-slate-300{% endif %} font-mono">{{ value }}</div>
            </div>
        {% endfor %}
    </div>
{% endif %}

{% if parsed_data.request %}

    <h1 class="text-2xl font-bold mt-4"><a name="request">Request</a></h1>
    <div class="mb-6">
            
    <div>
        {% for key, value in parsed_data.request|items %}
            {% if key != "headers" and key != "env" %}{# we deal with these below #}
                <div class="flex {% if forloop.first %}border-slate-300 border-t-2{% endif %}">
                    <div class="w-1/4 {% if not forloop.last %}border-b-2 border-dotted border-slate-300{% endif %}">{{ key }}</div>
                    <div class="w-3/4 {% if not forloop.last %} border-b-2 border-dotted border-slate-300{% endif %} font-mono">{{ value }}</div>{# forloop.last doesn't work given the if-statement; we can fix that by pre-processing in the view #}
                </div>
            {% endif %}
        {% endfor %}
    </div>

    {% if parsed_data.request.headers %}
    <h3 class="font-bold mt-2">REQUEST HEADERS</h3>
    <div>
    {# TODO the user's browser and OS can be deduced from the request headers. Perhaps that info should go near the headers #}

    {% for key, value in parsed_data.request.headers.items %}
    <div class="flex {% if forloop.first %}border-slate-300 border-t-2{% endif %} border-dotted">
        <div class="w-1/4 {% if not forloop.last %}border-b-2 border-dotted border-slate-300{% endif %}">{{ key }}</div>
        <div class="w-3/4 {% if not forloop.last %} border-b-2 border-dotted border-slate-300{% endif %} font-mono">{{ value }}</div>
    </div>
    {% endfor %}

    </div>
    {% endif %} {# end if parsed_data.request.headers #}

    {% if parsed_data.request.env %}
    <h3 class="font-bold mt-2">REQUEST ENV</h3>
    <div>

    {% for key, value in parsed_data.request.env.items %}
    <div class="flex {% if forloop.first %}border-slate-300 border-t-2{% endif %} border-dotted">
        <div class="w-1/4 {% if not forloop.last %}border-b-2 border-dotted border-slate-300{% endif %}">{{ key }}</div>
        <div class="w-3/4 {% if not forloop.last %} border-b-2 border-dotted border-slate-300{% endif %} font-mono">{{ value }}</div>
    </div>
    {% endfor %}

    </div>
    {% endif %} {# end if parsed_data.request.env #}
    </div>


{% endif %}


{% if parsed_data.contexts.runtime %}
    {# sentry gives this prime location (even a picture)... but why... it's kinda obvious what you're working in right? Maybe I could put it at the top of the modules list instead. And check if there's any other relevant info in that runtime context (RTFM) #}
    <h1 class="text-2xl font-bold mt-4"><a name="runtime">Runtime</a></h1>
            
    <div class="mb-6">
        {% for key, value in parsed_data.contexts.runtime|items %}
            <div class="flex {% if forloop.first %}border-slate-300 border-t-2{% endif %}">
                <div class="w-1/4 {% if not forloop.last %}border-b-2 border-dotted border-slate-300{% endif %}">{{ key }}</div>
                <div class="w-3/4 {% if not forloop.last %} border-b-2 border-dotted border-slate-300{% endif %} font-mono">{{ value }}</div>
            </div>
        {% endfor %}
    </div>
{% endif %}

{% if parsed_data.modules %}
    <h1 class="text-2xl font-bold mt-4"><a name="modules">Modules</a></h1>
            
    <div class="mb-6">
        {# we have observed that (emperically) the keys in most of the above are sorted in some kind of meaningful way from important to non-important #}
        {# however, for modules I'd rather just have an alphabetical list. #}
        {% for key, value in parsed_data.modules|sorted_items %}
            <div class="flex {% if forloop.first %}border-slate-300 border-t-2{% endif %}">
                <div class="w-1/4 {% if not forloop.last %}border-b-2 border-dotted border-slate-300{% endif %}">{{ key }}</div>
                <div class="w-3/4 {% if not forloop.last %} border-b-2 border-dotted border-slate-300{% endif %} font-mono">{{ value }}</div>
            </div>
        {% endfor %}
    </div>
{% endif %}

{% if parsed_data.sdk %}
    <h1 class="text-2xl font-bold mt-4"><a name="sdk">SDK</a></h1>
            
    <div class="mb-6">
        {% for key, value in parsed_data.sdk|items %}
            <div class="flex {% if forloop.first %}border-slate-300 border-t-2{% endif %}">
                <div class="w-1/4 {% if not forloop.last %}border-b-2 border-dotted border-slate-300{% endif %}">{{ key }}</div>
                <div class="w-3/4 {% if not forloop.last %} border-b-2 border-dotted border-slate-300{% endif %} font-mono">{{ value }}</div> {# the actual value may be a dict/list, but we'll just print it as a string; this is plenty of space for something as (hopefully) irrelevant as the SDK #}
            </div>
        {% endfor %}
    </div>
{% endif %}

{% if parsed_data.extra %}
    <h1 class="text-2xl font-bold mt-4"><a name="extra">Extra</a></h1>
            
    <div class="mb-6">
        {% for key, value in parsed_data.extra|items %}
            <div class="flex {% if forloop.first %}border-slate-300 border-t-2{% endif %}">
                <div class="w-1/4 {% if not forloop.last %}border-b-2 border-dotted border-slate-300{% endif %}">{{ key }}</div>
                <div class="w-3/4 {% if not forloop.last %} border-b-2 border-dotted border-slate-300{% endif %} font-mono">{{ value }}</div> {# the actual value may be a dict/list, but we'll just print it as a string; this is plenty of space for something as (hopefully) irrelevant #}
            </div>
        {% endfor %}
    </div>
{% endif %}

{% comment %}
{# I don't believe much in this whole business of tracing, so I'm not going to display the associated data either #}
{% if parsed_data.contexts.trace %}
    <h1 class="text-2xl font-bold mt-4"><a name="trace">Trace</a></h1>
            
    <div class="mb-6">
        {% for key, value in parsed_data.contexts.trace|items %}
            <div class="flex {% if forloop.first %}border-slate-300 border-t-2{% endif %}">
                <div class="w-1/4 {% if not forloop.last %}border-b-2 border-dotted border-slate-300{% endif %}">{{ key }}</div>
                <div class="w-3/4 {% if not forloop.last %} border-b-2 border-dotted border-slate-300{% endif %} font-mono">{{ value }}</div>
            </div>
        {% endfor %}
    </div>
{% endif %}
{% endcomment %}


{% endblock %}
