{!
    Job Details Recap Component
    Displays batch key metrics and statistics using grouped area records from GetJobDetailsRecapUseCase.Result

    Parameters:
    - recap: GetJobDetailsRecapUseCase.Result - The recap data object
!}

<div class="row g-2">
    <!-- Status Card (with start and finish times) -->
    <div class="col-md-6">
        <div class="card"
             style="border-left: 4px solid {#if recap.jobStatusInfo.jobStatus.name() == 'SUCCEEDED'}#198754{#else if recap.jobStatusInfo.jobStatus.name() == 'FAILED'}#dc3545{#else if recap.jobStatusInfo.jobStatus.name() == 'PROCESSING'}#0d6efd{#else if recap.jobStatusInfo.jobStatus.name() == 'PROCESSED'}#009dca{#else}#6c757d{/if} !important;">
            <div class="card-body">
                <div class="row">
                    <div class="col-auto">
                        <div class="display-6">
                            {#if recap.jobStatusInfo.jobStatus.name() == 'SUCCEEDED'}
                                <i class="bi bi-check-circle text-success"></i>
                            {#else if recap.jobStatusInfo.jobStatus.name() == 'FAILED'}
                                <i class="bi bi-x-circle text-danger"></i>
                            {#else if recap.jobStatusInfo.jobStatus.name() == 'PROCESSING'}
                                <i class="bi bi-play-circle text-primary"></i>
                            {#else if recap.jobStatusInfo.jobStatus.name() == 'PROCESSED'}
                                <i class="bi bi-check2-square" style="color: #009dca;"></i>
                            {#else if recap.jobStatusInfo.jobStatus.name() == 'ENQUEUED'}
                                <i class="bi bi-hourglass text-secondary"></i>
                            {#else if recap.jobStatusInfo.jobStatus.name() == 'NOT_APPLICABLE'}
                                <i class="bi bi-dash-circle text-muted"></i>
                            {#else if recap.jobStatusInfo.jobStatus.name() == 'DELETED'}
                                <i class="bi bi-trash text-muted"></i>
                            {#else}
                                <i class="bi bi-question-circle text-muted"></i>
                            {/if}
                        </div>
                    </div>
                    <div class="col">
                        <div class="text-muted small font-weight-bold mb-2">{#if showBusinessStatus}techn. {/if}Status{#if showBusinessStatus} / fachl. Status{/if}</div>
                        <div class="mb-2 d-flex align-items-center gap-2 flex-wrap">
                            <span class="badge status-pill status-{recap.jobStatusInfo.jobStatus.name().toLowerCase()}"
                                  style="cursor: help;"
                                  title="Exit-Code: {#if recap.jobStatusInfo.resultCode != null}{recap.jobStatusInfo.resultCode}{#else}-{/if}&#10;Result: {#if recap.jobStatusInfo.result != null}{recap.jobStatusInfo.result}{#else}-{/if}">
                                {recap.jobStatusInfo.jobStatus}
                            </span>
                            {#if showBusinessStatus}
                                {#if recap.jobStatusInfo.businessStatus.name() == 'SUCCESS'}
                                    <span class="status-badge status-pill status-succeeded business-status-badge business-status-success"
                                          style="cursor: help;"
                                          title="Exit-Code: {#if recap.jobStatusInfo.resultCode != null}{recap.jobStatusInfo.resultCode}{#else}-{/if}&#10;Result: {#if recap.jobStatusInfo.result != null}{recap.jobStatusInfo.result}{#else}-{/if}">
                                        <i class="bi bi-check-circle-fill business-status-icon" aria-hidden="true"></i>
                                        <span>Erfolgreich</span>
                                    </span>
                                {#else if recap.jobStatusInfo.businessStatus.name() == 'WARNING'}
                                    <span class="status-badge status-pill status-warning business-status-badge business-status-warning"
                                          style="cursor: help;"
                                          title="Exit-Code: {#if recap.jobStatusInfo.resultCode != null}{recap.jobStatusInfo.resultCode}{#else}-{/if}&#10;Result: {#if recap.jobStatusInfo.result != null}{recap.jobStatusInfo.result}{#else}-{/if}">
                                        <i class="bi bi-exclamation-triangle-fill business-status-icon" aria-hidden="true"></i>
                                        <span>Warnung</span>
                                    </span>
                                {#else}
                                    <span class="status-badge status-pill status-enqueued business-status-badge business-status-none"
                                          style="cursor: help;"
                                          title="Exit-Code: {#if recap.jobStatusInfo.resultCode != null}{recap.jobStatusInfo.resultCode}{#else}-{/if}&#10;Result: {#if recap.jobStatusInfo.result != null}{recap.jobStatusInfo.result}{#else}-{/if}">
                                        <i class="bi bi-question-circle business-status-icon" aria-hidden="true"></i>
                                        <span>Kein Status</span>
                                    </span>
                                {/if}
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Average Time Per Child Job -->
    <div class="col-md-6">
        <div class="card border-left-warning">
            <div class="card-body">
                <div class="row">
                    <div class="col-auto">
                        <div class="display-6 text-warning">
                            <i class="bi bi-clock"></i>
                        </div>
                    </div>
                    <div class="col">
                        <div class="text-muted small font-weight-bold">Durchschn. Laufzeit / totale Laufzeit</div>
                        <div class="h3 mb-0"><strong>{recap.jobDurations.averageChildDuration}</strong> <small class="text-muted" style="font-size: 0.7em;">{recap.jobDurations.averageChildDurationUnit}</small> / <strong>{recap.jobDurations.totalJobDuration}</strong> <small class="text-muted" style="font-size: 0.7em;">{recap.jobDurations.totalJobDurationUnit}</small></div>
                    </div>
                    <small class="text-muted d-block mt-2">
                        Start: <strong>{recap.jobDurations.getStartedAtFormatted()}</strong>
                    </small>
                    {#if recap.jobDurations.finishedAt}
                        <small class="text-muted d-block mt-1">
                            Ende: <strong>{recap.jobDurations.getFinishedAtFormatted()}</strong>
                        </small>
                    {#else}
                        <small class="text-warning d-block mt-1">
                            <i class="bi bi-clock"></i> Läuft noch...
                        </small>
                    {/if}
                </div>
            </div>
        </div>
    </div>

    <!-- Total Jobs -->
    <div class="col-md-6">
        <div class="card {#if recap.childJobCounters.failedChildJobCount > 0}border-left-danger{#else if recap.childJobCounters.totalChildJobs > 0 && recap.childJobCounters.succeededChildJobCount == recap.childJobCounters.totalChildJobs}border-left-success{#else}border-left-secondary{/if}">
            <div class="card-body">
                <div class="row">
                    <div class="col-auto">
                        <div class="display-6 {#if recap.childJobCounters.failedChildJobCount > 0}text-danger{#else if recap.childJobCounters.totalChildJobs > 0 && recap.childJobCounters.succeededChildJobCount == recap.childJobCounters.totalChildJobs}text-success{#else}text-secondary{/if}">
                            <i class="bi bi-play-circle"></i>
                        </div>
                    </div>
                    <div class="col">
                        <div class="text-muted small font-weight-bold">Erfolgsquote</div>
                        <div class="h3 mb-0"><strong>{recap.childJobCounters.succeededChildJobCount} / {recap.childJobCounters.totalChildJobs}</strong></div>
                        <small class="text-muted">{recap.childJobCounters.completedPercentage}% Abgeschlossen</small>
                    </div>
                    <div class="col">
                        {#if recap.childJobCounters.succeededChildJobCount > 0}
                            <div class="h5 text-success">
                                <i class="bi bi-check-circle"></i> {recap.childJobCounters.succeededChildJobCount}
                            </div>
                        {/if}
                        {#if recap.childJobCounters.failedChildJobCount > 0}
                            <div class="h5 text-danger">
                                <i class="bi bi-exclamation-circle"></i> {recap.childJobCounters.failedChildJobCount}
                            </div>
                        {/if}
                        {#if recap.childJobCounters.inProgressChildJobCount > 0}
                            <div class="h5 text-secondary">
                                <i class="bi bi-hourglass-split"></i> {recap.childJobCounters.inProgressChildJobCount}
                            </div>
                        {/if}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {#if showExtendedDetails}
    <!-- Warnings -->
    <div class="col-md-6">
        <div class="card {#if recap.messageCount.exceptionMessages > 0}border-left-exception{#else if recap.messageCount.errorMessages > 0}border-left-danger{#else if recap.messageCount.warningMessages > 0}border-left-warning{#else}border-left-info{/if}">
            <div class="card-body">
                <div class="row">
                    <div class="col-auto">
                        <div class="display-6 {#if recap.messageCount.exceptionMessages > 0}text-exception{#else if recap.messageCount.errorMessages > 0}text-danger{#else if recap.messageCount.warningMessages > 0}text-warning{#else}text-info{/if}">
                            <i class="bi bi-envelope"></i>
                        </div>
                    </div>
                    <div class="col">
                        <div class="text-muted small font-weight-bold">Total Meldungen</div>
                        <div class="h3 mb-0"><strong>{recap.messageCount.totalMessages}</strong></div>
                    </div>
                    <div class="col">
                        {#if recap.messageCount.infoMessages > 0}
                        <div class="h5 text-info">
                            <i class="bi bi-info-circle"></i>
                            <a href="#batch-messages"
                               class="text-info"
                               title="Nur Info-Meldungen anzeigen"
                               aria-label="Nur {recap.messageCount.infoMessages} Info-Meldungen anzeigen"
                               hx-get="{cp}/history/details/messages"
                               hx-target="#batch-messages"
                               hx-swap="innerHTML"
                               hx-vals='js:&#123;"size": jrcPageSize("messages"), "page": 0&#125;'
                               hx-include="[name='jobId'],[name='jobType'],[name='search'],[name='textSearch'],[name='sortOrder'],[name='attemptFilter']"
                               onclick="jrcFilterMessagesByLevel(event, 'INFO_ONLY')">{recap.messageCount.infoMessages}</a>
                        </div>
                        {/if}
                        {#if recap.messageCount.warningMessages > 0}
                        <div class="h5 text-warning">
                            <i class="bi bi-exclamation-circle"></i>
                            <a href="#batch-messages"
                               class="text-warning"
                               title="Nur Warning-Meldungen anzeigen"
                               aria-label="Nur {recap.messageCount.warningMessages} Warning-Meldungen anzeigen"
                               hx-get="{cp}/history/details/messages"
                               hx-target="#batch-messages"
                               hx-swap="innerHTML"
                               hx-vals='js:&#123;"size": jrcPageSize("messages"), "page": 0&#125;'
                               hx-include="[name='jobId'],[name='jobType'],[name='search'],[name='textSearch'],[name='sortOrder'],[name='attemptFilter']"
                               onclick="jrcFilterMessagesByLevel(event, 'WARNING_ONLY')">{recap.messageCount.warningMessages}</a>
                        </div>
                        {/if}
                        {#if recap.messageCount.errorMessages > 0}
                        <div class="h5 text-danger">
                            <i class="bi bi-x-circle"></i>
                            <a href="#batch-messages"
                               class="text-danger"
                               title="Nur Error-Meldungen anzeigen"
                               aria-label="Nur {recap.messageCount.errorMessages} Error-Meldungen anzeigen"
                               hx-get="{cp}/history/details/messages"
                               hx-target="#batch-messages"
                               hx-swap="innerHTML"
                               hx-vals='js:&#123;"size": jrcPageSize("messages"), "page": 0&#125;'
                               hx-include="[name='jobId'],[name='jobType'],[name='search'],[name='textSearch'],[name='sortOrder'],[name='attemptFilter']"
                               onclick="jrcFilterMessagesByLevel(event, 'ERROR_ONLY')">{recap.messageCount.errorMessages}</a>
                        </div>
                        {/if}
                        {#if recap.messageCount.exceptionMessages > 0}
                        <div class="h5 text-danger">
                            <i class="bi bi-bug"></i>
                            <a href="#batch-messages"
                               class="text-danger"
                               title="Nur Exception-Meldungen anzeigen"
                               aria-label="Nur {recap.messageCount.exceptionMessages} Exception-Meldungen anzeigen"
                               hx-get="{cp}/history/details/messages"
                               hx-target="#batch-messages"
                               hx-swap="innerHTML"
                               hx-vals='js:&#123;"size": jrcPageSize("messages"), "page": 0&#125;'
                               hx-include="[name='jobId'],[name='jobType'],[name='search'],[name='textSearch'],[name='sortOrder'],[name='attemptFilter']"
                               onclick="jrcFilterMessagesByLevel(event, 'EXCEPTION_ONLY')">{recap.messageCount.exceptionMessages}</a>
                        </div>
                        {/if}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {/if}
</div>

{#if showExtendedDetails}
{#if recap.recapView != null && recap.recapView.recapSections != null && recap.recapView.recapSections.size() > 0}
<div class="mt-4">
    <h6 class="text-muted">
        <i class="bi bi-table"></i> Programmspezifische Kennzahlen
    </h6>
    <table class="table table-sm table-bordered">
        <thead class="table-light">
            <tr>
                <th>Kennzahl</th>
                <th class="text-end">Wert</th>
            </tr>
        </thead>
        {#for section in recap.recapView.recapSections}
            <tbody class="recap-section-group">
                {#if section.hasSection}
                <tr class="recap-section-header">
                    <th class="text-muted recap-section-title">{section.sectionName}</th>
                    <th class="text-end recap-section-title"><span class="text-body-secondary fw-bold">{section.sectionTotal}</span></th>
                </tr>
                {/if}
                {#for entry in section.recapEntries}
                    <tr title="{entry.recapParameter.description}">
                        <td style="{#if section.hasSection}padding-left: 1.15rem !important; {/if}{#if entry.recapParameter.css != null && !entry.recapParameter.css.isBlank()}{entry.recapParameter.css}{/if}">
                            {#if entry.recapParameter.icon != null && !entry.recapParameter.icon.isBlank()}<i class="bi {entry.recapParameter.icon}"></i> {/if}{entry.recapParameter.displayName}
                        </td>
                        {#if entry.counter != null}
                            <td class="text-end" {#if entry.recapParameter.css != null && !entry.recapParameter.css.isBlank()}style="{entry.recapParameter.css}"{/if}><strong>{entry.counter}</strong></td>
                        {#else}
                            <td class="text-end" {#if entry.recapParameter.css != null && !entry.recapParameter.css.isBlank()}style="{entry.recapParameter.css}"{/if}><strong>--</strong></td>
                        {/if}
                    </tr>
                {/for}
            </tbody>
        {/for}
    </table>
</div>
{/if}
{/if}

<style>
    .status-pill {
        display: inline-flex;
        align-items: center;
        min-height: 1.9rem;
        padding: 0.35rem 0.65rem;
        line-height: 1;
    }

    .business-status-badge {
        gap: 0.3rem;
    }

    .border-left-primary {
        border-left: 4px solid #0d6efd !important;
    }
    .border-left-success {
        border-left: 4px solid #198754 !important;
    }
    .border-left-secondary {
        border-left: 4px solid #6c757d !important;
    }
    .border-left-warning {
        border-left: 4px solid #ffc107 !important;
    }
    .border-left-info {
        border-left: 4px solid #0dcaf0 !important;
    }
    .border-left-danger {
        border-left: 4px solid #dc3545 !important;
    }
    .border-left-exception {
        border-left: 4px solid #8b0000 !important;
    }
    .text-exception {
        color: #8b0000 !important;
    }
    .recap-section-header {
        background-color: #f8f9fa;
    }
    .recap-section-header th {
        border-top: 2px solid #dee2e6;
    }
    .recap-section-title {
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        color: #6c757d !important;
    }
    .recap-section-group td, .recap-section-group th {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
</style>