{% extends "sentry/groups/group_list.html" %}

{% load i18n %}
{% load sentry_activity %}
{% load sentry_helpers %}
{% load sentry_plugins %}

{% block title %}{% if event %}{{ event.error }}{% else %}{{ group.message }}{% endif %} | {{ block.super }}{% endblock %}

{% block main %}
    {% handle_before_events request group %}

    <div id="details">
        <div id="event_list" class="inactive"></div>
    </div>

    <section class="body">
        {% block inner %}
            {% with event|get_rendered_interfaces:request as interface_list %}

                {% if group|has_charts %}
                    <div class="module">
                        <div id="chart" class="chart" data-api-url="{% url 'sentry-api-0-group-stats' group.id %}">
                            <div class="sparkline">
                                <span class="loading">{% trans "Loading historical data..." %}</span>
                                <noscript>{% trans "Get yourself some JavaScripts dood" %}</noscript>
                            </div>
                        </div>
                    </div>
                {% endif %}

                <div class="activity" id="activity">
                    <ul>
                        {% for item in activity %}
                            {% with item|render_activity as out %}
                                {% if out %}
                                    <li class="item item-{{ item.get_type_display }}">{{ out }}</li>
                                {% endif %}
                            {% endwith %}
                        {% endfor %}
                    </ul>
                    <a href="#add-note" class="add-note-btn"><i class="icon-comment"></i> Add Note</a>
                    <form class="add-note-form hide" method="POST" action="">
                        {% csrf_token %}
                        <input type="hidden" name="o" value="note">
                        {{ add_note_form.text }}
                        <fieldset class="form-actions">
                            <button type="submit" class="btn btn-small btn-primary">{% trans "Add Note" %}</button>
                        </fieldset>
                    </form>
                </div>

                <div class="btn-toolbar event-toolbar">
                    <!-- We switch the ordering of events here as it makes more sense visually -->
                    <a class="btn pull-left prev {% if not next_event %} disabled{% endif %}"{% if next_event %} href="{% url 'sentry-group-event' group.organization.slug group.project.slug group.id next_event.id %}"{% endif %}><span></span> {% trans "Newer Sample" %}</a>
                    <a class="btn pull-right next {% if not prev_event %} disabled{% endif %}"{% if prev_event %} href="{% url 'sentry-group-event' group.organization.slug group.project.slug group.id prev_event.id %}"{% endif %}>{% trans "Older Sample" %} <span></span></a>
                    <h4>
                    Sample at <span title="{{ event.datetime }}">{% localized_datetime event.datetime %}</span> [{{ event.size|filesizeformat }}]<br><small>ID: {{ event.event_id }}</small></h4>
                </div>

                {% include "sentry/partial/event_nav.html" %}

                {% if group.is_muted %}
                    <div class="alert alert-info">This event has been muted. You will not be notified of any changes and it will not show up in the default feed.</div>
                {% endif %}

                {% if event.has_two_part_message %}
                    <pre id="full-message">{{ event.message }}</pre>
                {% endif %}

                {% include "sentry/partial/_event_details.html" %}
            {% endwith %}
        {% endblock %}
    </section>
{% endblock %}

