dawarich/app/views/shared/_place_creation_modal.html.erb

<div data-controller="place-creation" data-place-creation-api-key-value="<%= current_user.api_key %>">
  <div class="modal" data-place-creation-target="modal">
    <div class="modal-box max-w-2xl">
      <h3 class="font-bold text-lg mb-4">Create New Place</h3>

      <form data-place-creation-target="form" data-action="submit->place-creation#submit">
        <input type="hidden" name="latitude" data-place-creation-target="latitudeInput">
        <input type="hidden" name="longitude" data-place-creation-target="longitudeInput">

        <div class="space-y-4">
          <div class="form-control">
            <label class="label">
              <span class="label-text font-semibold">Place Name *</span>
            </label>
            <input
              type="text"
              name="name"
              placeholder="Enter place name..."
              class="input input-bordered w-full"
              data-place-creation-target="nameInput"
              required>
          </div>

          <div class="form-control">
            <label class="label">
              <span class="label-text font-semibold">Note</span>
            </label>
            <textarea
              name="note"
              placeholder="Add a personal note about this place..."
              class="textarea textarea-bordered w-full bg-base-100"
              rows="3"
              data-place-creation-target="noteInput"></textarea>
            <label class="label">
              <span class="label-text-alt">Optional - Add any notes or details about this place</span>
            </label>
          </div>

          <div class="form-control">
            <label class="label">
              <span class="label-text font-semibold">Tags</span>
            </label>
            <div class="flex flex-wrap gap-2" data-place-creation-target="tagCheckboxes">
              <% current_user.tags.ordered.each do |tag| %>
                <label class="cursor-pointer">
                  <input type="checkbox" name="tag_ids[]" value="<%= tag.id %>" class="checkbox checkbox-sm hidden peer">
                  <span class="badge badge-lg badge-outline transition-all peer-checked:scale-105" style="border-color: <%= tag.color %>; color: <%= tag.color %>;" data-color="<%= tag.color %>">
                    <%= tag.icon %> #<%= tag.name %>
                  </span>
                </label>
              <% end %>
            </div>
            <label class="label">
              <span class="label-text-alt">Click tags to select them for this place</span>
            </label>
          </div>

          <div class="divider">Suggested Places</div>

          <div class="form-control">
            <label class="label">
              <span class="label-text font-semibold">Nearby Places</span>
            </label>
            <div class="relative">
              <div class="loading loading-spinner loading-sm absolute top-2 right-2 hidden" data-place-creation-target="loadingSpinner"></div>
              <div class="space-y-2 max-h-48 overflow-y-auto" data-place-creation-target="nearbyList">
              </div>
              <div class="mt-2 text-center hidden" data-place-creation-target="loadMoreContainer">
                <button
                  type="button"
                  class="btn btn-sm btn-ghost"
                  data-action="click->place-creation#loadMore"
                  data-place-creation-target="loadMoreButton">
                  Load More (expand search radius)
                </button>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-action">
          <button type="button" class="btn btn-ghost" data-action="click->place-creation#close">Cancel</button>
          <button type="submit" class="btn btn-primary">Create Place</button>
        </div>
      </form>
    </div>
    <div class="modal-backdrop" data-action="click->place-creation#close"></div>
  </div>
</div>