<div class="flex flex-col items-stretch justify-end pr-6 pl-1 w-1/4">
    <%= plan_fields.fields_for :plan_benefits do |plan_benefits_fields| %>
        <%= render 'plan_benefits_desc_fields', plan_benefits_fields: plan_benefits_fields %>
    <% end %>
</div>
<div class="inline-flex flex-col justify-end pr-6 pl-1 mt-10 relative w-1/4" data-controller="benefits-template-picker">
    <div class="absolute left-0 top-[2%] h-[98%] border-l-4 <%= "border-#{IdCard::Setup::FORM_COLORS[i]}" %> rounded-bl-lg"></div>
    <div class="font-bold text-2xl <%= "text-#{IdCard::Setup::FORM_COLORS[i]}" %> -ml-[6px] z-2  w-full">
    <%= "Plan #{i + 1}" %>
    </div>
    <div class="pl-1 w-full">
        <%= plan_fields.text_field :title, label: { text: "Plan Title" }, class: "w-full", data: { add_plan_target: "plan" } %>
    </div>
    <div class="pl-1 w-full">
        <%= plan_fields.text_field :plan_id, label: { text: "Plan Id" }, class: "w-full" %>
    </div>
    <div class="pl-1">
        <%= f.select :template_id, options_from_collection_for_select(@form.plan_templates, :id, :title), { prompt: "Select Plan Template" }, { data: { action: "benefits-template-picker#fetchData" }} %>
    </div>
    <%= plan_fields.fields_for :plan_benefits do |plan_benefits_fields| %>
        <%= render 'plan_benefits_fields', plan_benefits_fields: plan_benefits_fields %>
    <% end %>
</div>