neiam /lambent_ex

<div class="overflow-x-auto">
  <p class="text-sm opacity-60 my-2">
    Clamps are ceilings, not levels. A machine's own brightness still runs underneath;
    the global clamp scales everything it produces, and a place clamp scales whatever
    a link sends to a device sitting in that place. The upper slider is the target,
    the lower one is where the walk has actually got to.
  </p>
  <table class="table table-zebra w-full">
    <thead>
      <tr>
        <th>Clamp</th>
        <th>Devices</th>
        <th class="w-1/3">Brightness</th>
        <th>Fade</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          <i class="fa-solid fa-fw fa-earth-americas"></i> Global
        </th>
        <td><%= map_size(@devices) %></td>
        <td>
          <.clamp_sliders walk={@global} />
        </td>
        <td>
          <form phx-change="rate">
            <select name="rate" class="select select-bordered select-sm">
              <%= for {rate, name} <- fades() do %>
                <option value={rate} selected={rate == @global.rate}><%= name %></option>
              <% end %>
              <%= if B.fade_name(@global.rate) == nil do %>
                <option value={@global.rate} selected><%= @global.rate %>ms</option>
              <% end %>
            </select>
          </form>
        </td>
        <td>
          <div class="flex gap-1">
            <button class="btn btn-circle" phx-click="dimmer">
              <i class="fa-regular fa-2x fa-lightbulb"></i>
            </button>
            <button class="btn btn-circle" phx-click="brighter">
              <i class="fa-solid fa-2x fa-lightbulb"></i>
            </button>
          </div>
        </td>
      </tr>
      <%= for place <- places(@devices, @places) do %>
        <% w = walk(@places, place) %>
        <tr>
          <th><i class="fa-solid fa-fw fa-location-dot"></i> <%= place %></th>
          <td><%= devices_in(@devices, place) %></td>
          <td>
            <.clamp_sliders walk={w} place={place} />
          </td>
          <td>
            <form phx-change="rate">
              <input type="hidden" name="place" value={place} />
              <select name="rate" class="select select-bordered select-sm">
                <%= for {rate, name} <- fades() do %>
                  <option value={rate} selected={rate == w.rate}><%= name %></option>
                <% end %>
                <%= if B.fade_name(w.rate) == nil do %>
                  <option value={w.rate} selected><%= w.rate %>ms</option>
                <% end %>
              </select>
            </form>
          </td>
          <td>
            <div class="flex gap-1">
              <button class="btn btn-circle" phx-click="dimmer" phx-value-place={place}>
                <i class="fa-regular fa-2x fa-lightbulb"></i>
              </button>
              <button class="btn btn-circle" phx-click="brighter" phx-value-place={place}>
                <i class="fa-solid fa-2x fa-lightbulb"></i>
              </button>
              <%= if Map.has_key?(@places, place) do %>
                <button
                  class="btn btn-circle btn-outline"
                  phx-click="clear"
                  phx-value-place={place}
                  title="Drop the clamp on this place"
                >
                  <i class="fa-solid fa-2x fa-xmark"></i>
                </button>
              <% end %>
            </div>
          </td>
        </tr>
      <% end %>
      <%= if places(@devices, @places) == [] do %>
        <tr>
          <th colspan="5">
            No places yet. Give a device a Place on the Devices page and it shows up here.
          </th>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>