{{ define "content" }}
<div class="cols">
    <section>
        <h1>Current Status 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>Past this code into your HTML file:</p>
        <textarea id="code-html" style="width: 100%; height: 75px;"></textarea>
    </section>
    <section>
        <h2>Preview</h2>
        {{ if .name }}
        <script src="https://status.cafe/current-status.js?name={{ .name }}"></script>
        {{ else }}
        <p>Add your name and click "generate HTML" to see a preview.</p>
        {{ end }}
    </section>
</div>
<script>
    function getHTML(name) {
        return '<s'+'cript src="https://status.cafe/current-status.js?name=' + name + '"></s'+'cript>'
    }
    function preview() {
        const name = document.getElementById("name").value
        if (name) {
            const code = getHTML(document.getElementById("name").value)
            document.getElementById("code-html").value = code
        }
    }
    preview()
</script>
{{ end }}