{{ define "content" }}
<div class="cols">
    <section>
        <h2>Set your status</h2>
        {{ if .form.Error }}
        <p>{{ .form.Error }}</p>
        {{ end }}
        {{ template "flash" .flash }}
        <form action="/add" method="post">
            <div style="margin-bottom: 1em">
                <div class="radio">
                    <input type="radio" id="face1" name="face" value="🙂" checked>
                    <label for="face1">🙂</label>
                </div>
                <div class="radio">
                    <input type="radio" id="face2" name="face" value="😎">
                    <label for="face2">😎</label>
                </div>
                <div class="radio">
                    <input type="radio" id="face3" name="face" value="😛">
                    <label for="face3">😛</label>
                </div>
                <div class="radio">
                    <input type="radio" id="face4" name="face" value="🥰">
                    <label for="face4">🥰</label>
                </div>
                <div class="radio">
                    <input type="radio" id="face5" name="face" value="👽">
                    <label for="face5">👽</label>
                </div>
                <div class="radio">
                    <input type="radio" id="face6" name="face" value="😱">
                    <label for="face6">😱</label>
                </div>
                <div class="radio">
                    <input type="radio" id="face7" name="face" value="🤗">
                    <label for="face7">🤗</label>
                </div>
                <div class="radio">
                    <input type="radio" id="face8" name="face" value="😯">
                    <label for="face8">😯</label>
                </div>
                <div class="radio">
                    <input type="radio" id="face9" name="face" value="🤒">
                    <label for="face9">🤒</label>
                </div>
                <div class="radio">
                    <input type="radio" id="face10" name="face" value="😡">
                    <label for="face10">😡</label>
                </div>
                <div class="radio">
                    <input type="radio" id="face11" name="face" value="🥺">
                    <label for="face11">🥺</label>
                </div>
                <div class="radio">
                    <input type="radio" id="face12" name="face" value="🥳">
                    <label for="face12">🥳</label>
                </div>
            </div>
            <div class="field">
                <textarea name="content" maxlength="140" placeholder="What's new?" required style="width: 100%; box-sizing: border-box; height: 100px;" autofocus></textarea>
            </div>
            <input type="submit" value="Submit">
        </form>
        <ul class="tools">
            <li><a href="/about/status-updater">status updater</a> bookmarklet</li>
            <li><a href="/current-status">status widget</a> for your homepage</li>
        </ul>
    </section>
    <section>
        <h2>Status stream</h2>
        {{ range .statuses }}
        <article class="status">
            {{ template "status" . }}
        </article>
        {{ end }}
    </section>
</div>
{{ end }}