{{ define "content" }}<h2>Create a new repository.</h2><form method="post">    {{ .csrfField }}    <label for="name">Name your repo.</label>    <div class="name-container">        <span id="handle"><strong>~{{.user.Handle}}</strong> /</span><input id="name" name="name" type="text" placeholder="dotfiles-2000" required>    </div>    <label for="description">What does it contain?</label>    <input id="description" name="description" type="text" placeholder="Windows 2000-themed dotfiles.">    <span class="visibility-container">        <label for="visibility">Visibility?</label>        <select name="visibility" id="visibility" required>            <option value="private">Private</option>            <option value="public">Public</option>        </select>    </span>    <button type="submit">Create repository.</button></form><style>    input:not(.handle-container input, [type="checkbox"]), button[type="submit"] {        width: 100%;    }    .name-container {        display: flex;        padding: 0;        input {            flex: 1;            min-width: 0;            margin: 0;        }        span {            padding: var(--gap);            margin: 0;            border: 1px solid var(--link-col);            border-right: none;        }    }    .visibility-container, .visibility-container > select {        width: 100%;        display: flex;        flex-direction: row;        flex: 1;        align-items: center;        gap: var(--gap);    }</style><script>    const input = document.querySelector('input[name="name"]');    input.addEventListener("input", function (e) {        e.target.value = e.target.value.toLowerCase().replaceAll(" ", "-");    });</script>{{ end }}