{{define "board"}}
<div id="board" class="grid">
    {{range .records}}
    <article id="user-{{.id}}">
        <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="@delete('delete-record/{{.id}}')">Delete</button>
    </article>
    {{end}}
</div>
{{end}}

{{define "edit-user"}}
<article id="user-{{.id}}">
    <header>
        <h3>{{.name}}</h3>
        <p>{{.username}}</p>
    </header>
    <form>
        <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="@patch('patch-record/{{.id}}')">Save</button>
        <button class="secondary" data-on:click="@get('board')">Cancel</button>
</article>
{{end}}