<section
    id="id_applet_username"
    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
>
    <h2>Username</h2>
    <form method="POST" action="{% url "set_profile" %}">
        {% csrf_token %}
        <div class="username-field">
            <span class="username-at">@</span>
            <input
                id="id_new_username"
                name="username"
                required
                value="{{ user.username|default:'' }}"
                autocomplete="off"
                placeholder="username"
                data-original="{{ user.username|default:'' }}"
                oninput="this.closest('form').querySelector('.save-btn').hidden = (this.value === this.dataset.original)"
                onblur="this.scrollLeft = 0"
            >
        </div>
        <button type="submit" class="btn btn-confirm save-btn" hidden>OK</button>
    </form>
</section>