<div v-if="isLoading" data-template-id="loading-template"></div>

<div v-if="hasError" data-template-id="error-template"></div>

<div v-if="isLoaded">

<div class="row mb-4">

<div class="col">

<input class="form-control" data-filter-selector="table" placeholder="Enter filter">

</div>

</div>

<div class="row">

<div class="col">

<div v-if="records.length" class="table-responsive">

<table class="table table-striped click-to-highlight" data-sort>

<thead>

<tr>

<th>Id</th>

<th>Label</th>

<th>Number</th>

<th>Category</th>

<th>Date</th>

<th>Active</th>

<th>Comment</th>

</tr>

</thead>

<tbody>

<tr v-for="record in records">

<td><a v-bind:href="'#/record/' + record.id">{{ record.id }}</a></td>

<td class="text-nowrap">{{ record.label }}</td>

<td>{{ record.num_value }}</td>

<td>{{ record.category }}</td>

<td class="text-nowrap">{{ record.date_value }}</td>

<td v-format-yes-no="record.active"></td>

<td style="white-space: pre;">{{ record.comment }}</td>

</tr>

</tbody>

</table>

</div>

<button

v-else

class="btn btn-primary"

data-click-url="https://www.dataformsjs.com/data/example/entry-form/generate-sample-data"

data-action="refresh-plugins"

data-request-method="POST">

Generate Sample Records

</button>

</div>

</div>

</div>