{{if and .IsRawMode .IsFirstPage}}
<tr>
    <td colspan="6">
        <div class="alert warning">Game failed to load: {{.ErrorMsg}}<br>
        Showing raw action history (no faction/date info). Rewind truncates persisted history directly.</div>
    </td>
</tr>
{{end}}
{{range .Entries}}
<tr class="action-row" onclick="toggleActionDetail(this)">
    <td>{{.Index}}</td>
    <td class="action-type">{{.ActionType}}</td>
    <td>{{.FactionName}}</td>
    <td>{{.GameDate}}</td>
    <td>{{.RoundId}}</td>
    <td class="actions-cell">
        {{if not $.IsRawMode}}
        <button class="btn-small"
                hx-get="/games/{{$.GameID}}/state/{{.Index}}"
                hx-target="closest tr"
                hx-swap="afterend"
                onclick="event.stopPropagation()">
            State
        </button>
        {{end}}
        <button class="btn-rewind"
                hx-post="/games/{{$.GameID}}/{{if $.IsRawMode}}raw-rewind{{else}}rewind{{end}}"
                hx-vals='{"targetAction": "{{.Index}}"}'
                hx-confirm="{{if $.IsRawMode}}Raw rewind game to action {{.Index}}? This truncates persisted history directly and cannot be undone.{{else}}Rewind game to action {{.Index}}? This will disconnect all clients and cannot be undone.{{end}}"
                hx-target="#rewind-result"
                hx-swap="innerHTML"
                onclick="event.stopPropagation()">
            Rewind
        </button>
    </td>
</tr>
<tr class="action-detail-row" style="display: none;">
    <td colspan="6">
        <div class="action-detail">
            <div class="action-detail-header">
                <strong>Action #{{.Index}}</strong> - {{.ActionType}} {{if not $.IsRawMode}}(Round {{.RoundId}}){{end}}
                <button class="close-btn" onclick="event.stopPropagation(); this.closest('tr').style.display='none'">&times;</button>
            </div>
            <pre class="action-json">{{.ActionJSON}}</pre>
        </div>
    </td>
</tr>
{{end}}
{{if .HasMore}}
<tr hx-get="/games/{{.GameID}}/history?start={{.NextStart}}&limit=50{{if .IsRawMode}}&raw=1{{end}}"
    hx-trigger="revealed"
    hx-swap="outerHTML">
    <td colspan="6" class="htmx-indicator">Loading more...</td>
</tr>
{{end}}
{{if and (not .Entries) (not .HasMore)}}
<tr>
    <td colspan="6" class="empty-state">No actions recorded yet.</td>
</tr>
{{end}}
<script>
function toggleActionDetail(row) {
    const detailRow = row.nextElementSibling;
    if (detailRow && detailRow.classList.contains('action-detail-row')) {
        detailRow.style.display = detailRow.style.display === 'none' ? '' : 'none';
    }
}
</script>