<div class="bg-deepcove h-full w-full flex flex-col">
  <div class="flex space-x-6 my-5 font-bold text-4xl">
    <h1 class="text-platinum">ID Card Plans:</h1>
    <h1 class="text-atmosphere">(<%= @employer.name %>)</h1>
  </div>
  <%= form_with model: @setup, url: update_plans_employer_id_card_setup_index_path(@employer.slug), local: true, multipart: true do |f| %>
    <div class="flex flex-col space-y-6 pb-10">
      <div class="w-full flex my-8" data-controller="add-plan" data-add-plan-form-color-value="<%= IdCard::Setup::FORM_COLORS.to_json %>" >
        <div class="flex flex-wrap w-full" data-add-plan-target="container">
          <% @setup.plans.each_with_index do |plan, index| %>
            <%= f.fields_for :plans, plan do |plan_fields| %>
              <div class="inline-flex flex-col justify-end pr-6 w-1/4 relative pl-1 plan-item" data-controller="benefits-template-picker">
                <div class="absolute left-0 top-[2%] h-[98%] border-l-4 <%= "border-#{IdCard::Setup::FORM_COLORS[index]}" %> "></div>
                <div class="font-bold text-2xl <%= "text-#{IdCard::Setup::FORM_COLORS[index]}" %> -ml-[6px] z-2  w-full">
                    <%= "Plan #{index + 1}" %>
                </div>
                <%= render 'plan_fields', plan_fields: plan_fields, f: f, index: index %>
                <div class="text-xl text-left font-bold pl-[2px] mb-[-4px] z-1 <%= "text-#{IdCard::Setup::FORM_COLORS[index]}" %>">
                    Benefit Values
                </div>
                <div class="w-full h-[3px] rounded-r <%= "bg-#{index % 2 == 1 ? 'bronze' : 'copper'}" %> ml-[3px]"></div>
                <%= plan_fields.fields_for :plan_benefits do |plan_benefits_fields| %>
                    <%= render 'plan_benefits_fields', plan_benefits_fields: plan_benefits_fields %>
                <% end %>
                <div class="mt-4 pl-1">
                    <%= plan_fields.hidden_field :_destroy %>
                    <%= button_tag "Remove Plan  #{index + 1}", class: "cursor-pointer bg-deepcove hover:bg-brightlava text-xl font-bold text-copper hover:text-platinum py-2 px-4 font-semibold leading-tight rounded-lg border-3 border-copper w-full", data: { action: "add-plan#remove" } %>
                </div>
              </div>
            <% end %>
          <% end %>
          <%= button_tag "Add a Plan", class: "cursor-pointer text-2xl font-bold py-2 pr-6 mt-10 w-[calc(24%-1rem)] w-1/4 min-h-[940px] text-[#E0E0E0] rounded-lg font-medium border border-[#E0E0E0] bg-[#173057] hover:bg-transparent hover:shadow-[0_0_10px_3px_#93c5fd] transition-colors duration-150", data: { action: "add-plan#add", add_plan_target: "button" } %>
          </div>
          <template data-add-plan-target="template">
            <%= f.fields_for :plans, @setup.plans.build, child_index: 'NEW_RECORD'  do |plan_fields| %>
                <div class="inline-flex flex-col justify-end pr-6 w-1/4 relative pl-1 plan-item" data-controller="benefits-template-picker">
                    <div class="absolute left-0 top-[2%] h-[98%] border-l-4 border-NEXT_COLOR"></div>
                    <div class="font-bold text-2xl text-NEXT_COLOR -ml-[6px] z-2 w-full">
                        <%= "Plan NEW_PLAN" %>
                    </div>
                    <%= render 'plan_fields', plan_fields: plan_fields, f: f, index: "NEW_RECORD".to_i %>
                    <div class="text-xl text-left font-bold pl-[2px] mb-[-4px] z-1 text-NEXT_COLOR">
                      Benefit Values
                    </div>
                    <div class="w-full h-[3px] rounded-r bg-NEXT_SECONDARY_COLOR ml-[3px]"></div>
                    <%= plan_fields.fields_for :plan_benefits do |plan_benefits_fields| %>
                        <%= render 'plan_benefits_fields', plan_benefits_fields: plan_benefits_fields %>
                    <% end %>
                    <div class="mt-4 pl-1">
                        <%= plan_fields.hidden_field :_destroy %>
                        <%= button_tag "Remove Plan NEW_PLAN", class: "cursor-pointer bg-deepcove hover:bg-brightlava text-xl font-bold text-NEXT_SECONDARY_COLOR hover:text-platinum py-2 px-4 font-semibold leading-tight rounded-lg border-3 border-NEXT_SECONDARY_COLOR w-full", data: { action: "add-plan#remove" } %>
                    </div>
                </div>
            <% end %>
          </template>
        </div>
      </div>
      <div class="py-8">
        <%= f.submit "Submit Plans" %>
      </div>
    </div>
  <% end %>
</div>
