{{define "upload_result_card"}}
<div id="upload-card-{{.JobID}}" class="upload-result-card" data-job-id="{{.JobID}}">
    <div class="upload-header">
        <h4>Job #{{.JobID}}</h4>
        <div class="upload-status {{if .Success}}success{{else}}error{{end}}">
            {{if .Success}}✓ Success{{else}}✗ Failed{{end}}
        </div>
    </div>

    <div class="upload-details">
        <div class="upload-info">
            <p><strong>Files Found:</strong> {{.FilesFound}}</p>
            <p><strong>Files Uploaded:</strong> {{.FilesUploaded}}</p>
            {{if .Success}}
            <p class="success-text">Successfully processed</p>
            {{else}}
            <p class="error-text">{{.ErrorMsg}}</p>
            {{end}}
        </div>

        <div class="upload-actions">
            {{if .Success}}
            <div class="success-indicator">
                <span class="icon">✓</span>
                <span>Upload Complete</span>
            </div>
            {{else}}
            <div class="error-indicator">
                <span class="icon">✗</span>
                <span>Upload Failed</span>
            </div>
            {{end}}
        </div>
    </div>

    {{if .Files}}
    <div class="file-results">
        {{with index .Files 0}}
        <div class="file-result {{if .Success}}success{{else}}error{{end}}">
            <span class="file-name">{{.Name}}</span>
            <span class="file-size">({{printf "%.2f MB" (div .FileSize 1048576.0)}})</span>
            {{if .Success}}
            <span class="success-icon">✓</span>
            {{else}}
            <span class="error-icon">✗</span>
            <span class="error-message">{{.Error}}</span>
            {{end}}
        </div>
        {{end}}
        <div class="file-pagination-controls">
            <span>File {{.FilePage}} of {{.TotalFiles}}</span>
            <div class="file-pagination-buttons">
                {{if gt .FilePage 1}}
                <button
                    hx-get="/documents/upload/job/file?job_id={{.JobID}}&session_id={{.SessionID}}&file_page={{subtract .FilePage 1}}"
                    hx-target="#upload-card-{{.JobID}}" hx-swap="outerHTML" hx-indicator="false" class="pagination-btn">
                    ← Previous File
                </button>
                {{end}}
                {{if lt .FilePage .TotalFiles}}
                <button
                    hx-get="/documents/upload/job/file?job_id={{.JobID}}&session_id={{.SessionID}}&file_page={{add .FilePage 1}}"
                    hx-target="#upload-card-{{.JobID}}" hx-swap="outerHTML" hx-indicator="false" class="pagination-btn">
                    Next File →
                </button>
                {{end}}
            </div>
        </div>
    </div>
    {{end}}
</div>
{{end}}

{{define "upload_results_pagination"}}
<div class="upload-results-container">
    <div class="upload-results-header">
        <h3>Upload Results</h3>
        <div class="upload-stats">
            <div class="stat-item">
                <span class="stat-value">{{.TotalJobs}}</span>
                <span class="stat-label">Total Jobs</span>
            </div>
            <div class="stat-item success-stat">
                <span class="stat-value">{{.TotalSuccess}}</span>
                <span class="stat-label">Successful</span>
            </div>
            <div class="stat-item error-stat">
                <span class="stat-value">{{.TotalFailure}}</span>
                <span class="stat-label">Failed</span>
            </div>
            <div class="stat-item">
                <span class="stat-value">{{printf "%.1f" (div .TotalBytesUploaded 1048576.0)}}</span>
                <span class="stat-label">MB Uploaded</span>
            </div>
            <div class="stat-item">
                <span class="stat-value">{{.TotalTime}}</span>
                <span class="stat-label">Total Time</span>
            </div>
        </div>
    </div>

    {{if gt .TotalSuccess 0}}
    <p>Successfully uploaded {{.TotalSuccess}} document(s) to ServiceTrade in {{.TotalTime}}!</p>
    {{end}}
    {{if gt .TotalFailure 0}}
    <p class="text-warning">Failed to upload {{.TotalFailure}} document(s). See details below.</p>
    {{end}}

    <div class="upload-results-grid">
        {{range .Results}}
        {{template "upload_result_card" .}}
        {{end}}
    </div>

    {{if gt .TotalPages 1}}
    <div class="pagination-controls">
        <div class="pagination-info">
            Showing {{.StartIndex}}-{{.EndIndex}} of {{.TotalResults}} results
        </div>

        <div class="pagination-buttons">
            {{if gt .CurrentPage 1}}
            <button
                hx-get="/documents/upload/results?page={{subtract .CurrentPage 1}}&limit={{.Limit}}&session_id={{.SessionID}}"
                hx-target="#upload-results" hx-indicator="false" class="pagination-btn">
                ← Previous
            </button>
            {{end}}

            {{range $i := sequence .StartPage .EndPage}}
            <button hx-get="/documents/upload/results?page={{$i}}&limit={{$.Limit}}&session_id={{$.SessionID}}"
                hx-target="#upload-results" hx-indicator="false"
                class="pagination-btn {{if eq $i $.CurrentPage}}active{{end}}">
                {{$i}}
            </button>
            {{end}}

            {{if lt .CurrentPage .TotalPages}}
            <button
                hx-get="/documents/upload/results?page={{add .CurrentPage 1}}&limit={{.Limit}}&session_id={{.SessionID}}"
                hx-target="#upload-results" hx-indicator="false" class="pagination-btn">
                Next →
            </button>
            {{end}}
        </div>
    </div>
    {{end}}
</div>
{{end}}