<div class="flex flex-col items-start space-y-3 w-[42%] hidden exception-item" data-controller="logo-upload" data-logo-upload-logo-type-value="network">
    <div class="flex w-full">
        <div class="flex flex-col w-full">
            <%= exception_item_fields.select :network_logo_id, options_for_select(IdCard::NetworkLogo.order(:filename).pluck(:filename, :id), exception_item_fields.object.network_logo_id), { include_blank: "Select/Add Network Logo", class: "rounded-r-none flex flex-col" },  data: { exceptions_toggle_target: "dependentField", parent_value: "network_logo", logo_upload_target: "logoIdField", action: "change->logo-upload#setSelectPreview" }  %>
        </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="network_logo_file" class="text-center cursor-pointer">
                <%= icon "image-plus", library: "lucide" %>
            </label>
        </div>
    </div>
    <div class="hidden flex ml-10 justify-center rounded-lg border-4 border-atmosphere" data-logo-upload-target="previewContainer">
        <img data-logo-upload-target="preview" src="#" alt="Netwoek Logo preview" class="max-h-[100px] max-w-[133px] bg-platinum m-1"/>
    </div>
    <%= exception_item_fields.file_field :network_logo_file, class: "hidden", id: "network_logo_file", data: { logo_upload_target: "previewContainer", action: "change->logo-upload#uploadLogo" }, direct_upload: true %>
</div>