rivet_cms 0.1.0.pre

data/app/javascript/rivet_cms.js

@@ -0,0 +1,29 @@
+import "@hotwired/turbo-rails"
+import { Application } from "@hotwired/stimulus"
+import FieldLayoutController from "./controllers/field_layout_controller"
+import ContentTypeFormController from "./controllers/content_type_form_controller"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+// Register controllers
+application.register("field-layout", FieldLayoutController)
+application.register("content-type-form", ContentTypeFormController)
+document.addEventListener("turbo:load", function(event) {  
+  // Mobile menu toggle
+  const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]')
+  const mobileMenu = document.getElementById('mobile-menu')
+  
+  if (mobileMenuButton && mobileMenu) {
+    mobileMenuButton.addEventListener('click', () => {
+      const expanded = mobileMenuButton.getAttribute('aria-expanded') === 'true'
+      mobileMenuButton.setAttribute('aria-expanded', !expanded)
+      mobileMenu.classList.toggle('hidden')
+    })
+  }
+});
+
+export { application }

data/app/jobs/rivet_cms/application_job.rb

@@ -0,0 +1,4 @@
+module RivetCms
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/rivet_cms/application_mailer.rb

@@ -0,0 +1,6 @@
+module RivetCms
+  class ApplicationMailer < ActionMailer::Base
+    default from: "from@example.com"
+    layout "mailer"
+  end
+end

data/app/models/rivet_cms/application_record.rb

@@ -0,0 +1,5 @@
+module RivetCms
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/models/rivet_cms/component.rb

@@ -0,0 +1,4 @@
+module RivetCms
+  class Component < ApplicationRecord
+  end
+end

data/app/models/rivet_cms/content.rb

@@ -0,0 +1,4 @@
+module RivetCms
+  class Content < ApplicationRecord
+  end
+end

data/app/models/rivet_cms/content_type.rb

@@ -0,0 +1,40 @@
+module RivetCms
+  class ContentType < ApplicationRecord
+    has_prefix_id :content_type, minimum_length: RivetCms.configuration.prefixed_ids_length, salt: RivetCms.configuration.prefixed_ids_salt, alphabet: RivetCms.configuration.prefixed_ids_alphabet
+
+    has_many :contents, dependent: :destroy
+    has_many :fields, dependent: :destroy
+
+    validates :name, presence: true
+    validates :slug, presence: true
+    validates :slug, format: { with: /\A[a-z0-9\-]+\z/, message: "can only contain lowercase letters, numbers, and hyphens" }
+    
+    # Default to collection type (is_single = false)
+    after_initialize :set_default_type, if: :new_record?
+
+    after_commit :invalidate_api_docs_cache
+
+    def collection?
+      !is_single
+    end
+
+    def single?
+      is_single
+    end
+
+    # For compatibility with existing views
+    def is_collection
+      !is_single
+    end
+
+    private
+
+    def set_default_type
+      self.is_single = false if self.is_single.nil?
+    end
+
+    def invalidate_api_docs_cache
+      Rails.cache.delete("rivet_cms_api_docs")
+    end
+  end
+end

data/app/models/rivet_cms/content_value.rb

@@ -0,0 +1,4 @@
+module RivetCms
+  class ContentValue < ApplicationRecord
+  end
+end

data/app/models/rivet_cms/field.rb

