{% set _l = l if l is defined else None %}
<tr data-light="{{ _l.name }}">
  <td class="mono">{{ _l.name }}</td>
  <td>{{ _l.userName or "" }}</td>
  <td class="state-cell">
    {% if _l.state == 4 %}<span class="badge ok">ON</span>
    {% elif _l.state == 2 %}<span class="badge">OFF</span>
    {% elif _l.state == 8 %}<span class="badge warn">DIM</span>
    {% else %}<span class="badge">UNKNOWN</span>{% endif %}
  </td>
  <td>
    <button hx-post="/lights/{{ _l.name }}/state"
            hx-vals='{"state":4}'
            hx-target="closest tr" hx-swap="outerHTML">On</button>
    <button hx-post="/lights/{{ _l.name }}/state"
            hx-vals='{"state":2}'
            hx-target="closest tr" hx-swap="outerHTML">Off</button>
    <button hx-get="/lights/{{ _l.name }}/edit"
            hx-target="closest tr" hx-swap="outerHTML">Edit</button>
    <button class="danger"
            hx-delete="/lights/{{ _l.name }}"
            hx-target="closest tr" hx-swap="outerHTML"
            hx-confirm="Delete light {{ _l.name }}?">Delete</button>
  </td>
</tr>