neiam /lambent_ex

<div class="overflow-x-auto">
  <%= if @live_action in [:new, :edit, :bulk] do %>
    <.modal
      :if={@live_action in [:new, :edit, :bulk]}
      return_to={~p"/cfg/links"}
      id="new"
      show
      on_cancel={JS.navigate(~p"/cfg/links")}
    >
      <.live_component
        :if={@live_action in [:new, :edit]}
        module={LambentEx.LinksLive.FormComponent}
        id={:new}
        title={@page_title}
        action={@live_action}
        link={@link}
        return_to={~p"/cfg/links"}
        machines={@machines}
        devices={@devices}
        navigate={~p"/cfg/links"}
      />
      <.live_component
        :if={@live_action in [:bulk]}
        module={LambentEx.LinksLive.BulkFormComponent}
        id={:bulk}
        title={@page_title}
        action={@live_action}
        link={@link}
        return_to={~p"/cfg/links"}
        machines={@machines}
        devices={@devices}
        navigate={~p"/cfg/links"}
      />
    </.modal>
  <% end %>
  <div class="hidden lg:block">
    <table class="table table-zebra w-full">
      <!-- head -->
      <thead>
        <tr>
          <th>Name</th>
          <th>Source</th>
          <th>Target</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <!-- row 1 -->
        <%= if Enum.empty?(@links) do %>
          <tr>
            <th colspan="6">No links yet, create some using the controls in the corner.</th>
          </tr>
        <% end %>
        <%= for {k,v} <- @links do %>
          <tr>
            <th><%= k %></th>
            <td><%= v[:source] %></td>
            <td>
              <%= @devices |> Map.get(v[:target], %{}) |> Map.get("name") || v[:target] %>
              <%= if chans(@devices, v[:target]) > 1 do %>
                <div class="badge badge-outline">
                  ch <%= v[:chan] %>
                </div>
              <% end %>
            </td>
            <td>
              <%= if v[:enabled] == true do %>
                <a
                  class="btn btn-secondary btn-outline btn-circle"
                  phx-click="toggle"
                  phx-value-tgt={k}
                >
                  <i class="fa-solid fa-2x fa-cog fa-spin"></i>
                </a>
              <% else %>
                <a
                  class="btn btn-primary btn-outline btn-circle"
                  phx-click="toggle"
                  phx-value-tgt={k}
                >
                  <i class="fa-solid fa-2x fa-cog"></i>
                </a>
              <% end %>
              <%= if v[:persist] == true do %>
                <a class="btn btn-accent btn-circle" phx-click="persist" phx-value-tgt={v[:name]}>
                  <i class="fa-solid fa-2x fa-thumbtack"></i>
                </a>
              <% else %>
                <a
                  class="btn btn-accent btn-outline btn-circle"
                  phx-click="persist"
                  phx-value-tgt={v[:name]}
                >
                  <i class="fa-solid fa-2x fa-thumbtack"></i>
                </a>
              <% end %>
              <a class="btn btn-error btn-outline btn-circle" phx-click="quit" phx-value-tgt={k}>
                <i class="fa-solid fa-2x fa-xmark"></i>
              </a>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
  <div class="block lg:hidden">
    <%= if Enum.empty?(@links) do %>
      <div class="card card-compact w-full bg-primary text-primary-content my-2">
        <div class="card-body">
          <h2 class="card-title">
            No links yet, Create some via the controls above.
          </h2>
        </div>
      </div>
    <% end %>
    <%= for {k,v} <- @links do %>
      <div class="card card-compact w-full bg-primary text-primary-content my-2">
        <div class="card-body">
          <div class="grid grid-cols-3">
            <div class="flex flex-col col-span-2">
              <h2 class="card-title"><%= v[:name] %></h2>
              <div class="text-center">
                <div class="badge badge-lg badge-secondary w-full">
                  <%= v[:source] %>
                </div>
                <br />
                <i class="fa-solid fa-2x fa-chevron-down"></i>
                <i class="fa-solid fa-2x fa-chevron-down"></i>
                <i class="fa-solid fa-2x fa-chevron-down"></i>
                <br />
                <div class="badge badge-lg badge-secondary w-full">
                  <%= v[:target] %>
                </div>
              </div>
            </div>
            <div class="flex">
              <div class="card-actions justify-end">
                <%= if v[:enabled] == true do %>
                  <a
                    class="btn btn-accent btn-outline btn-circle"
                    phx-click="toggle"
                    phx-value-tgt={k}
                  >
                    <i class="fa-solid fa-2x fa-cog fa-spin"></i>
                  </a>
                <% else %>
                  <a
                    class="btn btn-secondary btn-outline btn-circle"
                    phx-click="toggle"
                    phx-value-tgt={k}
                  >
                    <i class="fa-solid fa-2x fa-cog"></i>
                  </a>
                <% end %>
                <%= if v[:persist] == true do %>
                  <a
                    class="btn btn-accent btn-circle"
                    phx-click="persist"
                    phx-value-tgt={v[:name]}
                  >
                    <i class="fa-solid fa-2x fa-thumbtack"></i>
                  </a>
                <% else %>
                  <a
                    class="btn btn-accent btn-outline btn-circle"
                    phx-click="persist"
                    phx-value-tgt={v[:name]}
                  >
                    <i class="fa-solid fa-2x fa-thumbtack"></i>
                  </a>
                <% end %>
                <a class="btn btn-error btn-outline btn-circle" phx-click="quit" phx-value-tgt={k}>
                  <i class="fa-solid fa-2x fa-xmark"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>