@@ -0,0 +1,82 @@
+module RivetCms
+  class Field < ApplicationRecord
+    has_prefix_id :fld, minimum_length: RivetCms.configuration.prefixed_ids_length, salt: RivetCms.configuration.prefixed_ids_salt, alphabet: RivetCms.configuration.prefixed_ids_alphabet
+
+    # Field widths for form layout
+    WIDTHS = %w[full half].freeze
+    attribute :width, :string, default: 'full'
+
+    belongs_to :content_type
+    belongs_to :component, optional: true
+    has_many :field_values, dependent: :destroy
+
+    # Define available field types
+    FIELD_TYPES = %w[string text integer boolean media relation component]
+
+    validates :name, presence: true, uniqueness: { scope: :content_type_id }
+    validates :field_type, presence: true, inclusion: { in: FIELD_TYPES }
+    validates :width, inclusion: { in: WIDTHS }
+    
+    # Default scope to order fields by position
+    default_scope { order(position: :asc) }
+    
+    # Set default position before create
+    before_create :set_default_position
+    
+    # Field type options for select
+    def self.field_types_for_select
+      [
+        ['Short text', 'string'],
+        ['Long text', 'text'],
+        ['Number', 'integer'],
+        ['True/False', 'boolean'],
+        ['Media', 'media'],
+        ['Relation', 'relation'],
+        ['Component', 'component']
+      ]
+    end
+    
+    # Human-readable field type
+    def field_type_name
+      case field_type
+      when 'string' then 'Short text'
+      when 'text' then 'Long text'
+      when 'integer' then 'Number'
+      when 'boolean' then 'True/False'
+      when 'media' then 'Media'
+      when 'relation' then 'Relation'
+      when 'component' then 'Component'
+      else field_type.humanize
+      end
+    end
+    
+    # Update positions for a set of fields
+    def self.update_positions(ordered_ids)
+      return if ordered_ids.blank?
+      
+      transaction do
+        ordered_ids.each_with_index do |prefixed_id, index|
+          field = find_by_prefix_id(prefixed_id)
+          field&.update_column(:position, index + 1)
+        end
+      end
+    end
+    
+    after_commit :invalidate_api_docs_cache
+    
+    private
+    
+    def set_default_position
+      return if position.present?
+      
+      max_position = content_type.fields.maximum(:position) || 0
+      self.position = max_position + 1
+    end
+
+    def invalidate_api_docs_cache
+      if content_type
+        Rails.cache.delete("rivet_cms_api_docs")
+      end
+    end
+  end
+end

data/app/models/rivet_cms/field_values/base.rb

@@ -0,0 +1,11 @@
+module RivetCms
+  module FieldValues
+    class Base < ApplicationRecord
+      self.abstract_class = true
+      
+      def self.table_name_prefix
+        "rivet_cms_field_values_"
+      end
+    end
+  end
+end

data/app/models/rivet_cms/field_values/boolean.rb

@@ -0,0 +1,4 @@
+module RivetCms
+  class FieldValues::Boolean < Base
+  end
+end

data/app/models/rivet_cms/field_values/integer.rb

@@ -0,0 +1,4 @@
+module RivetCms
+  class FieldValues::Integer < Base
+  end
+end

data/app/models/rivet_cms/field_values/string.rb

@@ -0,0 +1,4 @@
+module RivetCms
+  class FieldValues::String < Base
+  end
+end

data/app/models/rivet_cms/field_values/text.rb

@@ -0,0 +1,4 @@
+module RivetCms
+  class FieldValues::Text < Base
+  end
+end

data/app/services/rivet_cms/open_api_generator.rb

