<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">New ID Card Setup:</h1>
    <h1 class="text-atmosphere">(<%= @employer.name %>)</h1>
  </div>
  <%= form_with model: @setup, local: true, multipart: true do |f| %>
    <div class="flex flex-col space-y-6 pb-10">
      <div class="flex w-full items-end" data-controller="logo-upload" data-logo-upload-logo-type-value="employer" data-logo-upload-employer-name-value=<%= @employer.name %>>
        <div class="flex flex-col space-y-6 w-2/5">
          <div class="flex space-x-10">
            <div class="w-full">
              <%= f.text_field :print_name, label: { text: "Print Name" }, class: "w-full" %>
            </div>
            <div class="w-full">
              <%= f.text_field :rx_group_number, label: { text: "Rx Group Number" }, class: "w-full" %>
            </div>
          </div>
          <div class="flex space-x-10">
            <div class="w-full">
              <%= f.select :network_provider, options_for_select(["Cigna", "Medcost", "Other"]), { label: { text: "Provider Network" }, include_blank: "Select", class: "w-full" } %>
            </div>
            <div class="w-full">
              <%= f.select :card_template, options_for_select([["FairosRx", "FairosRxIDCard"], ["Tandemloc", "TandemlocIDCard"], ["smART", "SmartIDCard"], ["QRCode (Healthbus)", "QRCodeIDCard"]]), { label: { text: "Card Template" }, include_blank: "Select", class: "w-full" } %>
            </div>
          </div>
          <div class="flex items-end">
            <div class="flex">
              <div class="text-platinum text-lg">Employer Logo</div>
              <div class="flex items-center justify-center self-end cursor-pointer bg-atmosphere hover:bg-deepcove border-2 border-atmosphere text-platinum font-bold px-3 rounded-r h-10 transition duration-100">
                  <label for="employer_logo_file" class="text-center cursor-pointer">
                      <%= icon "image-plus", library: "lucide" %>
                  </label>
              </div>
            </div>
            <div class="hidden flex justify-center ml-15 rounded-lg border-4 border-atmosphere" data-logo-upload-target="previewContainer">
                <img data-logo-upload-target="preview" src="#" alt="Employer Logo preview" class="max-h-[100px] max-w-[133px] bg-platinum m-1"/>
            </div>
            <%= f.hidden_field :employer_logo_id, label: { text: "Employer Logo" }, data: { logo_upload_target: "logoField" }  %>
            <%= f.file_field :logo_file, class: "hidden", id: "employer_logo_file", data: { logo_upload_target: "previewContainer", parent_value: "network_logo", action: "change->logo-upload#uploadLogo" }, direct_upload: true %>
          </div>
        </div>
      </div>
      <div class="py-8">
        <%= f.submit "Create ID Card Setup" %>
      </div>
    </div>
  <% end %>
</div>
