{{ define "content" }}
<style>
    #sillywordz {
        padding: .5em;
        background-color: azure;
        border: 1px solid midnightblue;
    }

    #sillywordz-username {
        margin-bottom: .5em;
    }

    #sillywordz-content {
        margin: 0 1em 0.5em 1em;
    }

    @media (min-width: 650px) {
        .cols {
            grid-template-columns: 1fr 1fr;
            grid-gap: 2em;
        }
    }
</style>

<div class="cols">
    <div>
        <h1>Sillywordz widget</h1>
        <form method="get" action="/current-status">
            <table>
                <tr>
                    <td>name:</td>
                    <td><input type="text" name="name" id="name" value="{{ .name }}"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="create HTML"/></td>
                </tr>
            </table>
        </form>
        <p>Paste this code into your HTML file:</p>
        <textarea style="width: 100%; max-width: 500px; height: 75px;"><div id="sillywordz"><div id="sillywordz-username"></div><div id="sillywordz-number"></div><div id="sillywordz-content"></div></div><script src="https://sillywordz.kissing.computer/current-status.js?name={{ .name }}"></script></textarea>
        <p>Paste this code into your CSS file:</p>
        <textarea style="width: 100%; max-width: 500px; height: 175px;">#sillywordz {
    padding: .5em;
    background-color: azure;
    border: 1px solid midnightblue;
}

#sillywordz-number {
   margin-bottom: 1.2em;
}
#sillywordz-username {
    margin-bottom: .5em;
}
#sillywordz-content {
    margin: 0 1em 0.5em 1em;
}</textarea>
        <p>Make it your own! The CSS above is only an example. Tweak it so that it integrates well with your sites's colors.</p>
    </div>
    <div>
        <h2>Preview</h2>
        {{ if .name }}
        <script src="https://sillywordz.kissing.computer/current-status.js?name={{ .name }}"></script>
        {{ else }}
        <p>Add your name and click "generate HTML" to see a preview.</p>
        {{ end }}
    </div>
</div>
{{ end }}