Set assigns

Technical component illustrating how templates and assign/toggle can be used together.

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

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