{{/* Copyright 2024 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. */}}

{{define "content"}}
<div hx-ext="sse" sse-connect="/events/">
    <div id="build-exec-result">
        <form action="." method="POST" style="display: flex; align-items: center; gap: 4px;">
            <md-filled-text-field label="outdir" name="outdir" value="out/Default"{{if .activeBuildRunning}} disabled{{end}}></md-filled-text-field>
            <md-filled-text-field label="target" name="target" value="base"{{if .activeBuildRunning}} disabled{{end}}></md-filled-text-field>
            <md-filled-button{{if .activeBuildRunning}} disabled{{end}}>
                <md-icon slot="icon">play_arrow</md-icon>
                <span>Run build</span>
            </md-filled-button>
            {{if .activeBuildRunning}}<input type="hidden" name="stopbuild" value="stopbuild">{{end}}
            <md-filled-tonal-button{{if not .activeBuildRunning}} disabled{{end}} onclick="alert('Not yet implemented!')">
                <md-icon slot="icon">stop</md-icon>
                <span>Stop</span>
            </md-filled-tonal-button>
        </form>
    </div>
    <div style="display: grid; grid-template-columns: 300px auto;">
        <div>
            <h3>Build status</h3>
            <div sse-swap="buildstatus" hx-target="this" hx-swap="innerHTML"></div>
            <h3>Log</h3>
            <div sse-swap="buildlog" hx-target="this" hx-swap="beforeend">
                {{if .activeBuildRunning}}{{.activeBuildLog}}{{end}}
            </div>
        </div>
        <div>
            <h3>Active steps</h3>
            <div sse-swap="activesteps" hx-target="this" hx-swap="innerHTML"></div>
        </div>
    </div>
</div>
{{end}}