{{define "board"}}
<div id="board" class="grid">
    {{range .records}}
    <article>
        <header>
            <h3>{{.name}}</h3>
            <p>@{{.username}}</p>
        </header>
        <form inert>
            <label>
                Email
                <input type="email" value="{{.email}}" />
            </label>

            <label>
                Phone
                <input type="tel" value="{{.phone}}" />
            </label>

            <label>
                Website
                <input type="url" value="{{.website}}" />
            </label>

            <label>
                Company
                <input type="text" value="{{.company}}" />
            </label>

            <fieldset role="group">
                <label>
                    Street
                    <input type="text" value="{{.street}}" />
                </label>

                <label>
                    Suite
                    <input type="text" value="{{.suite}}" />
                </label>
            </fieldset>

            <fieldset role="group">
                <label>
                    City
                    <input type="text" value="{{.city}}" />
                </label>

                <label>
                    Zipcode
                    <input type="text" value="{{.zipcode}}" />
                </label>
            </fieldset>
            </label>
        </form>
        <footer class="grid">
            <button class="primary" data-on:click="@get('edit-record/{{.id}}')">Edit</button>
            <button class="secondary" data-on:click="@get('delete-record/{{.id}}')">Delete</button>
    </article>
    {{end}}
</div>
{{end}}