<%# locals: (form:) %>

<% condition = form.object %>
<% rule = condition.rule %>

<li data-controller="rule--conditions element-removal" class="border border-secondary rounded-md p-4 space-y-3">

  <%= form.hidden_field :condition_type, value: "compound" %>

  <div class="flex items-center justify-between gap-2">
    <div class="flex items-center gap-2">
      <% unless form.index == 0 %>
        <div class="pl-2">
          <span class="font-medium uppercase text-xs">and</span>
        </div>
      <% end %>
      <p class="text-sm text-secondary">match</p>
      <%= form.select :operator, [["all", "and"], ["any", "or"]], { container_class: "w-fit" }, data: { rules_target: "operatorField" } %>
      <p class="text-sm text-secondary">of the following conditions</p>
    </div>

    <%= icon(
      "trash-2",
      size: "sm",
      as_button: true,
      data: { action: "element-removal#remove" }
    ) %>
  </div>

  <%# Sub-condition template, used by Stimulus controller to add new sub-conditions dynamically %>
  <template data-rule--conditions-target="subConditionTemplate">
    <%= form.fields_for :sub_conditions, Rule::Condition.new(parent: condition, condition_type: rule.condition_filters.first.key), child_index: "IDX_PLACEHOLDER" do |scf| %>
      <%= render "rule/conditions/condition", form: scf %>
    <% end %>
  </template>

  <ul data-rule--conditions-target="subConditionsList" class="space-y-3">
    <%= form.fields_for :sub_conditions do |scf| %>
      <%= render "rule/conditions/condition", form: scf, show_prefix: false %>
    <% end %>
  </ul>

  <%= render ButtonComponent.new(
    text: "Add condition",
    leading_icon: "plus",
    variant: "ghost",
    data: { action: "rule--conditions#addSubCondition" }
  ) %>
</li>
