{{ extends "../layouts/base" }}

{{ block title() }}Job Details - HeroApp UI{{ end }}

{{ block body() }}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Job Details</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <a href="/jobs" class="btn btn-sm btn-outline-secondary">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
                Back to Jobs
            </a>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="refreshJobDetails()">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
                Refresh
            </button>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>Job #{{ .Job.JobID }}</h5>
                <span class="badge {{ if .Job.Status == "error" }}bg-danger{{ else if .Job.Status == "done" }}bg-success{{ else if .Job.Status == "active" }}bg-warning text-dark{{ else }}bg-primary{{ end }}">
                    {{ .Job.Status }}
                </span>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table">
                            <tbody>
                                <tr>
                                    <th>Job ID</th>
                                    <td>{{ .Job.JobID }}</td>
                                </tr>
                                <tr>
                                    <th>Circle ID</th>
                                    <td>{{ .Job.CircleID }}</td>
                                </tr>
                                <tr>
                                    <th>Topic</th>
                                    <td>{{ .Job.Topic }}</td>
                                </tr>
                                <tr>
                                    <th>Status</th>
                                    <td>
                                        <span class="badge {{ if .Job.Status == "error" }}bg-danger{{ else if .Job.Status == "done" }}bg-success{{ else if .Job.Status == "active" }}bg-warning text-dark{{ else }}bg-primary{{ end }}">
                                            {{ .Job.Status }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Parameters Type</th>
                                    <td>{{ .Job.ParamsType }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table">
                            <tbody>
                                <tr>
                                    <th>Scheduled Time</th>
                                    <td>{{ .Job.TimeScheduled.Format("2006-01-02 15:04:05") }}</td>
                                </tr>
                                <tr>
                                    <th>Start Time</th>
                                    <td>
                                        {{ if not .Job.TimeStart.IsZero }}
                                            {{ .Job.TimeStart.Format("2006-01-02 15:04:05") }}
                                        {{ else }}
                                            Not started
                                        {{ end }}
                                    </td>
                                </tr>
                                <tr>
                                    <th>End Time</th>
                                    <td>
                                        {{ if not .Job.TimeEnd.IsZero }}
                                            {{ .Job.TimeEnd.Format("2006-01-02 15:04:05") }}
                                        {{ else }}
                                            Not completed
                                        {{ end }}
                                    </td>
                                </tr>
                                <tr>
                                    <th>Duration</th>
                                    <td>{{ .Job.Duration }}</td>
                                </tr>
                                <tr>
                                    <th>Session Key</th>
                                    <td>{{ .Job.SessionKey }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Error Section (if applicable) -->
        {{ if .Job.HasError }}
        <div class="card mb-4 border-danger">
            <div class="card-header bg-danger text-white">
                <h5>Error</h5>
            </div>
            <div class="card-body">
                <pre class="error-message">{{ .Job.Error }}</pre>
            </div>
        </div>
        {{ end }}

        <!-- Result Section (if completed) -->
        {{ if .Job.Status == "done" }}
        <div class="card mb-4 border-success">
            <div class="card-header bg-success text-white">
                <h5>Result</h5>
            </div>
            <div class="card-body">
                <pre class="result-content">{{ .Job.Result }}</pre>
            </div>
        </div>
        {{ end }}

        <!-- Parameters Section -->
        <div class="card mb-4">
            <div class="card-header">
                <h5>Parameters</h5>
            </div>
            <div class="card-body">
                <pre class="params-content">{{ .Job.Params }}</pre>
            </div>
        </div>
    </div>
</div>
{{ end }}

{{ block scripts() }}
<script>
    function refreshJobDetails() {
        window.location.reload();
    }
</script>
<style>
    pre.error-message {
        background-color: #f8d7da;
        color: #842029;
        padding: 15px;
        border-radius: 4px;
        white-space: pre-wrap;
    }
    
    pre.result-content {
        background-color: #d1e7dd;
        color: #0f5132;
        padding: 15px;
        border-radius: 4px;
        white-space: pre-wrap;
    }
    
    pre.params-content {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 4px;
        white-space: pre-wrap;
    }
</style>
{{ end }}