{% from "tungsten/forms/macros.html" import wrapper, ui_action %}
{% call wrapper(field, v) %}
<div class="overflow-hidden rounded-lg ring-1 ring-gray-950/10 dark:ring-white/10">
  <table class="w-full table-fixed text-sm">
    <thead class="bg-gray-50 dark:bg-white/5">
      <tr class="divide-x divide-gray-200 dark:divide-white/10">
        <th class="px-3 py-2 text-start font-medium text-gray-700 dark:text-gray-200">{{ v.key_label }}</th>
        <th class="px-3 py-2 text-start font-medium text-gray-700 dark:text-gray-200">{{ v.value_label }}</th>
        {% if v.deletable and not v.disabled %}<th class="w-10"></th>{% endif %}
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-200 dark:divide-white/10">
      {% for row in v.rows %}
      <tr class="divide-x divide-gray-200 dark:divide-white/10">
        <td><input name="{{ v.path }}.{{ loop.index0 }}.key" value="{{ row.key }}" {% if v.disabled or not v.editable_keys %}readonly{% endif %}
                   class="w-full border-0 bg-transparent px-3 py-2 text-sm text-gray-950 focus:ring-0 dark:text-white"></td>
        <td><input name="{{ v.path }}.{{ loop.index0 }}.value" value="{{ row.value }}" {% if v.disabled %}readonly{% endif %}
                   class="w-full border-0 bg-transparent px-3 py-2 text-sm text-gray-950 focus:ring-0 dark:text-white"></td>
        {% if v.deletable and not v.disabled %}
        <td class="px-1 text-center">{{ ui_action(form, 'keyvalue.remove:' ~ v.path ~ ':' ~ loop.index0, __('Delete'), 'tw-icon-btn h-7 w-7 ' ~ colors.ICON_BUTTON.danger, 'trash-2') }}</td>
        {% endif %}
      </tr>
      {% else %}
      <tr><td colspan="3" class="px-3 py-3 text-center text-gray-500">{{ __('No entries.') }}</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% if v.addable and not v.disabled %}
<div>{{ ui_action(form, 'keyvalue.add:' ~ v.path, v.add_label, 'tw-btn tw-btn-sm ' ~ colors.BUTTON.gray) }}</div>
{% endif %}
{% endcall %}