maglevcms 3.0.0.beta2 → 3.0.0

data/app/components/maglev/uikit/dropdown_component/dropdown_controller.js

@@ -47,7 +47,12 @@ export default class extends Controller {
   }
 
   disconnect() {
-    this.cleanup()
+    this.cleanup() // clean up the observer for the floating element
+
+    // fix issue: https://github.com/stimulus-use/stimulus-use/issues/500
+    this.enter = null
+    this.leave = null
+    this.toggleTransition = null
   }
 
   clickOutside() {

data/app/components/maglev/uikit/dropdown_component.rb

@@ -7,9 +7,14 @@ module Maglev
 
       attr_reader :placement
 
-      def initialize(placement: 'bottom-start')
+      def initialize(placement: 'bottom-start', wrapper_classes: nil)
+        @wrapper_classes = wrapper_classes
         @placement = placement
       end
+
+      def wrapper_classes
+        helpers.class_names('relative', @wrapper_classes)
+      end
     end
   end
 end

data/app/components/maglev/uikit/form/color_field_component.html.erb

@@ -50,7 +50,7 @@
             ) %>            
           <% end %>
                   
-          <div class="flex flex-row flex-wrap gap-2">
+          <div class="flex flex-row flex-wrap gap-2 p-2">
             <% presets.each do |preset| %>
               <%= tag.button(
                 type: 'button',

data/app/components/maglev/uikit/form/combobox_component.html.erb

@@ -33,6 +33,7 @@
         placeholder: placeholder || t('maglev.uikit.form.combobox.placeholder'),
         value: selected_label,
         aria: { controls: 'options', expanded: 'false' },
+        autocomplete: 'off',
         data: { 
           'uikit-form-combobox-target' => 'input', 
           'uikit-dropdown-target' => 'button', 

data/app/components/maglev/uikit/form/link_component.rb

@@ -59,7 +59,7 @@ module Maglev
 
         def self.link_type_component(input_name:, value:, path:)
           # Default to url if the link type is not found (shouldn't happen)
-          klass = link_type_klasses_map.fetch(value[:link_type].to_sym, 'url')
+          klass = link_type_klasses_map.fetch(value[:link_type]&.to_sym, default_link_type_klass)
 
           return unless klass
 
@@ -74,6 +74,10 @@ module Maglev
             static_page: Maglev::Uikit::Form::Link::StaticPageLinkComponent
           }
         end
+
+        def self.default_link_type_klass
+          Maglev::Uikit::Form::Link::UrlLinkComponent
+        end
       end
     end
   end

data/app/components/maglev/uikit/form/richtext_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 import { Editor, Document, Text, Paragraph, Heading, Blockquote, CodeBlock, History, Bold, Italic, Underline, Strike, Superscript, HardBreak, Link, ListItem, BulletList, OrderedList } from 'tiptap'
+import { log } from 'maglev-controllers/utils'
 
 const MaglevLink = Link.extend({
   addAttributes() {
@@ -205,11 +206,11 @@ export default class extends Controller {
   }
 
   openLinkModal(event) {
-    console.log('toggleLink', event)
+    log('toggleLink', event)
     const url = new URL(this.editLinkPathValue, window.location.origin)
     const link = this.editor.getAttributes('link')
 
-    console.log('toggleLink,build link from', link)
+    log('toggleLink,build link from', link)
     
     url.searchParams.set('input_name', this.inputNameValue)
     url.searchParams.set('link[href]', link.href ?? '')
@@ -230,8 +231,8 @@ export default class extends Controller {
   }
 
   setLink(event) {
-    const link = JSON.parse(event.detail)
-    console.log('setLink, link=', link)
+    const link = typeof event.detail === 'string' ? JSON.parse(event.detail) : event.detail
+    log('setLink, link=', link)
     this.editor.commands.setLink({ 
       href: link.href, 
       target: link.open_new_window ? '_blank' : '', 

data/app/components/maglev/uikit/form/search_form_component.html.erb

@@ -14,6 +14,7 @@
     value: value,
     placeholder: placeholder,
     aria_label: placeholder,
+    autocomplete: 'off',
     class: 'block w-full border-0 bg-transparent focus:outline-none placeholder-gray-500',
     data: { uikit_search_form_target: 'input' } 
   ) %>

data/app/components/maglev/uikit/icon_component.rb

@@ -68,6 +68,7 @@ module Maglev
         arrow_down: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current"><path fill="none" d="M0 0h24v24H0z"></path><path d="m12 13.172 4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"></path></svg>',
         arrow_left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg>',
         arrow_right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg>',
+        arrow_right_long: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M1.99974 13.0001L1.9996 11.0002L18.1715 11.0002L14.2218 7.05044L15.636 5.63623L22 12.0002L15.636 18.3642L14.2218 16.9499L18.1716 13.0002L1.99974 13.0001Z"></path></svg>',
 
         image: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4.828 21l-.02.02-.021-.02H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H4.828zM20 15V5H4v14L14 9l6 6zm0 2.828l-6-6L6.828 19H20v-1.172zM8 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#000"/></svg>',
 
@@ -131,6 +132,8 @@ module Maglev
 
         logout: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 22a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v3h-2V4H6v16h12v-2h2v3a1 1 0 0 1-1 1H5zm13-6v-3h-7v-2h7V8l5 4-5 4z"/></svg>',
 
+        history: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12H4C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.25022 4 6.82447 5.38734 5.38451 7.50024L8 7.5V9.5H2V3.5H4L3.99989 5.99918C5.82434 3.57075 8.72873 2 12 2ZM13 7L12.9998 11.585L16.2426 14.8284L14.8284 16.2426L10.9998 12.413L11 7H13Z"></path></svg>',
+
         # Spinners
         spinner: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.364 5.63604L16.9497 7.05025C15.683 5.7835 13.933 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12H21C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63604Z"></path></svg>'
       }.with_indifferent_access.freeze

data/app/components/maglev/uikit/image_library/uploader_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 import { FetchRequest } from '@rails/request.js'
+import { log } from 'maglev-controllers/utils'
 
 export default class extends Controller {
   static targets = ['button', 'fileInput']
@@ -11,7 +12,7 @@ export default class extends Controller {
   }
 
   connect() {
-    console.log('UploaderController connected')
+    log('UploaderController connected')
   }
 
   openFileDialog() {    
@@ -64,7 +65,7 @@ export default class extends Controller {
   }
 
   reloadFrameTag() {
-    console.log('reloadFrameTag', this.refreshPathValue)
+    log('reloadFrameTag', this.refreshPathValue)
     const frame = document.querySelector(`turbo-frame#modal-dialog`)
     if (frame) {
       frame.src = this.refreshPathValue

data/app/components/maglev/uikit/list/list_item_component.html.erb

@@ -1,29 +1,48 @@
 <%= tag.div(data: { sortable_target: sortable_target, item_id: id, item_index: index }) do %>
-  <%= tag.div(class: wrapper_classes) do %>
+  <%= content_tag(wrapper_tag_name.to_sym, class: wrapper_classes) do %>
+    <%= content if content? %>
 
     <%= tag.div(class: 'flex items-center cursor-move', data: { sortable_target: sortable_handle }) do %>
       <%= render Maglev::Uikit::IconComponent.new(name: "draggable") %>
     <% end if handle? %>
     
     <% item_body = capture do %>
-      <% if image? %>
-        <div class="h-8 w-8 bg-gray-400">
-          <%= image %>
+      <% if icon? %>
+        <div class="grid grid-cols-[auto_1fr_auto] flex flex-1 items-center">
+          <div class="mr-2">
+            <%= icon %>
+          </div>
+          <div class="text-gray-800 truncate"><%= title %></div>
+          <% if sub_title? %>
+            <div class="col-start-2 text-gray-500 text-xs"><%= sub_title %></div>
+          <% end %>
         </div>
-      <% end %>
-
-      <% if big_image? %>
-        <%= big_image %>
-      <% end %>
+      <% else %>
+        <% if image? %>
+          <div class="h-8 w-8 bg-gray-400">
+            <%= image %>
+          </div>
+        <% end %>
 
-      <div class="flex flex-col overflow-hidden">
-        <% if pre_title? %>
-          <div class="text-gray-500 text-xs"><%= pre_title %></div>
-          <div class="text-gray-800 truncate"><%= title %></div>
-        <% else %>
-          <div class="truncate"><%= title %></div>
+        <% if big_image? %>
+          <%= big_image %>
         <% end %>
-      </div>    
+
+        <div class="flex flex-col overflow-hidden">
+          <% if pre_title? %>
+            <div class="text-gray-500 text-xs"><%= pre_title %></div>
+            <div class="text-gray-800 truncate"><%= title %></div>
+            <% if sub_title? %>
+              <div class="text-gray-500 text-xs"><%= sub_title %></div>
+            <% end %>
+          <% else %>
+            <div class="truncate"><%= title %></div>
+            <% if sub_title? %>
+              <div class="text-gray-500 text-xs"><%= sub_title %></div>
+            <% end %>
+          <% end %>
+        </div>    
+      <% end %>
     <% end %>
 
     <% if link? %>
@@ -41,7 +60,5 @@
         <%= action %>
       </div>
     <% end %>  
-  <% end %>
-
-  <%= content if content? %>
+  <% end %>  
 <% end %>

data/app/components/maglev/uikit/list/list_item_component.rb

@@ -7,16 +7,20 @@ module Maglev
         renders_one :handle
         renders_one :image
         renders_one :big_image
+        renders_one :icon
         renders_one :pre_title
+        renders_one :sub_title
         renders_one :title
         renders_one :action
 
-        attr_reader :link, :index, :options
+        attr_reader :link, :index, :options, :variant, :wrapper_tag_name
 
         def initialize(id: nil, link: nil, options: {})
           @id = id
           @link = link
+          @variant = options.fetch(:variant, :filled).to_sym
           @custom_wrapper_classes = options[:wrapper_classes]
+          @wrapper_tag_name = options[:wrapper_tag] || :div
           @index = options[:index]
           @options = options
         end
@@ -37,18 +41,28 @@ module Maglev
           link[:data] || {}
         end
 
+        # rubocop:disable Metrics/MethodLength
         def wrapper_classes
           class_variants(
-            base: 'bg-gray-100 rounded-md px-2 flex text-gray-800'
-          ).render(class: @custom_wrapper_classes)
+            base: 'rounded-md flex text-gray-800',
+            variants: {
+              variant: {
+                filled: 'bg-gray-100',
+                ghost: 'hover:bg-gray-50 transition-colors duration-200'
+              },
+              padding: { default: 'p-2', medium: 'p-3' }
+            },
+            default: { variant: :filled, padding: :default }
+          ).render(variant: variant, padding: big_image? ? :medium : :default, class: @custom_wrapper_classes)
         end
+        # rubocop:enable Metrics/MethodLength
 
         def content_classes
           class_variants(
-            base: 'flex flex-1 py-3 gap-3 overflow-hidden px-2',
+            base: 'flex flex-1 gap-3 overflow-hidden',
             variants: {
               disposition: {
-                row: 'flex-row items-center',
+                row: 'flex-row items-center px-2',
                 col: 'flex-col'
               }
             },

data/app/components/maglev/uikit/locale_switcher_component/locale_switcher_component.html.erb

@@ -1,22 +1,18 @@
 <%= render(Maglev::Uikit::MenuDropdownComponent.new) do |dropdown| %>
   <% dropdown.with_trigger do %>
-    <button 
-      class="flex-1 h-full w-full px-6 hover:bg-gray-100 transition-colors duration-200 flex items-center focus:outline-none focus:none cursor-pointer space-x-2"
-      data-action="click->uikit-dropdown#toggle" 
-      data-uikit-dropdown-target="button">
+    <%= tag.button class: helpers.maglev_button_classes(color: :secondary, class: 'space-x-2'), data: { action: 'click->uikit-dropdown#toggle', 'uikit-dropdown-target': 'button' } do %>
       <%= render Maglev::Uikit::IconComponent.new(name: 'global') %>
       <span class="whitespace-nowrap">
         <%= current_locale_label %>
       </span>
       <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_down') %>
-    </button>
+    <% end %>
   <% end %>
   
   <% locales.each do |locale| %>
-    <% dropdown.with_item do %>
-      <%= link_to locale[:path], class: dropdown.item_classes, data: locale[:data_attributes] do %>
-        <span class="<%= 'font-bold' if locale[:value] == current_locale %>"><%= locale[:label] %></span>
-      <% end %>
-    <% end %>
+    <% dropdown.with_item_link_to(locale[:path], data: locale[:data_attributes]) do |menu_item| %>
+      <% menu_item.with_label_content(locale[:label]) %>
+      <% menu_item.with_icon_content('check') if locale[:value] == current_locale %>
+    <% end %>   
   <% end %>
 <% end %>

data/app/components/maglev/uikit/menu_dropdown_component/menu_dropdown_component.html.erb

@@ -1,13 +1,17 @@
-<%= render Maglev::Uikit::DropdownComponent.new(placement: placement) do |component| %>
+<%= render Maglev::Uikit::DropdownComponent.new(placement: placement, wrapper_classes: wrapper_classes) do |component| %>
   <% component.with_trigger do %>
     <% if trigger.present? %>
       <%= trigger %>
+    <% elsif trigger_classes.present? && icon_name.present? %>
+      <%= button_tag class: trigger_classes, data: { action: "click->uikit-dropdown#toggle", 'uikit-dropdown-target': 'button' } do %>
+        <%= render Maglev::Uikit::IconComponent.new(name: icon_name) %>
+      <% end %>
     <% else %>
       <%= render Maglev::Uikit::IconButtonComponent.new(icon_name: icon_name, data: { action: "click->uikit-dropdown#toggle", 'uikit-dropdown-target': 'button' }) %>
     <% end %>
   <% end %>
 
-  <div class="flex flex-col w-48 text-gray-800">
+  <div class="<%= list_item_classes %>">
     <% items.each do |item| %>
       <%= item %>
     <% end %>

data/app/components/maglev/uikit/menu_dropdown_component.rb

@@ -3,30 +3,267 @@
 module Maglev
   module Uikit
     class MenuDropdownComponent < Maglev::Uikit::BaseComponent
+      module RenderPolymorphicItems
+        extend ActiveSupport::Concern
+
+        included do
+          renders_many :items, types: {
+            button: lambda { |options = nil|
+              Maglev::Uikit::MenuDropdownComponent::ButtonItemComponent.new(options, parent: self)
+            },
+            link_to: lambda { |options = nil, html_options = nil|
+              Maglev::Uikit::MenuDropdownComponent::LinkToItemComponent.new(options, html_options, parent: self)
+            },
+            button_to: lambda { |options = nil, html_options = nil|
+              Maglev::Uikit::MenuDropdownComponent::ButtonToItemComponent.new(options, html_options, parent: self)
+            },
+            text: lambda { |options = nil|
+              Maglev::Uikit::MenuDropdownComponent::TextItemComponent.new(options, parent: self)
+            },
+            nested_menu: lambda { |placement:|
+              Maglev::Uikit::MenuDropdownComponent::NestedMenuComponent.new(placement: placement, parent: self)
+            },
+            wrapper: lambda { |options = nil|
+              Maglev::Uikit::MenuDropdownComponent::WrapperItemComponent.new(options, parent: self)
+            },
+            divider: -> { Maglev::Uikit::MenuDropdownComponent::DividerItemComponent.new(parent: self) }
+          }
+        end
+      end
+
       renders_one :trigger
-      renders_many :items
+      include RenderPolymorphicItems
 
-      attr_reader :icon_name, :placement
+      attr_reader :icon_name, :placement, :wrapper_classes, :trigger_classes
 
-      def initialize(icon_name: nil, placement: 'bottom-start')
+      def initialize(icon_name: nil, placement: 'bottom-start', wrapper_classes: nil, trigger_classes: nil)
         @icon_name = icon_name
         @placement = placement
+        @wrapper_classes = wrapper_classes
+        @trigger_classes = trigger_classes
+      end
+
+      def list_item_classes
+        'text-gray-800 grid grid-cols-[auto_1fr_auto] min-w-[12rem] my-1'
       end
 
+      # rubocop:disable Metrics/MethodLength
       def item_classes(...)
         class_variants(
           base: %(
-            flex items-center px-4 py-4 hover:bg-gray-100 w-full
-            transition-colors duration-200 focus:outline-none cursor-pointer flex-1
-          )
+            col-span-3 grid grid-cols-subgrid
+            flex flex-1 items-center px-2 py-3 w-full mx-1 rounded-sm text-left
+            transition-colors duration-200 focus:outline-none cursor-pointer
+          ),
+          variants: {
+            danger: 'text-red-600 hover:bg-red-100',
+            '!danger': 'hover:bg-gray-100',
+            subdued: 'text-gray-400'
+          },
+          defaults: { danger: false, subdued: false }
         ).render(...)
       end
+      # rubocop:enable Metrics/MethodLength
 
       def form_item_classes(...)
         class_variants(
-          base: 'flex items-center focus:outline-none cursor-pointer'
+          base: %w[
+            col-span-3 grid grid-cols-subgrid
+            flex items-center focus:outline-none cursor-pointer
+          ]
         ).render(...)
       end
+
+      class ItemComponent < ViewComponent::Base
+        renders_one :icon
+        renders_one :label
+        renders_one :sub_label
+        renders_one :right_icon
+
+        def self.inner_content
+          <<-ERB
+            <%= render Maglev::Uikit::IconComponent.new(name: icon.to_s, size: '1.15rem', class_names: 'mr-2 shrink-0') if icon? %>
+            <span class="<%= 'col-start-2' unless icon? %> whitespace-nowrap whitespace-nowrap truncate overflow-hidden">
+              <%= label %>
+            </span>
+            <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_right', size: '1.15rem', class_names: 'ml-2 shrink-0') if right_arrow? %>
+            <span class="col-start-2 whitespace-nowrap whitespace-nowrap truncate overflow-hidden text-xs text-gray-500">
+              <%= sub_label %>
+            </span>
+          ERB
+        end
+
+        def right_arrow?
+          false
+        end
+      end
+
+      class TextItemComponent < ItemComponent
+        attr_reader :options, :parent_component, :variant
+
+        def initialize(options = nil, parent: nil)
+          @parent_component = parent
+          @options = options || {}
+          @variant = @options.delete(:variant)
+
+          apply_parent_classes
+        end
+
+        erb_template <<-ERB
+          <%= tag.span(**options) do %>
+            #{inner_content}
+          <% end %>
+        ERB
+
+        private
+
+        def apply_parent_classes
+          options[:class] = parent_component.item_classes(subdued: variant == 'subdued', class: options[:class])
+        end
+      end
+
+      class LinkToItemComponent < ItemComponent
+        attr_reader :options, :html_options, :parent_component, :variant
+
+        def initialize(options = nil, html_options = nil, parent: nil)
+          @parent_component = parent
+          @options = options
+          @html_options = html_options || {}
+          @variant = @html_options.delete(:variant)
+
+          apply_parent_classes
+        end
+
+        erb_template <<-ERB
+          <%= link_to options, html_options do %>
+            #{inner_content}
+          <% end %>
+        ERB
+
+        private
+
+        def apply_parent_classes
+          html_options[:class] = parent_component.item_classes(danger: variant == 'danger', class: html_options[:class])
+        end
+      end
+
+      class ButtonItemComponent < ItemComponent
+        attr_reader :options, :parent_component
+
+        def initialize(options = nil, parent: nil)
+          @parent_component = parent
+          @options = (options || {}).merge(type: 'button')
+
+          apply_parent_classes
+        end
+
+        erb_template <<-ERB
+          <%= button_tag options do %>
+            #{inner_content}
+          <% end %>
+        ERB
+
+        private
+
+        def apply_parent_classes
+          options[:class] = parent_component.item_classes(class: options[:class])
+        end
+      end
+
+      class ButtonToItemComponent < LinkToItemComponent
+        erb_template <<-ERB
+          <%= button_to options, html_options do %>
+            #{inner_content}
+          <% end %>
+        ERB
+
+        private
+
+        def apply_parent_classes
+          super
+          html_options[:form_class] = parent_component.form_item_classes(class: html_options[:form_class])
+        end
+      end
+
+      class NestedMenuComponent < ItemComponent
+        include RenderPolymorphicItems
+
+        attr_reader :placement, :parent_component
+
+        delegate :list_item_classes, :item_classes, :form_item_classes, to: :parent_component
+
+        alias wrapper_classes form_item_classes
+
+        def initialize(placement:, parent:)
+          @placement = placement
+          @parent_component = parent
+        end
+
+        erb_template <<-ERB
+          <%= render Maglev::Uikit::DropdownComponent.new(placement: placement, wrapper_classes: wrapper_classes) do |dropdown| %>
+            <% dropdown.with_trigger do %>
+              <%= button_tag class: item_classes, data: { action: 'click->uikit-dropdown#toggle', 'uikit-dropdown-target': 'button' } do %>
+                #{inner_content}#{'                '}
+              <% end %>
+            <% end %>
+
+            <div class="<%= list_item_classes %>">
+              <% items.each do |item| %>
+                <%= item %>
+              <% end %>
+            </div>
+          <% end %>
+        ERB
+
+        def right_arrow?
+          true
+        end
+      end
+
+      class WrapperItemComponent < Maglev::Uikit::BaseComponent
+        include RenderPolymorphicItems
+
+        attr_reader :options, :parent_component
+
+        delegate :item_classes, :form_item_classes, to: :parent_component
+
+        def initialize(options, parent: nil)
+          @parent_component = parent
+          @options = options || {}
+
+          apply_parent_classes
+        end
+
+        erb_template <<-ERB
+          <%= tag.div(**options) do %>
+            <% items.each do |item| %>
+              <%= item %>
+            <% end %>
+          <% end %>
+        ERB
+
+        private
+
+        def apply_parent_classes
+          options[:class] = parent_component.form_item_classes(class: options[:class])
+        end
+      end
+
+      class DividerItemComponent < ItemComponent
+        attr_reader :parent_component
+
+        def initialize(parent:)
+          @parent_component = parent
+        end
+
+        def item_classes(...)
+          parent_component.form_item_classes(class: 'border-t border-gray-200 my-1 px-0!')
+        end
+
+        erb_template <<-ERB
+          <%= tag.hr class: item_classes %>
+        ERB
+      end
     end
   end
 end