<div class="bg-deepcove h-full w-full flex flex-col justify-start">
  <div class="flex items-center">
    <h1 class="font-bold text-4xl text-platinum my-5">Employers</h1>
    <%= link_to new_employer_path, class: "flex justify-center items-center h-8 w-8 ml-2 mb-6 text-sm text-bronze bg-deepcove hover:bg-cobalt font-semibold p-1 rounded-lg border-2 border-cobalt" do %>
      <%= icon "clipboard-plus", library: "lucide" %>
    <% end %>

  </div>
  <% plan_colors = IdCard::Setup::FORM_COLORS.push('copper', 'bronze').shuffle %>
  <% @color_index = 0 %>
  <h2 class="font-bold text-3xl text-brightlava my-5">In Process:</h2>
  <% @employers.inactive.each_with_index do |emp, index| %>
    <% item_color_index = @color_index == 0 ? 0 : @color_index % plan_colors.length %>
    <div class="w-1/2 flex text-2xl text-platinum font-bold px-4 py-4 ml-10 space-x-4 rounded-lg border-l-5 border-b-2 <%= "border-#{plan_colors[item_color_index]}" %>">
      <%= link_to emp.name, employer_path(emp.slug), class: "hover:text-#{plan_colors[item_color_index]}" %>
      <div>
        <%= "(Effective #{emp.effective_date})" %>
      </div>
    </div>
    <% @color_index += 1 %>
  <% end %>
  <h2 class="font-bold text-3xl text-limegreen my-5">Live:</h2>
  <% @employers.active.each_with_index do |emp, index| %>
    <% item_color_index = @color_index == 0 ? 0 : @color_index % plan_colors.length %>
    <div class="w-1/2 flex text-2xl text-platinum font-bold px-4 py-4 ml-10 space-x-4 rounded-lg border-l-5 border-b-2 <%= "border-#{plan_colors[item_color_index]}" %>">
      <%= link_to emp.name, employer_path(emp.slug), class: "hover:text-#{plan_colors[item_color_index]}" %>
      <div>
        <%= "(#{emp.members.count} Members)" %>
      </div>
    </div>
    <% @color_index += 1 %>
  <% end %>
</div>