lean_cms 0.2.12

data/app/views/lean_cms/notification_settings/edit.html.erb

@@ -0,0 +1,192 @@
+<div class="max-w-4xl">
+  <div class="mb-8">
+    <h1 class="text-3xl font-bold text-gray-900">Notification Settings</h1>
+    <p class="text-gray-600 mt-2">Configure how you receive notifications for contact form submissions</p>
+  </div>
+
+  <%= form_with url: lean_cms_notification_settings_path, method: :patch, class: "space-y-6" do |f| %>
+
+    <!-- Email Notifications -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6" data-controller="toggle-fields">
+      <div class="flex items-start mb-4">
+        <div class="flex items-center h-5">
+          <%= check_box_tag 'email_enabled', '1', @settings.email_enabled?,
+              class: "w-4 h-4 text-[#b82025] bg-gray-100 border-gray-300 rounded focus:ring-[#b82025] focus:ring-2",
+              data: { action: "change->toggle-fields#toggle" } %>
+        </div>
+        <div class="ml-3 flex-1">
+          <label for="email_enabled" class="font-semibold text-gray-900 text-lg">
+            Email Notifications
+          </label>
+          <p class="text-sm text-gray-600 mt-1">
+            Receive email notifications when contact form submissions are received. You'll receive the full form details.
+          </p>
+        </div>
+      </div>
+
+      <div data-toggle-fields-target="fields" class="<%= 'hidden' unless @settings.email_enabled? %> space-y-4 mt-4 pt-4 border-t border-gray-200" data-controller="email-provider">
+        <!-- Email Provider Selection -->
+        <div>
+          <label for="email_provider" class="block text-sm font-medium text-gray-700 mb-2">Email Provider</label>
+          <div class="space-y-2">
+            <div class="flex items-center">
+              <%= radio_button_tag 'email_provider', 'sendgrid', @settings.email_provider == 'sendgrid',
+                  class: "w-4 h-4 text-[#b82025] bg-gray-100 border-gray-300 focus:ring-[#b82025] focus:ring-2",
+                  data: { action: "change->email-provider#change" } %>
+              <label for="email_provider_sendgrid" class="ml-2 text-sm font-medium text-gray-700">Sendgrid</label>
+            </div>
+            <div class="flex items-center">
+              <%= radio_button_tag 'email_provider', 'mailgun', @settings.email_provider == 'mailgun',
+                  class: "w-4 h-4 text-[#b82025] bg-gray-100 border-gray-300 focus:ring-[#b82025] focus:ring-2",
+                  data: { action: "change->email-provider#change" } %>
+              <label for="email_provider_mailgun" class="ml-2 text-sm font-medium text-gray-700">Mailgun</label>
+            </div>
+            <div class="flex items-center">
+              <%= radio_button_tag 'email_provider', 'none', @settings.email_provider == 'none' || @settings.email_provider.blank?,
+                  class: "w-4 h-4 text-[#b82025] bg-gray-100 border-gray-300 focus:ring-[#b82025] focus:ring-2",
+                  data: { action: "change->email-provider#change" } %>
+              <label for="email_provider_none" class="ml-2 text-sm font-medium text-gray-700">None</label>
+            </div>
+          </div>
+        </div>
+
+        <!-- Sendgrid Credentials -->
+        <div data-email-provider-target="sendgridFields" class="<%= 'hidden' unless @settings.email_provider == 'sendgrid' %> space-y-4 mt-4">
+          <div>
+            <label for="sendgrid_api_key" class="block text-sm font-medium text-gray-700 mb-1">Sendgrid API Key</label>
+            <%= password_field_tag :sendgrid_api_key, '',
+                placeholder: @settings.sendgrid_api_key.present? ? "Enter new key or leave blank to keep existing" : "Enter your Sendgrid API key",
+                class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+            <p class="text-xs text-gray-500 mt-1"><%= @settings.sendgrid_api_key.present? ? "Key is set. Enter a new value to change it." : "Enter your Sendgrid API key" %></p>
+          </div>
+        </div>
+
+        <!-- Mailgun Credentials -->
+        <div data-email-provider-target="mailgunFields" class="<%= 'hidden' unless @settings.email_provider == 'mailgun' %> space-y-4 mt-4">
+          <div>
+            <label for="mailgun_api_key" class="block text-sm font-medium text-gray-700 mb-1">Mailgun API Key</label>
+            <%= password_field_tag :mailgun_api_key, '',
+                placeholder: @settings.mailgun_api_key.present? ? "Enter new key or leave blank to keep existing" : "Enter your Mailgun API key",
+                class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+            <p class="text-xs text-gray-500 mt-1"><%= @settings.mailgun_api_key.present? ? "Key is set. Enter a new value to change it." : "Enter your Mailgun API key" %></p>
+          </div>
+          <div>
+            <label for="mailgun_domain" class="block text-sm font-medium text-gray-700 mb-1">Mailgun Domain</label>
+            <%= text_field_tag :mailgun_domain, @settings.mailgun_domain,
+                placeholder: "e.g., mg.example.com",
+                class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+          </div>
+        </div>
+
+        <!-- Notification Email Recipients -->
+        <div>
+          <label for="notification_emails" class="block text-sm font-medium text-gray-700 mb-1">Recipient Email Addresses</label>
+          <%= text_field_tag :notification_emails, @settings.notification_email_list.join(', '),
+              placeholder: "email1@example.com, email2@example.com",
+              class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+          <p class="text-xs text-gray-500 mt-1">Separate multiple emails with commas</p>
+        </div>
+
+        <!-- Test Email Button -->
+        <div class="pt-2">
+          <%= link_to "Send Test Email", test_email_lean_cms_notification_settings_path,
+              method: :post,
+              class: "inline-flex items-center px-4 py-2 text-sm font-medium text-[#b82025] border border-[#b82025] rounded-lg hover:bg-[#b82025] hover:text-white transition-colors",
+              data: { confirm: "This will send a test notification. Continue?" } %>
+        </div>
+      </div>
+    </div>
+
+    <!-- SMS Notifications -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6" data-controller="toggle-fields">
+      <div class="flex items-start mb-4">
+        <div class="flex items-center h-5">
+          <%= check_box_tag 'sms_enabled', '1', @settings.sms_enabled?,
+              class: "w-4 h-4 text-[#b82025] bg-gray-100 border-gray-300 rounded focus:ring-[#b82025] focus:ring-2",
+              data: { action: "change->toggle-fields#toggle" } %>
+        </div>
+        <div class="ml-3 flex-1">
+          <label for="sms_enabled" class="font-semibold text-gray-900 text-lg">
+            SMS Notifications (Twilio)
+          </label>
+          <p class="text-sm text-gray-600 mt-1">
+            Receive SMS text messages when contact form submissions are received. You'll receive a brief notification.
+          </p>
+        </div>
+      </div>
+
+      <div data-toggle-fields-target="fields" class="<%= 'hidden' unless @settings.sms_enabled? %> space-y-4 mt-4 pt-4 border-t border-gray-200">
+        <!-- Twilio Credentials -->
+        <div>
+          <label for="twilio_account_sid" class="block text-sm font-medium text-gray-700 mb-1">Twilio Account SID</label>
+          <%= password_field_tag :twilio_account_sid, '',
+              placeholder: @settings.twilio_account_sid.present? ? "Enter new SID or leave blank to keep existing" : "Enter your Twilio Account SID",
+              class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+          <p class="text-xs text-gray-500 mt-1"><%= @settings.twilio_account_sid.present? ? "SID is set. Enter a new value to change it." : "Enter your Twilio Account SID" %></p>
+        </div>
+
+        <div>
+          <label for="twilio_auth_token" class="block text-sm font-medium text-gray-700 mb-1">Twilio Auth Token</label>
+          <%= password_field_tag :twilio_auth_token, '',
+              placeholder: @settings.twilio_auth_token.present? ? "Enter new token or leave blank to keep existing" : "Enter your Twilio Auth Token",
+              class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+          <p class="text-xs text-gray-500 mt-1"><%= @settings.twilio_auth_token.present? ? "Token is set. Enter a new value to change it." : "Enter your Twilio Auth Token" %></p>
+        </div>
+
+        <div>
+          <label for="twilio_from_number" class="block text-sm font-medium text-gray-700 mb-1">Twilio From Number</label>
+          <%= text_field_tag :twilio_from_number, @settings.twilio_from_number,
+              placeholder: "+1234567890",
+              class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+          <p class="text-xs text-gray-500 mt-1">The phone number your SMS will be sent from (must be verified in Twilio)</p>
+        </div>
+
+        <!-- Notification Phone Recipients -->
+        <div>
+          <label for="notification_phones" class="block text-sm font-medium text-gray-700 mb-1">Recipient Phone Numbers</label>
+          <%= text_field_tag :notification_phones, @settings.notification_phone_list.join(', '),
+              placeholder: "+1234567890, +1987654321",
+              class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+          <p class="text-xs text-gray-500 mt-1">Separate multiple phone numbers with commas. Include country code (e.g., +1 for US)</p>
+        </div>
+
+        <!-- Test SMS Button -->
+        <div class="pt-2">
+          <%= link_to "Send Test SMS", test_sms_lean_cms_notification_settings_path,
+              method: :post,
+              class: "inline-flex items-center px-4 py-2 text-sm font-medium text-[#b82025] border border-[#b82025] rounded-lg hover:bg-[#b82025] hover:text-white transition-colors",
+              data: { confirm: "This will send a test SMS notification. Continue?" } %>
+        </div>
+      </div>
+    </div>
+
+    <!-- In-App Notifications -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+      <div class="flex items-start">
+        <div class="flex items-center h-5">
+          <%= check_box_tag 'in_app_enabled', '1', @settings.in_app_enabled?,
+              class: "w-4 h-4 text-[#b82025] bg-gray-100 border-gray-300 rounded focus:ring-[#b82025] focus:ring-2" %>
+        </div>
+        <div class="ml-3 flex-1">
+          <label for="in_app_enabled" class="font-semibold text-gray-900 text-lg">
+            In-App Notifications
+          </label>
+          <p class="text-sm text-gray-600 mt-1">
+            Show notifications in the CMS admin panel when contact form submissions are received. These appear in the notification bell icon.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Save Button -->
+    <div class="flex items-center justify-between pt-4">
+      <div class="text-sm text-gray-600">
+        Changes take effect immediately after saving
+      </div>
+      <div class="flex items-center gap-3">
+        <%= link_to "Cancel", lean_cms_root_path, class: "px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors" %>
+        <%= f.submit "Save Settings", class: "px-6 py-2 bg-[#b82025] hover:bg-[#a01c20] text-white font-semibold rounded-lg transition-colors cursor-pointer" %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/views/lean_cms/notifications/index.html.erb