@@ -0,0 +1,245 @@
+module RivetCms
+  class OpenApiGenerator
+    class << self
+      def generate
+        Rails.cache.fetch("rivet_cms_api_docs", expires_in: 1.hour) do
+          generate_schema
+        end
+      end
+
+      private
+
+      def generate_schema
+        schema = {
+          "openapi" => "3.0.1",
+          "info" => {
+            "title" => "RivetCMS API",
+            "version" => "1.0.0",
+            "description" => "API documentation for content types"
+          },
+          "paths" => generate_paths,
+          "components" => {
+            "schemas" => generate_schemas,
+            "securitySchemes" => {
+              "bearerAuth" => {
+                "type" => "http",
+                "scheme" => "bearer",
+                "bearerFormat" => "JWT"
+              }
+            }
+          },
+          "security" => [
+            { "bearerAuth" => [] }
+          ]
+        }
+
+        deep_stringify_keys(schema)
+      end
+
+      def deep_stringify_keys(obj)
+        case obj
+        when Hash
+          obj.each_with_object({}) do |(key, value), result|
+            result[key.to_s] = deep_stringify_keys(value)
+          end
+        when Array
+          obj.map { |item| deep_stringify_keys(item) }
+        else
+          obj
+        end
+      end
+
+      def generate_paths
+        paths = {}
+        
+        ContentType.all.each do |content_type|
+          if content_type.is_single
+            paths.merge!(generate_single_type_paths(content_type))
+          else
+            paths.merge!(generate_collection_type_paths(content_type))
+          end
+        end
+
+        paths
+      end
+
+      def generate_single_type_paths(content_type)
+        {
+          "/api/v1/#{content_type.slug}" => {
+            "get" => {
+              "tags" => [content_type.name],
+              "summary" => "Get #{content_type.name}",
+              "responses" => {
+                "200" => {
+                  "description" => "Returns the #{content_type.name}",
+                  "content" => {
+                    "application/json" => {
+                      "schema" => { "$ref" => "#/components/schemas/#{content_type.slug}" }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      end
+
+      def generate_collection_type_paths(content_type)
+        {
+          "/api/v1/#{content_type.slug}" => {
+            "get" => {
+              "tags" => [content_type.name],
+              "summary" => "List all #{content_type.name.pluralize}",
+              "parameters" => [
+                {
+                  "name" => "page",
+                  "in" => "query",
+                  "description" => "Page number for pagination",
+                  "schema" => { "type" => "integer", "default" => 1 },
+                  "required" => false
+                },
+                {
+                  "name" => "per_page",
+                  "in" => "query",
+                  "description" => "Number of items per page",
+                  "schema" => { "type" => "integer", "default" => 25 },
+                  "required" => false
+                }
+              ],
+              "responses" => {
+                "200" => {
+                  "description" => "Returns list of #{content_type.name.pluralize}",
+                  "content" => {
+                    "application/json" => {
+                      "schema" => {
+                        "type" => "object",
+                        "properties" => {
+                          "data" => {
+                            "type" => "array",
+                            "items" => { "$ref" => "#/components/schemas/#{content_type.slug}" }
+                          },
+                          "meta" => {
+                            "type" => "object",
+                            "properties" => {
+                              "current_page" => { "type" => "integer" },
+                              "total_pages" => { "type" => "integer" },
+                              "total_count" => { "type" => "integer" }
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "/api/v1/#{content_type.slug}/{id}" => {
+            "get" => {
+              "tags" => [content_type.name],
+              "summary" => "Get a specific #{content_type.name}",
+              "parameters" => [
+                {
+                  "name" => "id",
+                  "in" => "path",
+                  "required" => true,
+                  "schema" => { "type" => "string" },
+                  "description" => "The ID of the #{content_type.name} to retrieve"
+                }
+              ],
+              "responses" => {
+                "200" => {
+                  "description" => "Returns the #{content_type.name}",
+                  "content" => {
+                    "application/json" => {
+                      "schema" => { "$ref" => "#/components/schemas/#{content_type.slug}" }
+                    }
+                  }
+                },
+                "404" => {
+                  "description" => "#{content_type.name} not found"
+                }
+              }
+            }
+          }
+        }
+      end
+
+      def generate_schemas
+        schemas = {}
+        
+        ContentType.all.each do |content_type|
+          schemas[content_type.slug] = generate_content_type_schema(content_type)
+        end
+
+        schemas
+      end
+
+      def generate_content_type_schema(content_type)
+        {
+          "type" => "object",
+          "properties" => generate_properties(content_type)
+        }
+      end
+
+      def generate_properties(content_type)
+        properties = {
+          "id" => { "type" => "string" },
+          "title" => { "type" => "string" },
+          "slug" => { "type" => "string" },
+          "status" => { 
+            "type" => "string",
+            "enum" => ["draft", "published", "archived"]
+          },
+          "created_at" => { "type" => "string", "format" => "date-time" },
+          "updated_at" => { "type" => "string", "format" => "date-time" }
+        }
+
+        content_type.fields.each do |field|
+          properties[field.name] = field_type_to_schema(field)
+        end
+
+        properties
+      end
+
+      def field_type_to_schema(field)
+        case field.field_type
+        when 'string', 'text'
+          { "type" => "string" }
+        when 'integer'
+          { "type" => "integer" }
+        when 'boolean'
+          { "type" => "boolean" }
+        when 'media'
+          {
+            "type" => "object",
+            "properties" => {
+              "url" => { "type" => "string" },
+              "filename" => { "type" => "string" },
+              "content_type" => { "type" => "string" }
+            }
+          }
+        when 'relation'
+          {
+            "type" => "object",
+            "properties" => {
+              "id" => { "type" => "string" },
+              "title" => { "type" => "string" }
+            }
+          }
+        when 'component'
+          {
+            "type" => "object",
+            "properties" => {
+              "id" => { "type" => "string" },
+              "type" => { "type" => "string" },
+              "fields" => { "type" => "object" }
+            }
+          }
+        else
+          { "type" => "string" }
+        end
+      end
+    end
+  end
+end 

data/app/views/layouts/rivet_cms/application.html.erb

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html class="h-full bg-gray-50">
+<head>
+  <title>Rivet CMS</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= yield :head %>
+
+  <%= javascript_include_tag "rivet_cms", "data-turbo-track": "reload", type: "module" %>
+  <%= stylesheet_link_tag "rivet_cms", "data-turbo-track": "reload", time: Time.now.to_i %>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700;900&display=swap" rel="stylesheet">
+  <%= brand_color_css.html_safe %>
+</head>
+<body class="h-full font-sans antialiased text-gray-900">
+  <div class="min-h-full">
+    <!-- Top navigation -->
+    <%= render "rivet_cms/shared/navigation" %>
+
+    <!-- Flash messages -->
+    <% if flash.any? %>
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-4">
+        <% flash.each do |type, message| %>
+          <div class="<%= flash_class_for(type) %> p-4 rounded-md mb-4">
+            <div class="flex">
+              <div class="flex-shrink-0">
+                <%= flash_icon_for(type) %>
+              </div>
+              <div class="ml-3">
+                <p class="text-sm font-medium"><%= message %></p>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+
+    <main>
+      <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
+        <%= yield %>
+      </div>
+    </main>
+  </div>
+</body>
+</html>

data/app/views/rivet_cms/api/docs/show.html.erb

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>RivetCMS - API Documentation</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= stylesheet_link_tag "rivet_cms", "data-turbo-track": "reload", time: Time.now.to_i %>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui.css">
+    <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui-bundle.js"></script>
+    <style>
+      .swagger-ui {
+        margin-top: 1rem;
+      }
+      .swagger-ui .topbar {
+        display: none;
+      }
+    </style>
+  </head>
+  <body class="bg-gray-50">
+    <div class="bg-white border-b border-gray-200 sticky top-0 z-50">
+      <nav class="flex h-12">
+        <%= link_to root_path, class: "inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-900" do %>
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard mr-2"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
+          Dashboard
+        <% end %>
+      </nav>
+    </div>
+    <div id="swagger-ui"></div>
+    <script>
+      window.onload = function() {
+        SwaggerUIBundle({
+          url: "<%= api_docs_path(format: :yaml) %>",
+          dom_id: '#swagger-ui',
+          deepLinking: true,
+          presets: [
+            SwaggerUIBundle.presets.apis,
+            SwaggerUIBundle.SwaggerUIStandalonePreset
+          ],
+          layout: "BaseLayout",
+          docExpansion: 'list',
+          defaultModelsExpandDepth: 1,
+          defaultModelExpandDepth: 1,
+          displayRequestDuration: true
+        });
+      };
+    </script>
+  </body>
+</html> 

data/app/views/rivet_cms/content_types/_form.html.erb

@@ -0,0 +1,98 @@
+<%= form_with(model: content_type, class: "space-y-8", id: "content_type_form", data: { controller: "content-type-form" }) do |form| %>
+  <div class="bg-white shadow-md rounded-lg overflow-hidden border border-gray-100">
+    <div class="px-6 py-5 border-b border-gray-200 bg-gray-50">
+      <h3 class="text-lg font-medium leading-6 text-gray-900">Content Type Details</h3>
+      <p class="mt-1 text-sm text-gray-500">
+        Define the basic information for your content type.
+      </p>
+    </div>
+    
+    <div class="px-6 py-6 space-y-8">
+      <div>
+        <%= form.label :name, class: "block text-sm font-medium text-gray-700 mb-1" %>
+        <div class="relative mt-1 group">
+        <%= form.text_field :name, 
+            class: "block w-full pl-10 px-4 py-3 rounded-md #{content_type.errors[:name].any? ? 'text-red-800 placeholder-red-300 focus:ring-1 focus:ring-red-500 focus:outline-none' : 'focus:ring-1 border-gray-300 focus:ring-gray-500 focus:outline-none'} shadow-sm sm:text-sm transition-all duration-200", 
+            placeholder: "e.g. Article, Product, Homepage",
+            data: { content_type_form_target: "name" } %>
+          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 #{content_type.errors[:name].any? ? 'text-red-400' : 'text-gray-400 group-hover:text-brand-500'} transition-colors duration-200" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
+              <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
+            </svg>
+          </div>
+        </div>
+        <% if content_type.errors[:name].any? %>
+          <p class="mt-2 text-sm text-red-600">Name <%= content_type.errors[:name].join(", ") %></p>
+        <% else %>
+          <p class="mt-2 text-sm text-gray-500">A human-readable name for your content type.</p>
+        <% end %>
+      </div>
+
+      <div>
+        <%= form.label :slug, class: "block text-sm font-medium text-gray-700 mb-1" %>
+        <div class="relative mt-1 group">
+          <%= form.text_field :slug, 
+              class: "block w-full pl-10 px-4 py-3 rounded-md #{content_type.errors[:slug].any? ? 'text-red-800 placeholder-red-300 focus:ring-1 focus:ring-red-500 focus:outline-none' : 'focus:ring-1 focus:ring-gray-500 focus:outline-none'} shadow-sm sm:text-sm font-mono transition-all duration-200", 
+              placeholder: "e.g. article, product, homepage",
+              data: { content_type_form_target: "slug" } %>
+          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 #{content_type.errors[:slug].any? ? 'text-red-400' : 'text-gray-400 group-hover:text-brand-500'} transition-colors duration-200" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd" />
+            </svg>
+          </div>
+        </div>
+        <% if content_type.errors[:slug].any? %>
+          <p class="mt-2 text-sm text-red-600">Slug <%= content_type.errors[:slug].join(", ") %></p>
+        <% else %>
+          <p class="mt-2 text-sm text-gray-500">The API identifier for this content type. Used in API routes.</p>
+        <% end %>
+      </div>
+
+      <div>
+        <%= form.label :description, class: "block text-sm font-medium text-gray-700 mb-1" %>
+        <div class="relative mt-1 group">
+          <%= form.text_area :description, 
+              rows: 3, 
+              class: "block w-full pl-10 px-4 py-3 rounded-md #{content_type.errors[:description].any? ? 'border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-brand-500 focus:border-brand-500'} shadow-sm sm:text-sm transition-all duration-200 group-hover:border-brand-300", 
+              placeholder: "Description of this content type" %>
+          <div class="absolute top-3 left-0 pl-3 flex items-start pointer-events-none">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 #{content_type.errors[:description].any? ? 'text-red-400' : 'text-gray-400 group-hover:text-brand-500'} transition-colors duration-200" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+            </svg>
+          </div>
+        </div>
+        <% if content_type.errors[:description].any? %>
+          <p class="mt-2 text-sm text-red-600">Description <%= content_type.errors[:description].join(", ") %></p>
+        <% else %>
+          <p class="mt-2 text-sm text-gray-500">Optional description for this content type.</p>
+        <% end %>
+      </div>
+
+      <div class="pt-2">
+        <div class="relative flex items-start">
+          <div class="flex items-center h-5">
+            <%= form.check_box :is_single, 
+                class: "h-5 w-5 rounded #{content_type.errors[:is_single].any? ? 'border-red-300 text-red-600 focus:ring-red-500' : 'border-gray-300 text-brand-600 focus:ring-brand-500'} transition-all duration-200",
+                data: { content_type_form_target: "isSingle" } %>
+          </div>
+          <div class="ml-3 text-sm">
+            <%= form.label :is_single, "Single Type", class: "font-medium text-gray-700" %>
+            <% if content_type.errors[:is_single].any? %>
+              <p class="text-red-600">Single Type <%= content_type.errors[:is_single].join(", ") %></p>
+            <% else %>
+              <p class="text-gray-500">If checked, this will be a single type (one entry). If unchecked, it will be a collection type (multiple entries).</p>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex justify-end pt-4">
+    <%= link_to content_types_path, class: "rounded-md border border-gray-300 bg-white py-3 px-5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 transition-all duration-200" do %>
+      Cancel
+    <% end %>
+    <%= form.submit class: "ml-3 inline-flex items-center rounded-md bg-brand-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-600 cursor-pointer" %>
+  </div>
+<% end %>