<div class="row">
    <div class="col-lg-12">
        <p>
            Wählen Sie das Mitglied aus, welches an Corona erkrankt ist und bestimmen Sie den Zeitraum.
        </p>
    </div>
</div>
<form data-id="form-corona-tracking">
    <div class="row">
        <div class="col-md-3">
            <p class="font-bold">
                Mitglied
            </p>
            <select name="profileId"
                    required
                    class="form-control">
                <% for ( let mi = 0; mi < members.length; mi++ ) {  %>
                    <option value="<%= members[ mi ].id %>">
                        <%= members[ mi ].getName() %>
                    </option>
                <% }    %>
            </select>
        </div>
        <div class="col-md-3">
            <p class="font-bold">
                Zeitraum von
            </p>
            <input type="date"
                   name="dateFrom"
                   value="<%= moment().subtract( '30', 'days' ).format( 'YYYY-MM-DD' ) %>"
                   required
                   class="form-control" />
        </div>
        <div class="col-md-3">
            <p class="font-bold">
                Zeitraum bis
            </p>
            <input type="date"
                   name="dateUntil"
                   value="<%= moment().subtract( '14', 'days' ).format( 'YYYY-MM-DD' ) %>"
                   required
                   class="form-control" />
        </div>
        <div class="col-md-3">
            <p class="font-bold">
                &nbsp;
            </p>
            <button data-id="btnTrack"
                    type="button"
                    class="btn btn-primary btn-block">Suchen</button>
        </div>
    </div>
</form>

<div class="hr-line-dashed"></div>

<div class="row" style="margin-top: 24px">
    <div class="col-lg-12">
        <h4>Kontaktpersonen im angegebenen Zeitraum</h4>
        <div class="table-responsive">
            <table data-id="corona-tracking-result-datatable"
                   class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Anschrift</th>
                    <th>Telefon</th>
                    <th>Anzahl Kontakte</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>