{% load lyric_extras %}
<div id="id_applets_container">
    <div id="id_applet_menu" style="display:none;">
        <form
        hx-post="{% url "toggle_applets" %}"
        hx-target="#id_applets_container"
        hx-swap="outerHTML"
        >
            {% csrf_token %}
            {% for entry in applets %}
                <label>
                    <input
                    type="checkbox"
                    name="applets"
                    value="{{ entry.applet.slug }}"
                    {% if entry.visible %}checked{% endif %}
                    >
                    {{ entry.applet.name }}
                </label>
            {% endfor %}
            <button type="submit" class="btn btn-confirm">OK</button>
        </form>
    </div>

    {% for entry in applets %}
        {% if entry.visible %}
            {% if entry.applet.slug == "username" %}
                <section
                    id="id_applet_username"
                    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
                    >
                    <h1>{{ user|display_name }}</h1>
                    <div class="form-container">
                        <form method="POST" action="{% url "set_profile" %}">
                            {% csrf_token %}
                            <input
                            id="id_new_username"
                            name="username"
                            class="form-control"
                            required
                            value="{{ user.username|default:'' }}"
                            >
                        </form>
                    </div>
                </section>
            {% elif entry.applet.slug == "palette" %}
                <section
                    id="id_applet_palette"
                    class="palette"
                    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
                >
                    {% for palette in palettes %}
                        <div class="palette-item">
                            <div class="swatch {{ palette.name }}{% if user_palette == palette.name %} active{% endif %}{% if palette.locked %} locked{% endif %}"></div>
                            {% if not palette.locked %}
                                <form method="POST" action="{% url "set_palette" %}">
                                    {% csrf_token %}
                                    <button type="submit" name="palette" value="{{ palette.name }}" class="btn btn-confirm">OK</button>
                                </form>
                            {% else %}
                                <span class="btn btn-disabled">&times;</span>
                            {% endif %}
                        </div>
                    {% endfor %}
                </section>
            {% endif %}
        {% endif %}
    {% endfor %}
</div>