frenzy/lib/frenzy_web/live/filter/filter_live.html.heex

<div id={@id}>
  <%= form_for @filter, "#", [phx_change: :update_filter, phx_target: "##{@parent_id}"], fn f -> %>
    <div class="row mb-2">
      <label class="col-sm-2 col-form-label" for={"#{@id}-mode"}>Mode</label>
      <div class="col-sm-10">
        <%= select f, :mode, @modes, id: "#{@id}-mode", class: "form-select" %>
      </div>
    </div>
    <div class="row mb-2">
      <label class="col-sm-2 col-form-label" for={"#{@id}-score"}>Score</label>
      <div class="col-sm-10">
        <%= number_input f, :score, id: "#{@id}-score", class: "form-control" %>
      </div>
    </div>
  <% end %>
  <%= for {rule, index} <- Enum.with_index(@filter["rules"]) do %>
    <div class="card mt-2">
      <div class="card-header container-fluid">
        <div class="row">
          <div class="col">
            <h4 class="m-0">Rule <%= index %></h4>
          </div>
          <div class="col text-end">
            <button phx-click="delete_rule" phx-value-index={index} phx-target={"##{@id}"} class="btn btn-danger btn-sm">Delete</button>
          </div>
        </div>

      </div>
      <div class="card-body">
        <%= live_component @socket, FrenzyWeb.FilterRuleLive, id: "#{@id}-rule-#{index}", parent_id: @parent_id, rule: rule, index: index %>
      </div>
    </div>
  <% end %>
  <%= form_for :rule, "#", [class: "mt-2", phx_submit: :add_rule, phx_target: "##{@parent_id}"], fn f -> %>
    <%= submit "Add Rule", class: "btn btn-primary" %>
  <% end %>
</div>