{#include base title="Ausführungshistorie" subtitle="Job-Ausführungen und deren Status" activeNavigationId="history"}

{#content}
    <div class="row mb-3">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="row g-2">
                        <div class="col-md-4">
                            <input type="search"
                                   class="form-control"
                                   name="search"
                                   placeholder="Historie durchsuchen..."
                                   title="Suche nach Job-Name oder Job-Typ. Verwenden Sie 'key=value' für Parameter- oder Metadaten-Suche (z.B. 'userId=123' oder 'clonedFrom=template-456')"
                                   data-bs-toggle="tooltip"
                                   data-bs-placement="top"
                                   hx-get="{cp}/history/table"
                                   hx-trigger="keyup changed delay:300ms"
                                   hx-target="#history-table"
                                   hx-vals='js:&#123;"size": jrcPageSize("history")&#125;'
                                   hx-include="[name='status-filter'],[name='jobType']">
                        </div>
                        <div class="col-md-3">
                            <select name="status-filter"
                                    class="form-select"
                                    hx-get="{cp}/history/table"
                                    hx-target="#history-table"
                                    hx-vals='js:&#123;"size": jrcPageSize("history")&#125;'
                                    hx-include="[name='search'],[name='jobType']">
                                <option value="all">Alle Status</option>
                                <option value="SUCCEEDED">Erfolgreich</option>
                                <option value="FAILED">Fehlgeschlagen</option>
                                <option value="PROCESSING">In Bearbeitung</option>
                                <option value="ENQUEUED">Wartend</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="jobTypeFilter" class="visually-hidden">Job-Typ Filter</label>
                            <select id="jobTypeFilter"
                                    name="jobType"
                                    class="form-select"
                                    hx-get="{cp}/history/table"
                                    hx-target="#history-table"
                                    hx-vals='js:&#123;"size": jrcPageSize("history")&#125;'
                                    hx-include="[name='search'],[name='status-filter']">
                                <option value="all">Alle Job-Typen</option>
                                {#for jobDef in availableJobTypes}
                                    <option value="{jobDef.jobType()}">{jobDef.displayName()}</option>
                                {/for}
                            </select>
                        </div>
                        <div class="col-md-2 text-end">
                            <button class="btn btn-secondary"
                                    id="refresh-btn"
                                    hx-get="{cp}/history/table"
                                    hx-target="#history-table"
                                    hx-vals='js:&#123;"size": jrcPageSize("history")&#125;'
                                    hx-include="[name='search'],[name='status-filter'],[name='jobType']"
                                    hx-disabled-elt="this">
                                <i class="bi bi-arrow-clockwise"></i> Aktualisieren
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="history-table"
         hx-get="{cp}/history/table"
         hx-trigger="load"
         hx-vals='js:&#123;"size": jrcPageSize("history"), "jobType": document.querySelector("[name=jobType]")?.value || "all", "status-filter": document.querySelector("[name=status-filter]")?.value || "all", "search": document.querySelector("[name=search]")?.value || ""&#125;'
         hx-swap="innerHTML">
        <div class="text-center py-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Lade Ausführungshistorie...</span>
            </div>
            <p class="mt-2">Lade Ausführungshistorie...</p>
        </div>
    </div>

    <script>
        // Auto-refresh every 5 seconds for processing jobs
        setInterval(() => {
            htmx.trigger('#history-table', 'load');
        }, 5000);
    </script>
{/content}