{{define "content"}}
<div class="crashgroups-page">
    <div class="toolbar">
        <span class="result-count">{{.Total}} crash groups</span>
    </div>

    {{if .CrashGroups}}
    <table class="table">
        <thead>
            <tr>
                <th>Status</th>
                <th>Title</th>
                <th>Repository</th>
                <th>Occurrences</th>
                <th>First Seen</th>
                <th>Last Seen</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {{range .CrashGroups}}
            <tr class="crashgroup-row" onclick="toggleTrace(this)">
                <td><span class="badge badge-status-{{.Status}}">{{.Status}}</span></td>
                <td>{{.Title}}</td>
                <td>{{.RepoName}}</td>
                <td>{{.OccurrenceCount}}</td>
                <td>{{timeAgo .FirstSeenAt}}</td>
                <td>{{timeAgo .LastSeenAt}}</td>
                <td><a href="/crashgroups/{{.ID}}" class="btn btn-sm" onclick="event.stopPropagation()">View</a></td>
            </tr>
            {{if .SampleTrace}}
            <tr class="trace-row" style="display: none;">
                <td colspan="7">
                    <div class="code-block">{{.SampleTrace}}</div>
                </td>
            </tr>
            {{end}}
            {{end}}
        </tbody>
    </table>

    <script>
    function toggleTrace(row) {
        var traceRow = row.nextElementSibling;
        if (traceRow && traceRow.classList.contains('trace-row')) {
            traceRow.style.display = traceRow.style.display === 'none' ? '' : 'none';
        }
    }
    </script>
    {{else}}
    <p class="empty-state">No crash groups yet. Crash groups are created automatically when artifacts with stack traces are uploaded.</p>
    {{end}}
</div>
{{end}}