@@ -0,0 +1,72 @@
+<% content_for :page_title, "Notifications" %>
+
+<div class="max-w-4xl">
+  <div class="mb-8 flex items-center justify-between">
+    <div>
+      <h1 class="text-3xl font-bold text-gray-900">Notifications</h1>
+      <p class="text-gray-600 mt-2">
+        <% if @unread_count > 0 %>
+          <%= pluralize(@unread_count, 'unread notification') %>
+        <% else %>
+          All caught up!
+        <% end %>
+      </p>
+    </div>
+    <% if @unread_count > 0 %>
+      <%= button_to mark_all_as_read_lean_cms_notifications_path, 
+          method: :patch,
+          class: "px-4 py-2 text-sm font-medium text-[#b82025] border border-[#b82025] rounded-lg hover:bg-[#b82025] hover:text-white transition-colors" do %>
+        Mark All as Read
+      <% end %>
+    <% end %>
+  </div>
+
+  <div class="bg-white rounded-lg shadow-sm border border-gray-200">
+    <% if @notifications.any? %>
+      <div class="divide-y divide-gray-200">
+        <% @notifications.each do |notification| %>
+          <%= link_to lean_cms_notification_path(notification), 
+              class: "block px-6 py-4 hover:bg-gray-50 transition-colors #{'bg-blue-50' unless notification.read?}" do %>
+            <div class="flex items-start">
+              <div class="flex-shrink-0">
+                <% unless notification.read? %>
+                  <div class="h-2 w-2 rounded-full bg-[#b82025] mt-2"></div>
+                <% end %>
+              </div>
+              <div class="ml-3 flex-1 min-w-0">
+                <div class="flex items-center justify-between">
+                  <p class="text-sm font-medium text-gray-900">
+                    <%= notification.params[:title] || 'Contact Form Submission' %>
+                  </p>
+                  <span class="text-xs text-gray-400">
+                    <%= time_ago_in_words(notification.created_at) %> ago
+                  </span>
+                </div>
+                <p class="text-sm text-gray-600 mt-1">
+                  <%= notification.params[:message] || notification.message %>
+                </p>
+                <% if notification.params[:url] %>
+                  <p class="text-xs text-[#b82025] mt-2">
+                    View details →
+                  </p>
+                <% end %>
+              </div>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+
+      <div class="px-6 py-4 border-t border-gray-200">
+        <%= paginate @notifications %>
+      </div>
+    <% else %>
+      <div class="px-6 py-12 text-center">
+        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
+        </svg>
+        <p class="mt-2 text-sm text-gray-600">No notifications yet</p>
+        <p class="mt-1 text-xs text-gray-500">You'll see notifications here when contact form submissions are received</p>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/lean_cms/notifications/show.html.erb

