<div class="bg-deepcove text-platinum h-full w-full flex flex-col">
    <div class="flex w-full items-center space-x-4">
        <h1 class="font-bold text-4xl text-platinum my-5"><%= @employer.name %></h1>
        <div class="h-[50px] max-w-[200px]">
            <%= image_tag image_card_logo_file_path(@employer.employer_logo_filename), class: "max-h-[50px] object-contain shadow-[0_0_10px_3px_#93c5fd]" %>
        </div>
    </div>
    <div class="flex space-x-6">
        <div class="flex flex-col space-y-1 w-1/3">
            <div class="w-full flex items-center">
                <h3 class="grow-0 font-bold text-2xl text-bluemana">Employer Information</h3>
                <div class="h-[1px] grow mt-2 bg-bluemana"></div>
            </div>
            <div class="flex flex-col space-y-1 ml-4">
                <p class="text-<%="#{@employer.active == false ? "brightlava" : "limegreen"}" %>">
                    <strong class="text-platinum mr-2">└── Status:</strong>
                    <%= @employer.active == false ? "inactive" : "active" %>
                </p>
                <p class="ml-9 text-bluemana">
                        <strong class="text-platinum mr-2">├── Effective Date:</strong>
                        <%= @employer.effective_date %>
                    </p>
                <div>
                    <strong class="text-atmosphere mr-2">└── Key Chain</strong>
                </div>
                <% @employer.attributes.with_indifferent_access.slice(:pl_plan_key, :company_pb_entity_key, :group_number).each do |attribute_name, attribute_value| %>
                    <p class="ml-9 text-<%="#{attribute_value.present? ? "limegreen" : "brightlava"}" %>">
                        <strong class="text-platinum mr-2">├── <%= attribute_name.titleize %>:</strong>
                        <%= attribute_value.present? ? attribute_value.to_s : "waiting" %>
                    </p>
                <% end %>
                <div>
                    <strong class="text-atmosphere mr-2">└── Plans</strong>
                </div>
                <% @employer.plans.pluck(:title, :pb_product_key).each do |plan| %>
                    <div class="ml-9">
                        ├── <%= plan.first %>
                    </div>
                    <p class="ml-14 text-<%="#{plan.last.present? ? "limegreen" : "brightlava"}" %>">
                        <strong class="text-platinum mr-2">└── PB Product Key:</strong>
                        <%= plan.last.present? ? plan.last.to_s : "waiting" %>
                    </p>
                <% end %>
            </div>
            <div class="w-full flex items-center space-x-2 mt-10 ml-14">
                <%= link_to 'Edit', edit_employer_path(@employer.slug), class: "hover:text-atmosphere" %>
                <p>|</p>
                <%= link_to 'Back', employers_path, class: "hover:text-atmosphere" %>
            </div>
        </div>
        <div class="flex flex-col space-y-6 w-1/3">
            <div class="w-full flex items-center">
                <h3 class="font-bold text-2xl text-bluemana">Actions</h3>
                <div class="h-[1px] w-2/3 mt-2 bg-bluemana"></div>
            </div>
            <%= link_to 'Generate Sample Cards', generate_sample_sample_id_cards_path(employer_slug: @employer.slug ), data: { turbo: false }, class: "flex justify-center items-center w-2/3 cursor-pointer bg-atmosphere hover:bg-deepcove border-2 border-atmosphere text-platinum font-bold px-3 rounded-lg h-10 transition duration-100" %>
            <%= link_to 'Generate Group Cards (for print)', generate_print_sample_id_cards_path(employer_slug: @employer.slug ),data: { turbo: false }, class: "flex justify-center items-center w-2/3 #{@employer.active ? "" : "pointer-events-none opacity-50 cursor-not-allowed"} bg-atmosphere hover:bg-deepcove border-2 border-atmosphere text-platinum font-bold px-3 rounded-lg h-10 transition duration-100" %>
            <%= link_to 'Generate Group Cards (for display)', generate_mobile_display_sample_id_cards_path(employer_slug: @employer.slug ), data: { turbo: false }, class: "flex justify-center items-center w-2/3 #{@employer.active ? "" : "pointer-events-none opacity-50 cursor-not-allowed"} bg-atmosphere hover:bg-deepcove border-2 border-atmosphere text-platinum font-bold px-3 rounded-lg h-10 transition duration-100" %>
            <%= link_to 'Generate Group Cards (for download)', generate_full_page_sample_id_cards_path(employer_slug: @employer.slug ), data: { turbo: false }, class: "flex justify-center items-center w-2/3 #{@employer.active ? "" : "pointer-events-none opacity-50 cursor-not-allowed"} bg-atmosphere hover:bg-deepcove border-2 border-atmosphere text-platinum font-bold px-3 rounded-lg h-10 transition duration-100" %>
        </div>
    </div>
</div>