{{ template "preamble.html" }}
<h1>Training Areas</h1>
<p>
 <a href="/training-areas/add"><button> <div class="tile-icon"><i class="fas fa-map-marker-alt"></i></div> Add Training Area</button></a>
 <a href="/trainers/add"><button><div class="tile-icon"><i class="fas fa-user-plus"></i></div> Add Trainer</button></a>
</p>

<table>
    <thead>
        <tr>
            <th>Training Area</th>
            {{range $.Trainers}}
            <th>{{.Name}}</th>
            {{end}}
        </tr>
    </thead>
    <tbody>
        {{range $i, $currentArea := .Areas}}
        <tr>
            <td>{{.Name}}</td>
            {{range $.Trainers}}
            <td>
                <form action="/training-areas/assign-trainer" method="post" style="display:inline;">
                    <input type="hidden" name="training_area_id" value="{{$currentArea.ID}}">
                    <input type="hidden" name="trainer_id" value="{{.ID}}">
                    <input type="checkbox" name="assigned" value="true" {{if $currentArea.IsTrainerAssigned .ID}}checked{{end}} onchange="this.form.submit()">
                </form>
            </td>
            {{end}}
        </tr>
        {{end}}
    </tbody>
</table>
{{template "epilogue.html" }}