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

{% block title %}{{ issue.title }} · {{ block.super }}{% endblock %}

{% block content %}

{% for warning in issue.project.get_warnings %}
<div class="flex p-4 bg-yellow-100 dark:bg-amber-800 border-b-2 border-yellow-200 dark:border-amber-900">
    <div class="text-slate-800 dark:text-slate-100">
        {{ warning }}
    </div>
</div>
{% endfor %}

<div class="m-4 flex flex-col lg:flex-row-reverse"><!-- container for the white bit (issue title, buttons) at the top of the page -->

    <div class="ml-auto flex-none pb-4 lg:pb-0"><!-- top, RHS (buttons) -->
        <form action="." method="post">
        {% csrf_token %}
        {% if issue.is_resolved %}{# i.e. buttons disabled #}
            <button class="font-bold text-slate-800 dark:text-slate-100 border-slate-500 dark:border-slate-400 pl-4 pr-4 pb-2 pt-2 ml-1 border-2 bg-cyan-200 dark:bg-cyan-700 hover:bg-cyan-400 dark:hover:bg-cyan-600 active:ring-3 rounded-md" name="action" value="reopen">{% translate "Reopen" %}</button>

        {% else %}{# not resolved, i.e. buttons enabled #}
            {% spaceless %}{# needed to avoid whitespace between the looks-like-one-buttons #}

            {% if issue.project.has_releases %}
                <button class="font-bold text-slate-800 dark:text-slate-100 border-slate-500 dark:border-slate-400 pl-4 pr-4 pb-2 pt-2 ml-1 border-2 bg-cyan-200 dark:bg-cyan-700 hover:bg-cyan-400 dark:hover:bg-cyan-600 active:ring-3 rounded-s-md" name="action" value="resolve">{% translate "Resolve" %}</button>

                <div class="dropdown">
                    <button disabled {# disabled b/c clicking the dropdown does nothing - we have hover for that #} class="font-bold text-slate-800 dark:text-slate-100 fill-slate-800 dark:fill-slate-100 border-slate-500 dark:border-slate-400 pl-4 pr-4 pb-2 pt-2 border-r-2 border-t-2 border-b-2 hover:bg-slate-200 dark:hover:bg-slate-800 active:ring-3 rounded-e-md"><svg xmlns="http://www.w3.org/2000/svg" fill="full" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 inline"><path d="M6.5,8.5l6,7l6-7H6.5z"/></svg></button>

                    {# note that we can depend on get_latest_release being available, because we're in the 'project.has_releases' branch #}
                    <div class="dropdown-content-right flex-col pl-2">
                        <button name="action" value="resolved_next" class="block self-stretch font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-2 pt-2 border-l-2 border-r-2 border-b-2 bg-white dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 active:ring-3 text-left whitespace-nowrap">{% translate "Resolved in next release" %}</button>
                        <button name="action" value="resolved_release:{{ issue.project.get_latest_release.version }}" class="block self-stretch font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-2 pt-2 border-l-2 border-r-2 border-b-2 bg-white dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 active:ring-3 text-left whitespace-nowrap">Resolved in latest ({{ issue.project.get_latest_release.get_short_version }})</button>

                    </div>
                </div>


            {% else %}
                <button class="font-bold text-slate-800 dark:text-slate-100 border-slate-500 dark:border-slate-400 pl-4 pr-4 pb-2 pt-2 ml-1 border-2 bg-cyan-200 dark:bg-cyan-700 hover:bg-cyan-400 dark:hover:bg-cyan-600 active:ring-3 rounded-md" name="action" value="resolve">{% translate "Resolve" %}</button>
            {% endif %}

            {% endspaceless %}
        {% endif %}{# end of the resolved/not-resolved branch; (which implies disabled/enabled) #}

        {% spaceless %}{# needed to avoid whitespace between the looks-like-one-buttons #}
        {% if not issue.is_muted and not issue.is_resolved %}
            <button class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-2 pt-2 ml-1 border-2 hover:bg-slate-200 dark:hover:bg-slate-800 active:ring-3 rounded-s-md" name="action" value="mute">{% translate "Mute" %}</button>
        {% else %}
            <button disabled class="font-bold text-slate-300 dark:text-slate-600 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-2 pt-2 ml-1 border-2 rounded-s-md" name="action" value="mute">{% translate "Mute" %}</button>
        {% endif %}

        <div class="dropdown">
            {% if not issue.is_muted and not issue.is_resolved %}
                <button disabled {# disabled b/c clicking the dropdown does nothing - we have hover for that #} class="font-bold text-slate-500 dark:text-slate-300 fill-slate-500 dark:fill-slate-500 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-2 pt-2 border-r-2 border-b-2 border-t-2 hover:bg-slate-200 dark:hover:bg-slate-800 active:ring-3">{% translate "Mute for/until&nbsp;&nbsp;" %}<svg xmlns="http://www.w3.org/2000/svg" fill="full" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 inline"><path d="M6.5,8.5l6,7l6-7H6.5z"/></svg></button>

                <div class="dropdown-content-right flex-col">
                    {% for mute_option in mute_options %}
                        <button name="action" value="mute_{{ mute_option.for_or_until }}:{{ mute_option.period_name }},{{ mute_option.nr_of_periods }},{{ mute_option.gte_threshold }}" class="block self-stretch font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-2 pt-2 border-l-2 border-r-2 border-b-2 bg-white dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 active:ring-3 text-left whitespace-nowrap">{% if mute_option.for_or_until == "for" %}{{ mute_option.nr_of_periods }} {{ mute_option.period_name }}{% if mute_option.nr_of_periods != 1 %}s{% endif %}{% else %}{{ mute_option.gte_threshold }} events per {% if mute_option.nr_of_periods != 1%} {{ mute_option.nr_of_periods }} {{ mute_option.period_name }}s{% else %} {{ mute_option.period_name }}{% endif %}{% endif %}</button>
                    {% endfor %}
                </div>
            {% else %}
                <button disabled class="font-bold text-slate-300 dark:text-slate-600 fill-slate-300 dark:fill-slate-600 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-2 pt-2 border-r-2 border-b-2 border-t-2">{% translate "Mute for/until&nbsp;&nbsp;" %}<svg xmlns="http://www.w3.org/2000/svg" fill="full" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 inline"><path d="M6.5,8.5l6,7l6-7H6.5z"/></svg></button>
                {# note that when the issue is muted, no further muting is allowed. this is a design decision, I figured this is the easiest-to-understand UI, #}
                {# both at the point-of-clicking and when displaying the when-will-this-be-unmuted in some place #}
                {# (the alternative would be to allow multiple simulteneous reasons for unmuting to exist next to each other #}
                {# we just hide the whole dropdown; this is the easiest implementation of not-showing the dropdown when the issue is already muted #}
            {% endif %}
        </div>

        {% if issue.is_muted and not issue.is_resolved %}
            <button class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-2 pt-2 border-r-2 border-b-2 border-t-2 hover:bg-slate-200 dark:hover:bg-slate-800 active:ring-3 rounded-e-md" name="action" value="unmute">{% translate "Unmute" %}</button>
        {% else %}
            <button disabled class="font-bold text-slate-300 dark:text-slate-600 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-2 pt-2 border-r-2 border-b-2 border-t-2 rounded-e-md" name="action" value="unmute">{% translate "Unmute" %}</button>
        {% endif %}

        {% endspaceless %}

        </form>
    </div> {# top, RHS (buttons) #}

    <div class="overflow-hidden"><!-- top, LHS (various texts) -->
        <h1 class="text-4xl font-bold text-ellipsis whitespace-nowrap overflow-hidden pb-1 {# needed for descenders of 'g' #}">{{ issue.calculated_type }}</h1>
        <div class="text-xl text-ellipsis whitespace-nowrap overflow-hidden">{{ issue.calculated_value }}</div>
        {% if request_repr %}<div class="italic mt-4">{{ request_repr }}</div>{% endif %}
        <div class="text-ellipsis whitespace-nowrap overflow-hidden"><span class="font-bold">{% if issue.last_frame_module %}{{ issue.last_frame_module}}{% else %}{{ issue.last_frame_filename }}{% endif %}</span>{% if issue.last_frame_function %} in <span class="font-bold">{{ issue.last_frame_function }}</span>{% endif %}</div>
    </div> {# top, LHS (various texts) #}

</div>

<div class="flex items-start"><!-- flex container for the 2 'windows' in this page' -->

    {# overflow-x-auto is needed at the level of the flex item such that it works at the level where we need it (the code listings)#}
    <div class="ml-4 mb-4 mr-4 border-2 overflow-x-auto flex-[2_1_96rem]"><!-- the whole of the big tabbed view--> {# 96rem is 1536px, which matches the 2xl class; this is no "must" but eyeballing revealed: good result #}
        <div class="flex bg-slate-50 dark:bg-slate-800 border-b-2"><!-- container for the actual tab buttons -->
            <a href="{{ script_prefix }}/issues/issue/{{ issue.id }}/event/{% if event %}{{ event.id }}{% else %}last{% endif %}/{% current_qs %}"><div class="p-4 font-bold hover:bg-slate-200 dark:hover:bg-slate-800 {% if tab == "stacktrace" %}text-cyan-500 dark:text-cyan-300 border-cyan-500 border-b-4{% else %}text-slate-500 border-slate-400 hover:border-b-4{% endif %}">{% translate "Stacktrace" %}</div></a>
            <a href="{{ script_prefix }}/issues/issue/{{ issue.id }}/event/{% if event %}{{ event.id }}{% else %}last{% endif %}/details/{% current_qs %}"><div class="p-4 font-bold hover:bg-slate-200 dark:hover:bg-slate-800 {% if tab == "event-details" %}text-cyan-500 dark:text-cyan-300 border-cyan-500 border-b-4{% else %}text-slate-500 border-slate-400 hover:border-b-4{% endif %}">{% translate "Event&nbsp;Details" %}</div></a>
            <a href="{{ script_prefix }}/issues/issue/{{ issue.id }}/event/{% if event %}{{ event.id }}{% else %}last{% endif %}/breadcrumbs/{% current_qs %}"><div class="p-4 font-bold hover:bg-slate-200 dark:hover:bg-slate-800 {% if tab == "breadcrumbs" %}text-cyan-500 dark:text-cyan-300 border-cyan-500 border-b-4{% else %}text-slate-500 border-slate-400 hover:border-b-4{% endif %}">{% translate "Breadcrumbs" %}</div></a>
            <a href="{{ script_prefix }}/issues/issue/{{ issue.id }}/events/{% current_qs %}"><div class="p-4 font-bold hover:bg-slate-200 dark:hover:bg-slate-800 {% if tab == "event-list" %}text-cyan-500 dark:text-cyan-300 border-cyan-500 border-b-4{% else %}text-slate-500 border-slate-400 hover:border-b-4{% endif %}">{% translate "Event&nbsp;List" %}</div></a>
            <a href="{{ script_prefix }}/issues/issue/{{ issue.id }}/tags/{% current_qs %}"><div class="p-4 font-bold hover:bg-slate-200 dark:hover:bg-slate-800 {% if tab == "tags" %}text-cyan-500 dark:text-cyan-300 border-cyan-500 border-b-4{% else %}text-slate-500 border-slate-400 hover:border-b-4{% endif %}">{% translate "Tags" %}</div></a>
            <a href="{{ script_prefix }}/issues/issue/{{ issue.id }}/grouping/{% current_qs %}"><div class="p-4 font-bold hover:bg-slate-200 dark:hover:bg-slate-800 {% if tab == "grouping" %}text-cyan-500 dark:text-cyan-300 border-cyan-500 border-b-4{% else %}text-slate-500 border-slate-400 hover:border-b-4{% endif %}">{% translate "Grouping" %}</div></a>
            <a href="{{ script_prefix }}/issues/issue/{{ issue.id }}/history/{% current_qs %}"><div class="p-4 font-bold hover:bg-slate-200 dark:hover:bg-slate-800 {% if tab == "history" %}text-cyan-500 dark:text-cyan-300 border-cyan-500 border-b-4{% else %}text-slate-500 border-slate-400 hover:border-b-4{% endif %}">{% translate "History" %}</div></a>
        </div>

        <div class="m-4"><!-- div for tab_content -->
        {% block tab_content %}
        {% endblock %}
        </div>

        <div class="flex p-4 bg-slate-200 dark:bg-slate-800 border-b-2"><!-- bottom nav bar -->
            {% if is_event_page %}<div>{% blocktranslate with digest_order=event.digest_order|intcomma total_events=issue.digested_event_count|intcomma ingested_at=event.ingested_at|date:"j M G:i T" %}Event {{ digest_order }} of {{ total_events }} which occured at <span class="font-bold">{{ ingested_at }}</span>{% endblocktranslate %}</div>{% endif %}
            <div class="ml-auto pr-4 font-bold text-slate-500 dark:text-slate-300">
                {% if is_event_page %}
                <a href="{{ script_prefix }}/events/event/{{ event.id }}/download/">{% translate "Download" %}</a>
                | <a href="{{ script_prefix }}/events/event/{{ event.id }}/raw/" >{% translate "JSON" %}</a>
                | <a href="{{ script_prefix }}/events/event/{{ event.id }}/md/" >{% translate "Markdown" %}</a>
                | <a href="{{ script_prefix }}/events/event/{{ event.id }}/plain/" >{% translate "Plain" %}</a>
                {% endif %}

                {% if app_settings.USE_ADMIN and user.is_staff %}
                    {% if is_event_page %}
                        | <a href="{{ script_prefix }}/admin/events/event/{{ event.id }}/change/">{% translate "Event Admin" %}</a> |
                    {% endif %}
                    <a href="{{ script_prefix }}/admin/issues/issue/{{ issue.id }}/change/">{% translate "Issue Admin" %}</a>
                {% endif %}

            </div>
        </div>{# bottom nav bar #}
    </div>{# the whole of the big tabbed view #}

    <div class="w-128 hidden xl:flex flex-auto flex-col">{# RHS container for multiple stacked boxes #}

        <div class="border-2 mb-4 mr-4"><!-- "issue: key info" box -->
            <div class="font-bold border-b-2">
                <div class="p-4 border-slate-50 dark:border-slate-900 text-slate-500 dark:text-slate-300"> {# div-in-div to match the spacing of the tabs, which is caused by the hover-thick-line; we use border-2 on both sides rather than border-b-4 to get the text aligned centeredly #}
                Issue Key Info
                </div>
            </div>

            <div class="p-4">
                <div class="mb-4">
                    <div class="text-sm font-bold text-slate-500 dark:text-slate-300">{% translate "Issue" %} #</div>
                    <div>{{ issue.friendly_id }} </div>
                </div>

                <div class="mb-4">
                    <div class="text-sm font-bold text-slate-500 dark:text-slate-300">{% translate "State" %}</div>
                    <div>
                        {% if issue.is_resolved %}
                            {% translate "Resolved" %}
                            {% for version in issue.get_fixed_at %}
                                {% if forloop.first %}{% translate "in" %}{% endif %}
                                <span {% if version|issha %}class="font-mono"{% endif %}>{{ version|shortsha }}{% if not forloop.last %}</span>,{% endif %}
                            {% endfor %}
                        {% else %}
                            {% if issue.is_muted %}
                                {% translate "Muted" %}
                                {% if issue.unmute_after %}
                                    until {{ issue.unmute_after|date:"j M G:i T" }}.
                                {% elif issue.get_unmute_on_volume_based_conditions %}
                                    {% for vbc in issue.get_unmute_on_volume_based_conditions %}
                                        until at least {{ vbc.volume }} events per {{ vbc.nr_of_periods }} {{ vbc.period }}{% if vbc.nr_of_periods != 1 %}s{% endif %}{% if forloop.last %} occur.{% else %} or {% endif %}
                                    {% endfor %}
                                {% else %}
                                    (unconditionally).
                                {% endif %}
                            {% else %}
                                {% translate "Open" %}
                            {% endif %}
                        {% endif %}
                    </div>
                </div>

                <div class="mb-4">
                    <div class="text-sm font-bold text-slate-500 dark:text-slate-300">{% translate "Nr. of events" %}:</div>
                    <div>{{ issue.digested_event_count|intcomma }}
                    {% if issue.digested_event_count != issue.stored_event_count %}
                        total seen</div><div>{{ issue.stored_event_count|intcomma }} available</div>
                    {% else %}
                        </div>
                    {% endif %}
                </div>

                {% if issue.digested_event_count > 1 %}
                <div class="mb-4">
                    <div class="text-sm font-bold text-slate-500 dark:text-slate-300">{% translate "First seen" %}:</div>
                    <div>{{ issue.first_seen|date:"j M G:i T" }}</div>
                </div>

                <div class="mb-4">
                    <div class="text-sm font-bold text-slate-500 dark:text-slate-300">{% translate "Last seen" %}:</div>
                    <div>{{ issue.last_seen|date:"j M G:i T" }}</div>
                </div>
                {% else %}
                <div class="mb-4">
                    <div class="text-sm font-bold text-slate-500 dark:text-slate-300">{% translate "Seen at" %}:</div>
                    <div>{{ issue.first_seen|date:"j M G:i T" }}</div>
                </div>
                {% endif %}

                {% if issue.get_events_at_2 %}
                <div class="mb-4">
                    <div class="text-sm font-bold text-slate-500 dark:text-slate-300">Seen in releases:</div>
                    <div>
                    {% summarized_releases issue.get_events_at_2 as seen_releases %}
                    {% for item in seen_releases %}
                        {% if item.hidden_count %}
                            ... «{{ item.hidden_count }} more» ...{% if item.comma %},{% endif %}
                        {% else %}
                            <span {% if item.version|issha %}class="font-mono"{% endif %}>{{ item.version|shortsha }}</span>{% if item.comma %},{% endif %}
                        {% endif %}
                    {% endfor %}
                    </div>
                </div>
                {% endif %}

            </div>
        </div>

        {% if tab != "tags" and issue.tags_summary %}
        <div class="border-2 mb-4 mr-4"><!-- "issue: tags" box -->
            <div class="font-bold border-b-2">
                <div class="p-4 border-slate-50 dark:border-slate-900 text-slate-500 dark:text-slate-300">
                {% translate "Issue Tags" %}
                </div>
            </div>
            <div class="p-4">
                {% for issuetags in issue.tags_summary %}
                    <a href="{{ script_prefix }}/issues/issue/{{ issue.id }}/tags/{% current_qs %}" class="block mb-4">
                        <div class="text-sm font-bold text-slate-500 dark:text-slate-300">{{ issuetags.0.key.key }}:</div>
                        <div>
                        {% for issuetag in issuetags %}
                            <span>{{ issuetag.value.value }} <span class="text-xs">({{ issuetag.pct }}%)</span>{% if not forloop.last %}</span>,{% endif %}
                        {% endfor %}
                        </div>
                    </a>
                {% endfor %}

                <div class="text-sm font-bold italic text-slate-500 dark:text-slate-300"><a href="{{ script_prefix }}/issues/issue/{{ issue.id }}/tags/{% current_qs %}">{% translate "All tags..." %}</a></div>

            </div>
        </div>
        {% endif %}

    </div>{# RHS container #}
</div>

{% endblock %}{# block content #}