{% extends "_layout.html" %}
{% block title %}Train{% endblock %}
{% block content %}
<div class="page-head">
    <h2>Avvia training</h2>
    <div class="queue-info">Coda: <span id="queue-count">–</span></div>
</div>

<form id="train-form" class="form-row">
    <label>Modello<select name="model_id" id="f-model"></select></label>
    <label>Branch<select name="branch" id="f-branch"></select></label>
    <label>Commit<select name="patch" id="f-patch"></select></label>
    <label>Versione<input type="text" name="version" placeholder="1.0.0" required></label>
    <label>Dataset<select name="dataset_id" id="f-dataset"></select></label>
    <button type="submit" class="prominent">Avvia</button>
</form>

<section id="live-panel" class="hidden">
    <h3>Training <code id="live-id"></code> — <span id="live-status">queued</span></h3>
    <div class="charts">
        <canvas id="chart-loss"></canvas>
        <canvas id="chart-cpu"></canvas>
    </div>
    <pre id="live-logs" class="logs"></pre>
</section>

<section>
    <h3>Recenti</h3>
    <div id="recent-trainings" class="list"></div>
</section>
{% endblock %}
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="/static/js/train.js"></script>
{% endblock %}