{% 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 %}
            <div class="menu-btns">
                <button type="submit" class="btn btn-confirm">OK</button>
                <button type="button" id="id_applet_menu_cancel" class="btn btn-cancel">NVM</button>
            </div>
        </form>
    </div>

    {% for entry in applets %}
        {% if entry.visible %}
            {% if entry.applet.slug == "new-list" %}
                <section
                    id="id_applet_new_list"
                    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
                >
                    <h2>Start a new to-do list</h2>
                    {% url "new_list" as form_action %}
                    {% include "apps/dashboard/_partials/_form.html" with form=form form_action=form_action %}
                </section>
            {% elif entry.applet.slug == "my-lists" %}
                <section
                    id="id_applet_my_lists"
                    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
                >
                    <a href="{% url 'my_lists' user.id %}" class="my-lists-main">My lists:</a>
                    <div class="my-lists-container">
                        <ul>
                            {% for list in recent_lists %}
                                <li>
                                    <a href="{{ list.get_absolute_url }}">{{ list.name }}</a>
                                </li>
                            {% empty %}
                                <li>No lists yet.</li>
                            {% endfor %}
                        </ul>
                    </div>
                </section>
            {% elif entry.applet.slug == "username" %}
                <section
                    id="id_applet_username"
                    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
                >
                    <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>
            {% 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 }};"
                >
                    <div class="palette-scroll">
                        {% 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 %}
                    </div>
                </section>
            {% endif %}
        {% endif %}
    {% endfor %}
</div>