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

{% block tab_content %}

{% if not exceptions %}
    {# event-nav only #}
    <div class="flex">
        <div class="overflow-hidden">
            <div class="italic">{{ event.ingested_at|date:"j M G:i T" }} (Event {{ event.digest_order|intcomma }} of {{ issue.digested_event_count|intcomma }} total{% if q %} — {{ event_qs_count|intcomma }} found by search{% endif %})</div>
        </div>

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

    <div class="mt-6 mb-6 italic">
        {% translate "No stacktrace available for this event." %}
    </div>
{% endif %}


{% for exception in exceptions %}

    {% if exception.is_exception_stacktrace or forloop.first %}
    <div class="{% if forloop.counter0 > 0 %}mt-4{% endif %}{% if event.is_log_message %} mb-4{% endif %}">
        <div class="flex items-start flex-col-reverse lg:flex-row xl:flex-col-reverse 2xl:flex-row"> {# buttons above titles, or not? 'flips', because at 'xl:...' some space is eaten by the "Key Issue Info" box #}
            <div class="min-w-0 overflow-hidden">
                {% if forloop.counter0 == 0 %}
                <div class="italic text-ellipsis whitespace-nowrap overflow-hidden">{{ event.ingested_at|date:"j M G:i T" }} (Event {{ event.digest_order|intcomma }} of {{ issue.digested_event_count|intcomma }} total{% if q %} — {{ event_qs_count|intcomma }} found by search{% endif %})</div>
                {% endif %}
                <h1 class="text-2xl font-bold text-ellipsis whitespace-nowrap overflow-hidden">{% if exception.is_exception_stacktrace %}{{ exception.type }}{% else %}{{ event.title }}{% endif %}</h1>
            </div>

            {% if forloop.counter0 == 0 %}
            <div class="ml-auto flex flex-none place-content-end pb-4 lg:pb-0 xl:pb-4 2xl:pb-0"> {# pb-.. matches: 'buttons above titles, or not?' #}
                <div class="hidden 3xl:flex place-content-end">
                    <button class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800 active:ring-3" onclick="showAllFrames()">Show all</button>
                    <button class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800 active:ring-3" onclick="showInAppFrames()">Show in-app</button>
                    <button class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800 active:ring-3" onclick="showRaisingFrame()">Show raise</button>
                    <button class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-1 pt-1 mr-2 border-2 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800 active:ring-3" onclick="hideAllFrames()">Collapse all</button>
                </div>

                <div class="3xl:hidden relative">
                    <details class="relative">
                        <summary class="list-none cursor-pointer font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-2 pt-2 mr-2 border-2 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800 active:ring-3">
                            Show
                            <svg xmlns="http://www.w3.org/2000/svg" fill="full" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 inline">
                                <path d="M6.5,8.5l6,7l6-7H6.5z"/>
                            </svg>
                        </summary>

                        <div class="absolute right-2 z-10 mt-1 min-w-40 bg-white dark:bg-slate-800 border-2 border-slate-300 dark:border-slate-600 rounded-md shadow-lg">
                            <button class="block w-full text-left font-bold text-slate-500 dark:text-slate-300 pl-4 pr-4 pb-2 pt-2 hover:bg-slate-200 dark:hover:bg-slate-700" onclick="showAllFrames(); this.parentNode.parentNode.open = false;">Show all</button>
                            <button class="block w-full text-left font-bold text-slate-500 dark:text-slate-300 pl-4 pr-4 pb-2 pt-2 hover:bg-slate-200 dark:hover:bg-slate-700" onclick="showInAppFrames(); this.parentNode.parentNode.open = false;">Show in-app</button>
                            <button class="block w-full text-left font-bold text-slate-500 dark:text-slate-300 pl-4 pr-4 pb-2 pt-2 hover:bg-slate-200 dark:hover:bg-slate-700" onclick="showRaisingFrame(); this.parentNode.parentNode.open = false;">Show raise</button>
                            <button class="block w-full text-left font-bold text-slate-500 dark:text-slate-300 pl-4 pr-4 pb-2 pt-2 hover:bg-slate-200 dark:hover:bg-slate-700" onclick="hideAllFrames(); this.parentNode.parentNode.open = false;">Collapse all</button>
                        </div>
                    </details>
                </div>

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

        {% if exception.is_exception_stacktrace %}
        <div class="text-lg mb-4 text-ellipsis whitespace-nowrap overflow-hidden">{{ exception.value }}</div>
        {% endif %}
    </div>
    {% endif %}

    {% if not exception.is_exception_stacktrace and multiple_thread_stacktraces %}
    <div class="{% if not forloop.first %}mt-6{% endif %} mb-4">
        <h2 class="text-xl font-bold">{{ exception.thread_title }}</h2>
        {% if exception.thread_description %}
        <div class="text-slate-600 dark:text-slate-300">{{ exception.thread_description }}</div>
        {% endif %}
    </div>
    {% endif %}

    {% if not exception.is_exception_stacktrace and not exception.stacktrace.frames %}
    <div class="mb-4 italic">No stacktrace found.</div>
    {% endif %}

    {% include "issues/_stacktrace_frames.html" %}
    {# </div> #} {# per-exception div in the multi-exception case #}

    {% if exception.is_exception_stacktrace and not forloop.last %}
        {% if not stack_of_plates %}
            <div class="italic pt-4">During handling of the above exception another exception occurred or was intentionally reraised:</div>
            {# note: the above is specific to Python. We cannot distinguish between Python's 2 types of chained exceptions because the info is not sent by the client #}
            {# we could try to infer this from the stacktrace, but parsing potentially arbitrarily formatted partial code is brittle #}
        {% else %}
            <div class="italic pt-4">The above exception was caused by or intentially reraised during the handling of the following exception:</div>
        {% endif %}
    {% endif %}

{% endfor %} {# for exception in exceptions #}

{% if thread_stacktraces %}
    <h2 class="text-2xl font-bold mt-8 mb-4">Threads</h2>

    {% for exception in thread_stacktraces %}
        <div class="{% if not forloop.first %}mt-6{% endif %} mb-4">
            <h3 class="text-xl font-bold">{{ exception.thread_title }}</h3>
            {% if exception.thread_description %}
            <div class="text-slate-600 dark:text-slate-300">{{ exception.thread_description }}</div>
            {% endif %}
        </div>

        {% if not exception.stacktrace.frames %}
        <div class="mb-4 italic">No stacktrace found.</div>
        {% endif %}

        {% include "issues/_stacktrace_frames.html" with is_thread_section=True %}
    {% endfor %}
{% endif %}

{% endblock %}

{% block extra_js %}
    <script src="{% static 'js/issue_stacktrace.js' %}"></script>
{% endblock %}