baclight/app/views/id_card/print/index.html.erb

<div class="bg-deepcove h-full w-full flex flex-col justify-start font-bold">
  <div class="flex items-center">
      <%= link_to dashboard_path, class: "flex items-center h-14 space-x" do %>
        <div class="flex items-center h-14 text-bluemana hover:text-bronze">
          <%= icon "arrow-big-left-dash", class: "h-full w-20 text-center" %>
          <div class="w-full pb-1 font-bold text-2xl">
              <%= "Back to Dashboard" %>
          </div>
        </div>
      <% end %>
  </div>
  <div class="w-full flex flex-col items-center mb-3">
      <div class="text-5xl text-platinum">
          ID Card Printer
      </div>
      <span class="block w-full h-0.5 bg-copper"></span>
  </div>
  <div class="w-full items-start flex">
    <div class="w-1/2 flex flex-col">
      <% @queued.each do |qu| %>
        <div class="w-full flex items-center justify-between text-lg text-platinum my-1">
          <div class="flex flex-none">
            <%= qu.employer.name %>
            (
            <div class="mx-1 text-bronze">
              <%= qu.queued_card_count %>
            </div>
            )
          </div>
          <div class="grow h-[1px] mx-1 bg-cobalt-vivid"></div>
          <div class="flex flex-none items-center text-xs">
            <%= link_to print_queued_by_employer_id_card_print_path(qu.pl_plan_key), data: { turbo: false }, class: "flex h-7 w-14 transition duration-100" do %>
              <%= icon "printer", class: "h-full w-full text-center text-platinum hover:text-bronze bg-atmosphere hover:bg-deepcove border-2 border-atmosphere rounded-md p-0.5" %>
            <% end %>
          </div>
        </div>
      <% end %>
      <% @not_queued.each_with_index do |nq, i| %>
        <% if i == 0 %>
          <div class="w-full h-[2px] mx-1 bg-verdigris-vivid my-5"></div>
        <% end %>
        <div class="w-full flex items-center justify-between text-lg text-platinum my-1">
          <div class="flex flex-none">
            <%= nq.employer.name %>
            (
            <div class="mx-1 text-verdigris-vivid">
              <%= nq.queued_card_count %>
            </div>
            )
          </div>
          <div class="grow h-[1px] mx-1 bg-cobalt-vivid"></div>
          <div class="flex flex-none items-center text-xs">
            <%= link_to print_queued_by_employer_id_card_print_path(nq.pl_plan_key), data: { turbo: false }, class: "flex h-7 w-14 transition duration-100 pointer-events-none opacity-50 cursor-not-allowed" do %>
              <%= icon "printer", class: "h-full w-full text-center text-platinum bg-atmosphere hover:bg-deepcove border-2 border-atmosphere rounded-md p-0.5" %>
            <% end %>
          </div>
        </div>
      <% end %>
    </div>
    <div class="w-1/2 flex flex-col">
      <div class="w-full flex justify-center items-center text-center text-2xl">
        <%= link_to "Print All Queued", print_all_queued_id_card_print_index_path, data: { turbo: false }, class: "flex justify-center items-center w-1/2 h-15 text-platinum hover:text-bronze bg-cobalt-vivid hover:bg-deepcove border-2 border-cobalt-vivid rounded-lg p-2" %>
      </div>
      <div class="w-full flex flex-col justify-center items-center text-center mt-15 text-2xl" data-controller="link-updater" data-link-updater-url-template-value="<%= generate_print_id_card_print_path(':id') %>">
        <div class="w-full flex justify-center text-platinum">Print ALL Cards for Group</div>
        <div class="w-1/2 flex justify-center text-lg font-medium">
          <%= select_tag "employer_select", options_for_select(Employer.all.pluck(:name, :pl_plan_key)), include_blank: "Select Group", data: { action: "change->link-updater#update", link_updater_target: "selector" }, class: "w-full rounded-lg rounded-r-none #{TailwindFormBuilder::SELECT_FIELD_STYLE}" %>
          <%= link_to "#", class: 'w-1/4 h-11 bg-cobalt-vivid hover:bg-deepcove border-2 border-cobalt-vivid text-platinum hover:text-bronze font-bold px-3 rounded-r-lg h-10 transition duration-100', data: { turbo: false, link_updater_target: "link" } do %>
            <%= icon "printer", class: "h-full w-full text-center rounded-md p-0.5" %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>