baclight/app/views/employers/show.html.erb

<div class="bg-deepcove text-platinum h-full w-full flex flex-col">
    <div class="flex items-center">
      <%= link_to employers_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 Employer Control" %>
            </div>
        </div>
      <% end %>
    </div>
    <div class="flex w-full items-center space-x-8">
        <h1 class="font-bold text-4xl text-platinum my-5"><%= @employer.name %></h1>
        <div class="h-[50px] max-w-[200px]">
            <% if @employer&.id_card_setup&.employer_logo&.filename %>
                <%= image_tag image_id_card_employer_logo_path(@employer.id_card_setup.employer_logo.id), class: "max-h-[50px] object-contain shadow-[0_0_10px_3px_#93c5fd] bg-platinum" %>
            <% end %>
        </div>
        <div class="flex ml-8">
            <%= link_to 'Edit Employer', edit_employer_path(@employer.slug), data: { turbo: false }, class: "flex justify-center items-center cursor-pointer bg-bluetang hover:bg-deepcove border-2 border-bluetang text-platinum text-lg font-bold px-10 rounded-lg h-10 transition duration-100" %>
        </div>
        <div class="flex ml-8">
            <%= link_to 'Delete Employer (Beta)', employer_path(@employer), data: { turbo_method: :delete }, 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 transition duration-100" %>
        </div>
    </div>
    <div class="flex space-x-6">
        <div class="flex flex-col space-y-1 w-1/4">
            <div class="w-full flex items-center">
                <h3 class="flex-none font-bold text-2xl text-bluemana">Employer Information</h3>
                <div class="grow h-[1px] mt-2 ml-1 bg-bronze"></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-bluemana 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 %>
                <% if @employer&.id_card_setup&.plans.present? %>
                    <div>
                        <strong class="text-atmosphere mr-2">└── Plans</strong>
                    </div>
                    <% @employer.id_card_setup.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 %>
                <% end %>
            </div>
            <div class="flex flex-col items-center w-full my-8">
                <div class="w-full flex flex-col items-center my-3">
                    <div class="font-bold text-lg text-bronze">
                        Admin
                    </div>
                    <span class="block w-full h-0.5 bg-copper mt-[-4]"></span>
                </div>
                <div class="flex flex-col items-center space-y-6 w-full">
                    <%= link_to 'Sync Employer with VHCS', refresh_employer_information_employers_path(id: @employer.id), data: { turbo: false }, class: "flex justify-center items-center w-full cursor-pointer bg-brightlava hover:bg-deepcove border-2 border-brightlava text-platinum text-lg font-bold px-3 rounded-lg h-10 transition duration-100" %>
                    <%= link_to 'Sync Members with VHCS', refresh_employer_members_information_employers_path(id: @employer.id),data: { turbo: false }, class: "flex justify-center items-center w-full bg-brightlava hover:bg-deepcove border-2 border-brightlava text-platinum text-lg font-bold px-3 rounded-lg h-10 transition duration-100" %>
                </div>
            </div>
        </div>
        <div class="flex flex-col space-y w-[23%] mb-5">
            <% module_color = IdCard::Setup::MODULE_COLOR %>
            <div class="w-full flex flex-none items-center justify-between">
                <h3 class="flex-none font-bold text-2xl text-<%= module_color %>">ID Card Module</h3>
                <div class="grow h-[1px] mt-2 ml-1 bg-bronze"></div>
            </div>
            <div class="grow flex flex-col w-full border-l-4 border-b-4 border-<%= module_color %> rounded-xl pl-2 pb-2">
                <% if @employer.id_card_enabled? %>
                    <div class="grow-1 flex flex-col items-center w-full">
                        <div class="w-full flex flex-col items-center my-3">
                            <div class="font-bold text-lg text-bronze">
                                Setup
                            </div>
                            <span class="block w-full h-0.5 bg-copper mt-[-4]"></span>
                        </div>
                        <div class="flex flex-col items-center space-y-6 w-full">
                            <%= link_to "General", employer_id_card_setup_index_path(employer_id: @employer.slug), data: { turbo: false }, class: "flex justify-center items-center w-full cursor-pointer bg-#{module_color} hover:bg-deepcove border-2 border-#{module_color} text-platinum font-bold px-3 rounded-lg h-10 transition duration-100" %>
                            <%= link_to "Plans", plans_employer_id_card_setup_index_path(employer_id: @employer.slug), data: { turbo: false }, class: "flex justify-center items-center w-full cursor-pointer bg-#{module_color} hover:bg-deepcove border-2 border-#{module_color} text-platinum font-bold px-3 rounded-lg h-10 transition duration-100" %>
                            <%= link_to 'Alternate ID Cards (Optional)', field_exceptions_employer_id_card_setup_index_path(employer_id: @employer.slug ), data: { turbo: false }, class: "flex justify-center items-center w-full cursor-pointer bg-#{module_color} hover:bg-deepcove border-2 border-#{module_color} text-platinum font-bold px-3 rounded-lg h-10 transition duration-100" %>
                            <% if @employer.id_card_setup.activation_ready? %>
                                <%= link_to 'Activate ID Card Setup', update_active_status_employer_id_card_setup_index_path(employer_id: @employer.slug ), data: { turbo: false }, class: "flex justify-center items-center w-full cursor-pointer bg-brightlava hover:bg-deepcove border-2 border-brightlava text-platinum font-bold px-3 rounded-lg h-10 transition duration-100" %>
                            <% end %>
                        </div>
                    </div>
                    <div class="grow-1 flex flex-col items-center w-full">
                        <div class="w-full flex flex-col items-center my-3">
                            <div class="font-bold text-lg text-bronze">
                                Actions
                            </div>
                            <span class="block w-full h-0.5 bg-copper mt-[-4]"></span>
                        </div>
                        <div class="flex flex-col items-center space-y-6 w-full">
                            <%= link_to 'Generate Sample Cards', generate_sample_id_card_print_path(id: @employer.id), data: { turbo: false }, class: "flex justify-center items-center w-full cursor-pointer bg-#{module_color} #{@employer.id_card_setup.sample_card_print_ready? ? "" : "pointer-events-none opacity-50 cursor-not-allowed"} hover:bg-deepcove border-2 border-#{module_color} text-platinum font-bold px-3 rounded-lg h-10 transition duration-100" %>
                            <%= link_to 'Generate Group Cards (for print)', generate_print_id_card_print_path(id: @employer.slug),data: { turbo: false }, class: "flex justify-center items-center w-full #{@employer.id_card_setup.member_cards_print_ready? ? "" : "pointer-events-none opacity-50 cursor-not-allowed"} bg-#{module_color} hover:bg-deepcove border-2 border-#{module_color} text-platinum font-bold px-3 rounded-lg h-10 transition duration-100" %>
                            <%= link_to 'Generate Group Cards (for download)', generate_full_page_id_card_print_path(id: @employer.slug), data: { turbo: false }, class: "flex justify-center items-center w-full #{@employer.id_card_setup.member_cards_print_ready? ? "" : "pointer-events-none opacity-50 cursor-not-allowed"} bg-#{module_color} hover:bg-deepcove border-2 border-#{module_color} text-platinum font-bold px-3 rounded-lg h-10 transition duration-100" %>
                        </div>
                    </div>
                <% else %>
                    <%= link_to "Enable ID Card", employer_id_card_setup_index_path(employer_id: @employer.slug), data: { turbo: false }, class: "flex justify-center items-center w-full h-full cursor-pointer bg-#{module_color} hover:bg-deepcove border-4 border-atmosphere text-platinum text-xl font-bold px-3 rounded-md mt-3 transition duration-100" %>
                <% end %>
            </div>
        </div>
    </div>
</div>