{% load i18n %}
<div class="django-kv-config-widget" data-name="{{ widget.name }}"{% if widget.required_keys %} data-required-keys="{{ widget.required_keys|join:',' }}"{% endif %}{% if widget.default_keys_json %} data-key-types='{{ widget.default_keys_json|safe }}'{% endif %} data-allow-custom="{{ widget.allow_custom|lower }}"{% if widget.all_key_names %} data-all-keys='{{ widget.all_key_names|safe }}'{% endif %} data-placeholder-key="{% trans "Key name" %}" data-placeholder-value="{% trans "Value" %}"{% include "django/forms/widgets/attrs.html" %}>
  <table class="django-kv-config-table">
    <thead>
      <tr>
        <th class="django-kv-config-key-col">{% trans "Key" %}</th>
        <th class="django-kv-config-value-col">{% trans "Value" %}</th>
        <th class="django-kv-config-action-col">{% trans "Actions" %}</th>
      </tr>
    </thead>
    <tbody>
      {% for item in widget.items %}
      <tr{% if item.key in widget.required_keys %} class="django-kv-config-required-row"{% endif %} data-key="{{ item.key }}" data-type="{{ item.type }}">
        <td>{% if not widget.allow_custom and widget.default_keys %}
          <select name="{{ widget.name }}_keys__" class="django-kv-config-key-input"{% if item.key in widget.required_keys %} disabled{% endif %}>
            <option value="">---</option>
            {% for dk in widget.default_keys %}<option value="{{ dk }}"{% if dk == item.key %} selected{% endif %}>{{ dk }}</option>{% endfor %}
          </select>
          {% if item.key in widget.required_keys %}<input type="hidden" name="{{ widget.name }}_keys__" value="{{ item.key }}">{% endif %}
          {% else %}
          <input type="text" name="{{ widget.name }}_keys__" value="{{ item.key }}" class="django-kv-config-key-input" placeholder="{% trans "Key name" %}"{% if item.key in widget.required_keys %} readonly{% endif %}>
          {% endif %}</td>
        <td>
          {% if item.type == "bool" %}
          <select name="{{ widget.name }}_values__" class="django-kv-config-value-input">
            <option value=""{% if not item.value %} selected{% endif %}></option>
            <option value="true"{% if item.value == "true" %} selected{% endif %}>true</option>
            <option value="false"{% if item.value == "false" %} selected{% endif %}>false</option>
          </select>
          {% elif item.type == "number" or item.type == "int" %}
          <input type="number" name="{{ widget.name }}_values__" value="{{ item.value }}" class="django-kv-config-value-input" placeholder="{% if item.placeholder %}{{ item.placeholder }}{% else %}{% trans "Value" %}{% endif %}"{% if item.type == "int" %} step="1"{% endif %}{% if item.key in widget.required_keys %} aria-required="true"{% endif %}>
          {% else %}
          <textarea rows="1" name="{{ widget.name }}_values__" class="django-kv-config-value-input" placeholder="{% if item.placeholder %}{{ item.placeholder }}{% else %}{% trans "Value" %}{% endif %}"{% if item.key in widget.required_keys %} aria-required="true"{% endif %}>{{ item.value }}</textarea>
          {% endif %}
        </td>
        <td class="django-kv-config-action-col">
          <button type="button" class="django-kv-config-remove" tabindex="-1" title="{% trans "Delete" %}"{% if item.key in widget.required_keys %} disabled style="display:none"{% endif %}>✕</button>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <div class="django-kv-config-toolbar">
    <button type="button" class="django-kv-config-add">{% trans "+ Add" %}</button>
    <button type="button" class="django-kv-config-import">{% trans "Import" %}</button>
    <button type="button" class="django-kv-config-export">{% trans "Export" %}</button>
  </div>
  <div class="django-kv-config-modal" style="display:none">
    <div class="django-kv-config-modal-backdrop"></div>
    <div class="django-kv-config-modal-dialog">
      <textarea class="django-kv-config-modal-text" placeholder="{% trans "Paste YAML / JSON / KEY=VALUE format text..." %}"></textarea>
      <div class="django-kv-config-modal-actions">
        <button type="button" class="django-kv-config-modal-cancel" data-text-cancel="{% trans "Cancel" %}" data-text-close="{% trans "Close" %}">{% trans "Cancel" %}</button>
        <button type="button" class="django-kv-config-modal-confirm">{% trans "OK" %}</button>
      </div>
    </div>
  </div>
</div>