<div id="template-component-single-hello" class="space-y-2" >
  <button class="btn" id="set-foo-template-component-single-hello" phx-click={JS.push("psb-assign", value: %{label: "foo"})}>Set label to foo</button>
  <button class="btn" id="set-bar-template-component-single-hello" phx-click={JS.push("psb-assign", value: %{label: "bar"})}>Set label to bar</button>
  <button class="btn" id="toggle-status-template-component-single-hello" phx-click={JS.push("psb-toggle", value: %{attr: :status})}>Toggle status</button>
  <button class="btn" id="set-status-true-template-component-single-hello" phx-click={JS.push("psb-assign", value: %{status: true})}>Set status to true</button>
  <button class="btn" id="set-status-false-template-component-single-hello" phx-click={JS.push("psb-assign", value: %{status: false})}>Set status to false</button>
  <div class="mt-2">
    <.template_component label="hello" />
  </div>
</div>

<div id="template-component-single-world" class="space-y-2" >
  <button class="btn" id="set-foo-template-component-single-world" phx-click={JS.push("psb-assign", value: %{label: "foo"})}>Set label to foo</button>
  <button class="btn" id="set-bar-template-component-single-world" phx-click={JS.push("psb-assign", value: %{label: "bar"})}>Set label to bar</button>
  <button class="btn" id="toggle-status-template-component-single-world" phx-click={JS.push("psb-toggle", value: %{attr: :status})}>Toggle status</button>
  <button class="btn" id="set-status-true-template-component-single-world" phx-click={JS.push("psb-assign", value: %{status: true})}>Set status to true</button>
  <button class="btn" id="set-status-false-template-component-single-world" phx-click={JS.push("psb-assign", value: %{status: false})}>Set status to false</button>
  <div class="mt-2">
    <.template_component label="world" />
  </div>
</div>

<.template_component
  label={"hey"}
  foo="zaehjzjjhejkazhekjazhejhazekzekjhazek jhzaejahzekjahzejhejkazhekjazhejhazekj"
 />

<div id="template-component-group-one" class="space-y-2" >
  <button class="btn" id="set-foo-template-component-group-one" phx-click={JS.push("psb-assign", value: %{label: "foo"})}>Set label to foo</button>
  <button class="btn" id="set-bar-template-component-group-one" phx-click={JS.push("psb-assign", value: %{label: "bar"})}>Set label to bar</button>
  <button class="btn" id="toggle-status-template-component-group-one" phx-click={JS.push("psb-toggle", value: %{attr: :status})}>Toggle status</button>
  <button class="btn" id="set-status-true-template-component-group-one" phx-click={JS.push("psb-assign", value: %{status: true})}>Set status to true</button>
  <button class="btn" id="set-status-false-template-component-group-one" phx-click={JS.push("psb-assign", value: %{status: false})}>Set status to false</button>
  <div class="mt-2">
    <.template_component label="one" />
  </div>
</div>

<div id="template-component-group-two" class="space-y-2" >
  <button class="btn" id="set-foo-template-component-group-two" phx-click={JS.push("psb-assign", value: %{label: "foo"})}>Set label to foo</button>
  <button class="btn" id="set-bar-template-component-group-two" phx-click={JS.push("psb-assign", value: %{label: "bar"})}>Set label to bar</button>
  <button class="btn" id="toggle-status-template-component-group-two" phx-click={JS.push("psb-toggle", value: %{attr: :status})}>Toggle status</button>
  <button class="btn" id="set-status-true-template-component-group-two" phx-click={JS.push("psb-assign", value: %{status: true})}>Set status to true</button>
  <button class="btn" id="set-status-false-template-component-group-two" phx-click={JS.push("psb-assign", value: %{status: false})}>Set status to false</button>
  <div class="mt-2">
    <.template_component label="two" />
  </div>
</div>