@@ -0,0 +1,39 @@
+<% content_for :page_title, "Notification Details" %>
+
+<div class="max-w-4xl">
+  <div class="mb-6">
+    <%= link_to lean_cms_notifications_path, class: "inline-flex items-center text-sm text-gray-600 hover:text-gray-900 mb-4" do %>
+      <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+      </svg>
+      Back to Notifications
+    <% end %>
+    <h1 class="text-3xl font-bold text-gray-900">
+      <%= @notification.params[:title] || 'Contact Form Submission' %>
+    </h1>
+    <p class="text-gray-600 mt-2">
+      <%= time_ago_in_words(@notification.created_at) %> ago
+    </p>
+  </div>
+
+  <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+    <div class="prose max-w-none">
+      <p class="text-gray-700">
+        <%= @notification.params[:message] || @notification.message %>
+      </p>
+    </div>
+
+    <% if @notification.params[:url] %>
+      <div class="mt-6 pt-6 border-t border-gray-200">
+        <%= link_to @notification.params[:url], 
+            class: "inline-flex items-center px-4 py-2 bg-[#b82025] hover:bg-[#a01c20] text-white font-medium rounded-lg transition-colors",
+            data: { turbo_frame: "_top" } do %>
+          View Details
+          <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+          </svg>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/lean_cms/page_contents/_field_editor.html.erb

