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

<div class="bg-deepcove text-platinum h-full w-full flex flex-col">
    <%= link_to employers_path, class: "flex h-10 w-10 text-xl transition duration-100" do %>
            <%= icon "arrow-big-left-dash", library: "lucide", class: "h-full w-full text-center text-bluemana hover:text-bronze" %>
    <% end %>
    <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="w-1/2 flex ml-8">
            <%= link_to 'Edit Employer', edit_employer_path(@employer.slug), data: { turbo: false }, class: "flex justify-center items-center w-1/3 cursor-pointer bg-bluetang hover:bg-deepcove border-2 border-bluetang text-platinum 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 'Exceptions (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" %>
                        </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.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 '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.active ? "" : "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 display)', generate_mobile_display_id_card_print_path(id: @employer.slug), data: { turbo: false }, class: "flex justify-center items-center w-full #{@employer.active ? "" : "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.active ? "" : "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 class="flex flex-col space-y w-[23%] mb-5">
            <div class="flex flex-col space-y w-full h-1/2 mb-2">
                <div class="w-full flex items-center">
                    <h3 class="flex-none font-bold text-2xl text-copper">Britton Web 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-copper rounded-xl pl-2 pb-2">
                    <% if @employer.claims_check_enabled? %>

                    <% else %>
                        <%= link_to "Enable Britton Web", 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-copper hover:bg-deepcove border-4 border-copper text-platinum text-xl font-bold px-3 rounded-md mt-3 transition duration-100" %>
                    <% end %>
                </div>
            </div>
            <div class="flex flex-col space-y w-full h-1/2">
                <div class="w-full flex items-center">
                    <h3 class="flex-none font-bold text-2xl text-cobalt-vivid">Claims Check 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-cobalt-vivid rounded-xl pl-2 pb-2">
                    <% if @employer.claims_check_enabled? %>

                    <% else %>
                        <%= link_to "Enable Claims Check", 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-cobalt-vivid hover:bg-deepcove border-4 border-cobalt-vivid text-platinum text-xl font-bold px-3 rounded-md mt-3 transition duration-100 pointer-events-none opacity-50 cursor-not-allowed" %>
                    <% end %>
                </div>
            </div>
        </div>
        <div class="flex flex-col space-y w-[23%] mb-5">
            <div class="w-full flex items-center">
                <h3 class="flex-none font-bold text-2xl text-verdigris-vivid">FairosRx Eligibility 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-verdigris-vivid rounded-xl pl-2 pb-2">
                <% if @employer.claims_check_enabled? %>

                <% else %>
                    <%= link_to "Enable FairosRx Eligibility", 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-verdigris-vivid hover:bg-deepcove border-4 border-verdigris-vivid text-platinum text-xl font-bold px-3 rounded-md mt-3 transition duration-100 pointer-events-none opacity-50 cursor-not-allowed" %>
                <% end %>
            </div>
        </div>
    </div>
</div>