ubicloud/views/components/config_card.erb

<%# locals: (title:, config:, extra_class:, name:, errors:) %>

<div class="bg-white rounded-lg shadow overflow-hidden mb-6 <%= extra_class %>">
  <div class="px-6 py-4 border-b border-gray-200">
    <h3 class="text-lg font-medium text-gray-900"><%= title %></h3>
  </div>

  <div class="divide-y divide-gray-200 w-full max-h-64 overflow-y-auto">
    <% config.each_with_index do |(key, value), index| %>
      <% error = errors[name + "." + key] %>
      <% next if key.empty? && value.empty? %>
        <div
          class="px-6 py-2 hover:bg-gray-50 config-group group font-mono"
          data-config-id="<%= index %>"
        >
          <div class="flex items-center justify-between">
            <div class="flex flex-wrap items-center config-entry">
              <input
                type="text"
                class="border rounded py-1 focus:ring-blue-500 focus:border-blue-500 mr-2 <%= (error && !error.is_a?(Array)) ? "border-red-500" : "" %>"
                value="<%= key %>"
                name="<%= name %>_keys[]"
                required
              >

              <input
                type="text"
                value="<%= value %>"
                class="border rounded py-1 focus:ring-blue-500 focus:border-blue-500 <%= error ? "border-red-500" : "" %>"
                name="<%= name %>_values[]"
              >

              <% if error %>
                <span
                  class="
                    error inline-block h-8 w-54 py-2 px-2 max-w-54 text-xs
                    text-red-600 bg-red-100 rounded
                  "
                  aria-live="polite"
                >
                  <% if error.is_a?(Array) %>
                    <% error.each do |error| %>
                      <%= error %>
                      <br>
                    <% end %>
                  <% else %>
                    <%= error %>
                  <% end %>
                </span>
              <% end %>
            </div>
            <div class="min-w-16 flex items-center ml-2">
              <%== part("components/button", type: "danger", text: "", icon: "hero-trash", extra_class: "delete-config-btn") if @edit_perm %>
            </div>
          </div>
        </div>
      <% end %>

      <!-- Hidden row for generating new entries -->
      <div
        class="
          px-6 py-2 hover:bg-gray-50 group config-placeholder-group
          font-mono hidden
        "
        data-config-id=""
      >
        <div class="flex items-center justify-between">
          <div class="flex flex-wrap items-center config-entry">
            <input
              type="text"
              class="
                border rounded py-1 focus:ring-blue-500
                focus:border-blue-500 mr-2
              "
              value=""
              name="<%= name %>_keys[]"
              disabled
            >

            <input
              type="text"
              value=""
              class="
                border rounded py-1 focus:ring-blue-500
                focus:border-blue-500
              "
              name="<%= name %>_values[]"
              disabled
            >
            <span
              class="
                error inline-block h-8 w-54 py-2 px-2 max-w-54 text-xs
                text-red-600 hidden bg-red-100 rounded
              "
              aria-live="polite"
            ></span>
          </div>
          <div class="min-w-16 flex items-center ml-2">
            <%== part("components/button", type: "danger", text: "", icon: "hero-trash", extra_class: "delete-config-btn") %>
          </div>
        </div>
      </div>

      <!-- Empty row for new configuration -->
      <% if @edit_perm %>
        <div class="px-6 py-2 hover:bg-gray-50 group new-config font-mono">
          <div class="flex items-center justify-between">
            <div class="flex flex-wrap items-center">
              <input
                type="text"
                class="
                  border rounded py-1 focus:ring-blue-500
                  focus:border-blue-500 mr-2
                "
                placeholder="New Key"
                name="<%= name %>_keys[]"
              >

              <input
                type="text"
                placeholder="New Value"
                class="
                  border rounded py-1 focus:ring-blue-500
                  focus:border-blue-500
                "
                name="<%= name %>_values[]"
              >
              <span
                class="
                  error inline-block h-8 w-54 py-2 px-2 max-w-54 text-xs
                  text-red-600 hidden bg-red-100 rounded
                "
                aria-live="polite"
              ></span>
            </div>
            <div class="min-w-16 flex items-center ml-2">
              <%== part("components/button", text: "", type: "safe", icon: "hero-plus", extra_class: "add-config-btn") %>
            </div>
          </div>
        </div>
      <% end %>
  </div>
</div>