@@ -0,0 +1,174 @@
+<div class="cms-field-editor-modal">
+  <div class="flex items-center justify-between mb-6 pb-4 border-b border-gray-200">
+    <div>
+      <h2 class="text-2xl font-bold text-gray-900"><%= field.label || field.key.humanize %></h2>
+      <p class="text-sm text-gray-600 mt-1"><%= field.page&.title || field.read_attribute(:page)&.titleize %> › <%= field.section.humanize %></p>
+    </div>
+    <button type="button" data-action="click->field-editor-modal#close"
+            class="cursor-pointer text-gray-400 hover:text-gray-600">
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+      </svg>
+    </button>
+  </div>
+
+  <%= form_with url: lean_cms_update_page_content_field_path(field.id),
+                method: :patch,
+                multipart: true,
+                data: { controller: 'field-editor-form', action: 'submit->field-editor-form#handleSubmit' } do |f| %>
+
+    <div class="space-y-4">
+      <% case field.content_type.to_sym %>
+      <% when :rich_text %>
+        <%# display_value for rich_text returns the FULL rendered partial
+            (action_text/contents/_content.html.erb), which wraps the body
+            in a <div class="trix-content"> and ActionText template
+            comments. Trix can't initialize from that — it needs the raw
+            inner HTML body. Read it off the underlying rich_text record. %>
+        <%= rich_text_area_tag 'value', field.rich_content&.body&.to_html.to_s,
+            class: 'w-full min-h-[300px] border border-gray-300 rounded-lg' %>
+
+      <% when :bullets %>
+        <%
+          bullets = field.display_value.is_a?(Array) ? field.display_value : []
+          bullets = [''] if bullets.empty?
+        %>
+        <div data-controller="dynamic-list" data-dynamic-list-max-value="20" data-dynamic-list-min-value="1">
+          <div data-dynamic-list-target="list" class="space-y-2">
+            <% bullets.each do |bullet| %>
+              <div data-list-item class="flex gap-3 items-center">
+                <%= text_field_tag "bullet_items[]", bullet,
+                    placeholder: "Enter a bullet point",
+                    class: "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none" %>
+                <button type="button" data-action="click->dynamic-list#remove"
+                        class="p-2 text-gray-400 hover:text-red-500 transition-colors cursor-pointer flex-shrink-0">
+                  <svg class="w-5 h-5 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                  </svg>
+                </button>
+              </div>
+            <% end %>
+          </div>
+
+          <button type="button" data-action="click->dynamic-list#add"
+                  class="mt-3 inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-700 transition-colors cursor-pointer">
+            <svg class="w-4 h-4 mr-1 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
+            </svg>
+            Add Bullet Point
+          </button>
+
+          <template data-dynamic-list-target="template">
+            <div data-list-item class="flex gap-3 items-center">
+              <%= text_field_tag "bullet_items[]", "",
+                  placeholder: "Enter a bullet point",
+                  class: "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none" %>
+              <button type="button" data-action="click->dynamic-list#remove"
+                      class="p-2 text-gray-400 hover:text-red-500 transition-colors cursor-pointer flex-shrink-0">
+                <svg class="w-5 h-5 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                </svg>
+              </button>
+            </div>
+          </template>
+        </div>
+
+        <!-- Hidden field to store the bullets field ID for controller processing -->
+        <input type="hidden" name="bullets_field_id" value="<%= field.id %>">
+
+      <% when :cards %>
+        <% cards = field.display_value.is_a?(Array) ? field.display_value : [] %>
+        <%# Add image URLs for existing images so they show in the editor %>
+        <% cards_with_urls = cards.map do |card|
+          card_hash = card.except('image_attachment').to_h.with_indifferent_access
+          if card_hash['image_id'].present? && field.card_images.attached?
+            begin
+              img = field.card_image(card_hash['image_id'])
+              if img.present? && img.blob.present?
+                card_hash['image_url'] = rails_blob_path(img, only_path: true)
+              end
+            rescue => e
+              Rails.logger.warn "Could not load card image: #{e.message}"
+            end
+          end
+          card_hash
+        end %>
+        <div data-controller="cards-editor" data-cards-editor-initial-value="<%= h(cards_with_urls.to_json) %>" class="space-y-4" id="cards-editor-<%= field.id %>">
+          <!-- Cards List Container -->
+          <div data-cards-editor-target="cardsList" class="space-y-3">
+            <!-- Cards will be rendered here by JavaScript -->
+          </div>
+
+          <!-- Add Card Button -->
+          <button type="button" data-action="click->cards-editor#addCard"
+                  class="w-full px-4 py-2 border-2 border-dashed border-gray-300 rounded-lg text-sm font-medium text-gray-600 hover:border-gray-400 hover:text-gray-700 transition-colors cursor-pointer">
+            + Add Card
+          </button>
+
+          <!-- Hidden input to store JSON -->
+          <input type="hidden" name="value" data-cards-editor-target="hiddenInput">
+        </div>
+
+      <% when :image %>
+        <div class="space-y-3">
+          <% if field.image_file.attached? %>
+            <div class="relative inline-block">
+              <%= image_tag field.image_file, class: "max-w-xs rounded-lg border border-gray-200" %>
+              <div class="mt-2 text-sm text-gray-600">
+                Current image: <%= field.image_file.filename %>
+              </div>
+            </div>
+          <% elsif field.value.present? %>
+            <div class="text-sm text-gray-600">
+              Current URL: <%= field.value %>
+            </div>
+          <% end %>
+
+          <%= file_field_tag "image_file",
+              accept: "image/*",
+              class: "block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none" %>
+          <p class="text-xs text-gray-500">Upload a new image to replace the current one</p>
+        </div>
+
+      <% when :boolean %>
+        <div class="flex items-center">
+          <%= check_box_tag 'value', "1", field.display_value,
+              class: "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2" %>
+          <span class="ml-2 text-sm text-gray-600">Enable this feature</span>
+        </div>
+
+      <% when :url %>
+        <%= url_field_tag 'value', field.display_value,
+            class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+            placeholder: "https://example.com" %>
+
+      <% when :color %>
+        <div class="flex items-center space-x-3">
+          <%= color_field_tag 'value', field.display_value || "#000000",
+              class: "w-20 h-10 border border-gray-300 rounded cursor-pointer" %>
+          <%= text_field_tag 'value', field.display_value || "#000000",
+              class: "flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+              placeholder: "#000000" %>
+        </div>
+
+      <% when :dropdown %>
+        <% options = field.options.is_a?(Hash) ? field.options : {} %>
+        <%= select_tag 'value',
+            options_for_select(options, field.display_value),
+            class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" %>
+
+      <% end %>
+    </div>
+
+    <div class="flex justify-end gap-3 mt-6 pt-4 border-t border-gray-200">
+      <button type="button"
+              data-action="click->field-editor-modal#close"
+              class="cursor-pointer px-6 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
+        Cancel
+      </button>
+      <%= f.submit 'Save Changes',
+          class: 'cursor-pointer px-6 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700' %>
+    </div>
+  <% end %>
+</div>
+