{% block sidebar %}
    <ul class="nav nav-list">
        <li{% if page == 'details' %} class="active"{% endif %}><a href="{% url 'sentry-group' group.organization.slug group.project.slug group.id %}">Aggregate</a></li>
        <li{% if page == 'tag_list' %} class="active"{% endif %}>
            <a href="{% url 'sentry-group-tags' group.organization.slug group.project.slug group.id %}">{% trans "Tags" %}</a>
        </li>
        <li{% if page == 'event_list' or page == 'event' %} class="active"{% endif %}>
            <a href="{% url 'sentry-group-events' group.organization.slug group.project.slug group.id %}">{% trans "Samples" %}</a>
        </li>
    </ul>

    <h6>{% trans "Aggregate Details" %}</h6>

    <dl class="flat">
        <dt>{% trans "Status:" %}</dt>
        <dd>{{ group.get_status_display|title }}</dd>
        <dt>{% trans "First Seen:" %}</dt>
        <dd class="pretty-date" data-datetime="{% localized_datetime group.first_seen "c" %}">{{ group.first_seen|timesince }}</dd>
        {% if group.active_at and group.active_at != group.first_seen %}
            <dt>{% trans "Reopened At:" %}</dt>
            <dd class="pretty-date" data-datetime="{% localized_datetime group.active_at "c" %}">{{ group.active_at|timesince }}</dd>
        {% endif %}
        <dt>{% trans "Last Seen:" %}</dt>
        <dd class="pretty-date" data-datetime="{% localized_datetime group.last_seen "c" %}">{{ group.last_seen|timesince }}</dd>
        {% if group.avg_time_spent %}
            <dt>{% trans "Avg Duration:" %}</dt>
            <dd>{% if group.avg_time_spent %}{{ group.avg_time_spent|duration }}{% else %}<em>{% trans "n/a" %}</em>{% endif %}</dd>
        {% endif %}
    </dl>

    {% if seen_by_faces %}
        <h6>{% trans "Seen By" %}</h6>
        <ul class="seen-by">
            {% for s_user, s_last_seen in seen_by_faces %}
                <li>
                    <img src="{% gravatar_url s_user.email size 32 %}" class="tip" rel="tooltip" title="<strong>{{ s_user|user_display_name|force_escape }}</strong><br>{{ s_last_seen|timesince }}">
                </li>
            {% endfor %}
            {% if seen_by_extra %}
                <li class="tip" rel="tooltip" title="{% for s_user, _ in seen_by %}- {{ s_user|user_display_name|force_escape }}<br>{% endfor %}">
                    &middot;&middot;&middot;
                </li>
            {% endif %}
        </ul>
    {% endif %}

    <ul class="nav nav-list">
        <li class="nav-header">{% trans "Actions" %}</li>
        {% if can_admin_event %}
            {% if not group.is_muted %}
                <li><a href="{% url 'sentry-api-set-group-mute' group.organization.slug project.slug group.id %}">{% trans "Mute Event" %}</a></li>
            {% elif not group.is_resolved %}
                <li><a href="{% url 'sentry-api-set-group-unresolve' group.organization.slug project.slug group.id %}">{% trans "Unmute Event" %}</a></li>
            {% endif %}
            {% url 'sentry-group' group.organization.slug group.project.slug group.id as group_link %}
            <li>
                <a href="javascript:void(0)"
                   data-public-url="{% url 'sentry-api-set-group-public' group.organization.slug group.project.slug group.id %}"
                   data-private-url="{% url 'sentry-api-set-group-private' group.organization.slug group.project.slug group.id %}"
                   data-share-url="{% absolute_uri group_link %}"
                   data-public="{% if group.is_public %}true{% else %}false{% endif %}"
                   class="share-link">{% trans "Share Event" %}</a>
            </li>
            {% for label, link, is_active in group|get_actions:request %}
                <li><a href="{{ link }}">{{ label }}</a></li>
            {% endfor %}
        {% endif %}
        <li><a {% if event.id %}
        href="{% url 'sentry-group-event-json' group.organization.slug project.slug group.id event.id %}"{% else %}
        href="{% url 'sentry-group-event-json' group.organization.slug project.slug group.id 'latest' %}"{% endif %}
        >{% trans "Raw JSON Data" %}</a></li>
        {% if can_remove_event %}
            <li><a href="{% url 'sentry-api-remove-group' group.organization.slug project.slug group.id %}"
                   onclick="return confirm('{% trans "Are you sure you wish to delete all data for this event?" %}');">{% trans "Remove Event Data" %}</a></li>
        {% endif %}
    </ul>

    {% for tag in group.get_tags %}
        {% render_tag_widget group tag %}
    {% endfor %}

    {% for html in group|get_widgets:request %}
        {{ html|safe }}
    {% endfor %}
{% endblock %}

{% block content_after %}
    <script type="text/javascript">
    $(document).ready(function() {
        new app.GroupDetailsPage({
            group: {{ group|to_json:request|safe }},
        });
    });
    </script>
{% endblock %}