python-tdd/src/templates/apps/dashboard/_partials/_applet-palette.html

<section
    id="id_applet_palette"
    class="palette"
    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
>
    <h2>Palettes</h2>
    <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 %}"
                    data-palette="{{ palette.name }}"
                    data-label="{{ palette.label }}"
                    data-locked="{{ palette.locked|yesno:'true,false' }}"
                    data-unlocked-date="{% if not palette.locked %}Default{% endif %}"
                    data-shoptalk="Placeholder"
                >
                    {% if not palette.locked %}
                        <button type="button" class="btn btn-confirm palette-ok" hidden>OK</button>
                    {% else %}
                        <button type="button" class="btn btn-disabled palette-ok" hidden>&times;</button>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</section>