{{ 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 }}