<div class="bg-deepcove h-full w-full flex flex-col justify-start pb-10">
  <div class="flex items-center gap-x-40">
      <%= 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", library: "lucide", class: "h-full w-20 text-center" %>
          <div class="w-full pb-1 font-bold text-2xl">
              <%= "Back to Dashboard" %>
          </div>
        </div>
      <% end %>
      <%= link_to 'Run Employer Automations (Beta)', beta_automation_simulation_employers_path, data: { turbo: false }, class: "flex justify-center items-center cursor-pointer hover:bg-yellow-300 bg-deepcove border-2 border-yellow-300 text-yellow-300 hover:text-deepcove text-lg font-bold px-3 rounded-lg h-10" %>
      <div class="flex flex-col font-bold">
        <div class="text-md text-yellow-300">
          Unassigned VHCS Group Numbers (Beta):
        </div>
        <div class="text-sm text-platinum">
          <%= @beta_unassigned_group_numbers.present? ? @beta_unassigned_group_numbers.join(', ') : "None" %>
        </div>
      </div>
  </div>
  <div class="flex flex-col items-start w-full">
    <h1 class="w-1/2 font-bold text-4xl text-platinum my-5">Employers</h1>
    <div class="flex w-full px-10">
      <div class="w-[23%] inline-flex flex-col text-platinum hover:text-limegreen font-bold px-4 rounded-l-lg border-l-5 border-b-2 border-limegreen">
        <%= link_to "NEW", new_employer_path, class: "w-full flex text-3xl" %>
      </div>
    </div>
  </div>
  <% if @uninitialized.present? %>
    <h2 class="font-bold text-3xl text-brightlava my-5">In Process:</h2>
    <div class="flex flex-none items-center w-full px-10">
      <h3 class="w-[25%] flex flex-none font-bold text-xl text-bronze my-5">
        <%= "Needs Group Number Entry" %>
      </h3>
      <% if @uninitialized.not_automation_ready.present? %>
        <div class="flex flex-wrap w-full gap-x-4 gap-y-3">
          <% @uninitialized.not_automation_ready.each do |emp| %>
            <div class="w-[23%] inline-flex flex-col text-platinum font-bold px-4 rounded-l-lg border-l-5 border-b-2 border-bronze">
              <div class="w-full flex text-xl">
                <%= link_to emp.name, employer_path(emp.slug), class: "text-bronze hover:text-platinum" %>
              </div>
              <div class="w-full flex text-md font-medium">
                <%= "(Effective #{emp.effective_date})" %>
              </div>
            </div>
          <% end %>
        </div>
      <% else %>
        <div class="grow h-[1px] mt-2 ml-1 bg-bronze"></div>
      <% end %>
    </div>
    <div class="flex flex-none items-center w-full px-10">
      <h3 class="w-[25%] flex flex-none font-bold text-xl text-bluemana my-5">
        <%= "Waiting for VHCS Employer" %>
      </h3>
      <% if @uninitialized.missing_keychain_initialization.present? %>
        <div class="flex flex-wrap w-full gap-x-4 gap-y-3">
          <% @uninitialized.missing_keychain_initialization.each do |emp| %>
            <div class="w-[23%] inline-flex flex-col text-platinum font-bold px-4 rounded-l-lg border-l-5 border-b-2 border-bluemana">
              <div class="w-full flex text-xl">
                <%= link_to emp.name, employer_path(emp.slug), class: "text-bluemana hover:text-platinum" %>
              </div>
              <div class="w-full flex text-md font-medium">
                <%= "(Effective #{emp.effective_date})" %>
              </div>
            </div>
          <% end %>
        </div>
      <% else %>
        <div class="grow h-[1px] mt-2 ml-1 bg-bluemana"></div>
      <% end %>
    </div>
    <div class="flex flex-none items-center w-full px-10">
      <h3 class="w-[25%] flex flex-none font-bold text-xl text-[#4FA8F8] my-5">
        <%= "Waiting for VHCS Plans" %>
      </h3>
      <% if @uninitialized.missing_plans_initialization.present? %>
        <div class="flex flex-wrap w-full gap-x-4 gap-y-3">
          <% @uninitialized.missing_plans_initialization.each do |emp| %>
            <div class="w-[23%] inline-flex flex-col text-platinum font-bold px-4 rounded-l-lg border-l-5 border-b-2 border-[#4FA8F8]">
              <div class="w-full flex text-xl">
                <%= link_to emp.name, employer_path(emp.slug), class: "text-[#4FA8F8] hover:text-platinum" %>
              </div>
              <div class="w-full flex text-md font-medium">
                <%= "(Effective #{emp.effective_date})" %>
              </div>
            </div>
          <% end %>
        </div>
      <% else %>
        <div class="grow h-[1px] mt-2 ml-1 bg-[#4FA8F8]"></div>
      <% end %>
    </div>
    <div class="flex flex-none items-center w-full px-10">
      <h3 class="w-[25%] flex flex-none font-bold text-xl text-[#3388FF] my-5">
        <%= "Waiting for VHCS Members" %>
      </h3>
      <% if @uninitialized.missing_members_initialization.present? %>
        <div class="flex flex-wrap w-full gap-x-4 gap-y-3">
          <% @uninitialized.missing_members_initialization.each do |emp| %>
            <div class="w-80 inline-flex flex-col text-platinum font-bold pl-4 pr-1 rounded-l-lg border-l-5 border-b-2 border-[#3388FF]">
              <div class="w-full flex text-xl">
                <%= link_to emp.name, employer_path(emp.slug), class: "text-[#3388FF] hover:text-platinum" %>
              </div>
              <div class="w-full flex justify-between text-md font-medium">
                <% member_counter_color = "text-".concat(emp.members.present? ? "limegreen" : "brightlava") %>
                <div>
                  Members: 
                  <span class="ml-2 <%= member_counter_color %>">
                    <%= emp.members.count %>
                  </span>
                </div>
                <div class="ml-2">
                  <%= "(Effective #{emp.effective_date})" %>
                </div>
              </div>
            </div>
          <% end %>
        </div>
      <% else %>
        <div class="grow h-[1px] mt-2 ml-1 bg-[#3388FF]"></div>
      <% end %>
    </div>
    <div class="flex flex-none items-center w-full px-10">
      <h3 class="w-[25%] flex flex-none font-bold text-xl text-copper my-5">
        <%= "Ready for ID Card Activation" %>
      </h3>
      <% if @uninitialized.ready_for_id_card_activation.present? %>
        <div class="flex flex-wrap w-full gap-x-4 gap-y-3">
          <% @uninitialized.ready_for_id_card_activation.each do |emp| %>
            <div class="w-80 inline-flex flex-col text-platinum font-bold pl-4 pr-1 rounded-l-lg border-l-5 border-b-2 border-copper">
              <div class="w-full flex text-xl">
                <%= link_to emp.name, employer_path(emp.slug), class: "text-copper hover:text-platinum" %>
              </div>
              <div class="w-full flex justify-between text-md font-medium">
                <% member_counter_color = "text-".concat(emp.members.present? ? "limegreen" : "brightlava") %>
                <div>
                  Members: 
                  <span class="ml-2 <%= member_counter_color %>">
                    <%= emp.members.count %>
                  </span>
                </div>
                <div class="ml-2">
                  <%= "(Effective #{emp.effective_date})" %>
                </div>
              </div>
            </div>
          <% end %>
        </div>
      <% else %>
        <div class="grow h-[1px] mt-2 ml-1 bg-copper"></div>
      <% end %>
    </div>
  <% end %>
  <h2 class="font-bold text-3xl text-limegreen my-5">Live:</h2>
  <div class="flex flex-wrap w-full px-10 gap-x-4 gap-y-3">
    <% @with_active_id_card_setup.order(:name).each do |emp| %>
      <div class="w-[23%] inline-flex flex-col text-platinum font-bold px-4 rounded-l-lg border-l-5 border-b-2 border-atmosphere">
        <div class="w-full flex text-xl space-x-4">
          <%= link_to emp.name, employer_path(emp.slug), class: "text-atmosphere hover:text-platinum" %>
        </div>
        <div class="w-full flex text-md font-medium space-x-2">
          <div>
            Members: 
            <span class="ml-2">
              <%= emp.members.count %>
            </span>
          </div>
        </div>
      </div>
    <% end %>
  </div>
  <h2 class="font-bold text-3xl text-[#ADADAD] my-5">Deactivated:</h2>
  <div class="flex flex-wrap w-full px-10 gap-x-4 gap-y-3">
    <% @deactivated.each do |emp| %>
      <div class="w-[23%] inline-flex flex-col text-[#ADADAD] font-bold px-4 rounded-l-lg border-l-5 border-b-2 border-[#ADADAD]">
        <div class="w-full flex text-xl space-x-4">
          <%= link_to emp.name, employer_path(emp.slug), class: "text-platinum hover:text-bluemana" %>
        </div>
        <div class="w-full flex text-md font-medium space-x-2">
          <div>
            Members: 
            <span class="ml-2">
              <%= emp.members.count %>
            </span>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>