<%# locals: (form:, user:) %>

<div class="flex items-center gap-4" data-controller="profile-image-preview">
  <div class="relative flex justify-center items-center bg-gray-50 w-24 h-24 rounded-full border-alpha-black-300 border border-dashed">

    <%# The image preview once user has uploaded a new file  %>
    <div data-profile-image-preview-target="previewImage" class="h-full w-full flex justify-center items-center hidden">
      <img src="" alt="Preview" class="w-full h-full rounded-full object-cover">
    </div>

    <%# The placeholder image for empty avatar field  %>
    <div data-profile-image-preview-target="placeholderImage"
         class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "hidden" : "" %>">
      <div class="h-full w-full flex justify-center items-center">
        <%= lucide_icon "image-plus", class: "w-6 h-6 text-gray-500" %>
      </div>
    </div>

    <%# The attached image if user has already uploaded one %>
    <div data-profile-image-preview-target="attachedImage"
         class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "" : "hidden" %>">
      <% if user.profile_image.attached? %>
        <div class="h-full w-full">
          <%= render "settings/user_avatar", user: user %>
        </div>
      <% end %>
    </div>

    <button type="button"
            data-profile-image-preview-target="clearBtn"
            data-action="click->profile-image-preview#clearFileInput"
      class="<%= user.profile_image.attached? ? "" : "hidden" %> cursor-pointer absolute bottom-0 right-0 w-8 h-8 bg-gray-50 rounded-full flex justify-center items-center border border-white border-2">
      <%= lucide_icon "x", class: "w-4 h-4 text-gray-500" %>
    </button>
  </div>

  <div>
    <%= form.hidden_field :delete_profile_image, value: "0", data: { profile_image_preview_target: "deleteProfileImage" } %>

    <p class="mb-3"><%= t(".accepted_formats") %></p>

    <%= form.label :profile_image, t(".choose"),
        class: "btn btn--outline inline-block" %>
    <%= form.file_field :profile_image,
        accept: "image/png, image/jpeg",
        class: "hidden px-3 py-2 bg-gray-50 text-gray-900 rounded-md text-sm font-medium",
        data: {
          profile_image_preview_target: "input",
          action: "change->profile-image-preview#showFileInputPreview"
        } %>
  </div>
</div>
