poetry-ui 0.0.2

data/app/components/poetry/ui/date_field/component.rb

@@ -0,0 +1,209 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    # DateField family: the segmented date editor over a native input.
+    module DateField
+      # A segmented date editor: a real native <input type=date> IS the
+      # form value - with no JS the native picker works and the value is
+      # already ISO - progressively enhanced into per-segment
+      # role=spinbutton editing. The locale decides segment order and
+      # numerals; arrows cycle values, typed digits accumulate and
+      # auto-advance, and blur constrains impossible dates like
+      # February 31st. The enhanced input drops out of the tab order but
+      # keeps carrying name/required/min/max - native constraint
+      # validation stays on.
+      #
+      # @example
+      #   render Poetry::Ui::DateField::Component.new(name: "event[on]", label: "Event date")
+      class Component < Poetry::Core::Component
+        include Poetry::Ui::InputGroupField
+
+        # Projected into the registry, llms.txt, and the agent surface.
+        AGENT_RULES = [
+          "Date entry is a DateField (poetry_date_field / form.date_field) - never a masked " \
+          "Input, three selects, or a bare input type=date when the design system is in play.",
+          "The native input is the form value: params[<name>] is ISO (yyyy-mm-dd) with or " \
+          "without JS; min:/max: take Date or ISO strings and ride native validation.",
+          "Pair with a Label/Field for the accessible name (label for= the input id); " \
+          "standalone use takes label: - segments announce it themselves.",
+          "Locale drives segment order and numerals automatically; pass locale: only to pin " \
+          "a field to a different locale than the page."
+        ].freeze
+
+        # TimeField subclasses this and EXTENDS the root element with its
+        # seconds/hour-cycle values - the declarations-inheritance seam.
+        use_stimulus do
+          on :root do
+            controller :date_field do
+              register
+              value :locale, if: -> { locale.present? }
+              value :placeholder, from: :placeholder_iso
+              value :labels, from: :segment_labels_json
+              value :placeholders, from: :segment_placeholders_json
+            end
+          end
+          on :group do
+            controller :date_field do
+              target :group
+              action :focusGap, on: :click
+              action :settle, on: :focusout
+            end
+          end
+          on :input do
+            controller(:date_field) { target :input }
+          end
+        end
+
+        option :name, :string, required: true,
+                               doc: "The form field name - required; the value posts as ISO yyyy-mm-dd with or " \
+                                    "without JS."
+        option :value, ActiveModel::Type::Value.new, doc: "Date, or an ISO yyyy-mm-dd string; nil renders empty."
+        option :min, ActiveModel::Type::Value.new,
+               doc: "The earliest allowed date (Date or ISO string) - rides native constraint validation."
+        option :max, ActiveModel::Type::Value.new,
+               doc: "The latest allowed date (Date or ISO string) - rides native constraint validation."
+        option :required, :boolean, default: false, doc: "Marks the native input required."
+        option :disabled, :boolean, default: false, doc: "Disables the field; the segment group dims and goes inert."
+        option :readonly, :boolean, default: false, doc: "The value shows but cannot be edited."
+        option :invalid, :boolean, default: false, doc: "Paints the destructive border/ring and sets aria-invalid."
+        option :id, :string, doc: "The native input's DOM id - the Field label target."
+        option :label, :string,
+               doc: "Standalone accessible name; inside a form the Field label wires ids instead. Segments announce " \
+                    "it themselves."
+        option :described_by, :string, doc: "Ids for aria-describedby (hint or error text)."
+        option :locale, :string, doc: "Pins the field to a locale other than the page's."
+        option :placeholder_value, ActiveModel::Type::Value.new,
+               doc: "What the first arrow press on an empty segment lands on; defaults to today."
+
+        part "date-field", "Root - the controller and the enhanced/disabled surface ride here",
+             states: {
+               "data-enhanced" => "the controller connected and built segments (no JS = the " \
+                                  "native input, visible and styled)",
+               "data-disabled" => "disabled: is set",
+               "data-invalid" => "invalid: is set (the group wears the destructive ring)"
+             }
+        # The segments themselves are controller-BUILT (the FileInput list
+        # precedent, so they are prose here, not parts): each editable
+        # segment is span[data-slot=date-field-segment] with data-type=
+        # year|month|day|hour|minute|second|dayPeriod, role=spinbutton
+        # (role=textbox on iOS, where VoiceOver cannot focus spinbuttons),
+        # and data-placeholder while unfilled; locale separators are
+        # span[data-slot=date-field-literal] aria-hidden. Those data-slot
+        # names are the restyle seam.
+        part "date-field-group", "The bordered segment row (cn-input chrome, focus-within " \
+                                 "ring) - hidden until enhancement, then the editing surface " \
+                                 "the controller fills with segments",
+             states: {
+               "data-disabled" => "disabled: is set (chrome dims, pointer events off)",
+               "data-invalid" => "invalid: is set (destructive border + ring)"
+             }
+        part "date-field-input", "The native <input type=date> - THE form value in both " \
+                                 "modes; tabindex -1 + aria-hidden once segments exist"
+
+        # Attributes for the field root.
+        # @api private
+        def root_attributes
+          attrs = {
+            "data-slot" => slot_prefix,
+            "class" => css
+          }.merge(component_data_attributes)
+          attrs["data-disabled"] = "" if disabled
+          attrs["data-invalid"] = "" if invalid
+          html_attributes.merge_if_not_set(attrs.merge(stimulus_attributes_for(:root)))
+        end
+
+        # Attributes for the segment row the controller fills.
+        # @api private
+        def group_attributes
+          attrs = {
+            "role" => "presentation",
+            "data-slot" => "#{slot_prefix}-group",
+            "class" => group_classes
+          }
+          attrs["aria-label"] = label if label.present?
+          attrs["data-invalid"] = "" if invalid
+          attrs["data-disabled"] = "" if disabled
+          attrs.merge(stimulus_attributes_for(:group))
+        end
+
+        # Attributes for the native input - the form value.
+        # @api private
+        def input_attributes
+          attrs = Poetry::Core::HTML::Attributes.new(
+            "type" => input_type,
+            "name" => name,
+            "id" => control_id,
+            "data-slot" => "#{slot_prefix}-input",
+            "class" => "#{Input::Style.css} #{css(:input)}"
+          )
+          attrs["value"] = iso(value) if value.present?
+          attrs["min"] = iso(min) if min.present?
+          attrs["max"] = iso(max) if max.present?
+          attrs["aria-label"] = label if label.present?
+          attrs["aria-invalid"] = "true" if invalid && !disabled
+          attrs["aria-describedby"] = described_by if described_by.present?
+          attrs["required"] = "" if required
+          attrs["disabled"] = "" if disabled
+          attrs["readonly"] = "" if readonly
+          attrs.merge!(stimulus_attributes_for(:input))
+          attrs
+        end
+
+        private
+
+        def input_type
+          "date"
+        end
+
+        def slot_prefix
+          "date-field"
+        end
+
+        def group_classes
+          css(:group)
+        end
+
+        def iso(candidate)
+          candidate.respond_to?(:strftime) ? candidate.strftime("%F") : candidate.to_s
+        end
+
+        def placeholder_iso
+          placeholder_value.present? ? iso(placeholder_value) : Date.current.strftime("%F")
+        end
+
+        # The AT-facing strings (segment-name fallbacks + the Empty
+        # valuetext) and the visual placeholder text per segment - the
+        # only translated surface; dates localize themselves via Intl.
+        def segment_labels
+          {
+            empty: t("poetry.date_field.empty"),
+            year: t("poetry.date_field.year"),
+            month: t("poetry.date_field.month"),
+            day: t("poetry.date_field.day"),
+            hour: t("poetry.date_field.hour"),
+            minute: t("poetry.date_field.minute"),
+            second: t("poetry.date_field.second"),
+            dayPeriod: t("poetry.date_field.day_period")
+          }
+        end
+
+        def segment_placeholders
+          {
+            year: t("poetry.date_field.placeholder_year"),
+            month: t("poetry.date_field.placeholder_month"),
+            day: t("poetry.date_field.placeholder_day"),
+            hour: t("poetry.date_field.placeholder_time"),
+            minute: t("poetry.date_field.placeholder_time"),
+            second: t("poetry.date_field.placeholder_time")
+          }
+        end
+
+        def segment_labels_json = segment_labels.to_json
+        def segment_placeholders_json = segment_placeholders.to_json
+
+        private :root_attributes, :group_attributes, :input_attributes
+      end
+    end
+  end
+end

data/app/components/poetry/ui/date_field/preview.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module DateField
+      class Preview < Poetry::Core::Preview::Base
+        # Empty: placeholder segments (mm/dd/yyyy under en) once enhanced;
+        # the styled native input before that.
+        def default
+          render_component(name: "event[on]", label: "Event date")
+        end
+
+        # A server value fills the segments; the native input carries ISO.
+        def with_value
+          render_component(name: "invoice[due_on]", value: Date.new(2026, 3, 9), label: "Due date")
+        end
+
+        def with_range
+          render_component(name: "booking[night]", label: "First night",
+                           min: Date.new(2026, 1, 1), max: Date.new(2026, 12, 31))
+        end
+
+        def invalid
+          render_component(name: "event[on]", label: "Event date", invalid: true,
+                           value: Date.new(2020, 2, 29))
+        end
+
+        def disabled
+          render_component(name: "event[on]", label: "Event date", disabled: true,
+                           value: Date.new(2026, 7, 13))
+        end
+
+        # locale: pins segment order and placeholders (dd.mm.yyyy under
+        # de-DE) instead of following the page locale.
+        def localized
+          render_component(name: "geburt[am]", label: "Geburtsdatum", locale: "de-DE",
+                           value: Date.new(2026, 3, 9))
+        end
+      end
+    end
+  end
+end

data/app/components/poetry/ui/date_field/style.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module DateField
+      # Utility-only (the Separator/Spinner rule): the GROUP wears
+      # cn-input's field chrome (zero new theme CSS) with a focus-within
+      # ring standing in for the input's focus-visible one, since focus
+      # lives on the segments inside. Segments and literals are
+      # controller-BUILT, so their look rides descendant variants on the
+      # group (the FileInput list idiom). The group stays hidden until the
+      # controller stamps data-enhanced on the root; until then the native
+      # input is the visible, styled control (no-JS = native pickers).
+      class Style < Poetry::Core::Style
+        base "group/date-field flex w-full flex-col"
+
+        element :group,
+                "cn-input hidden w-fit min-w-0 select-none items-center tabular-nums " \
+                "group-data-[enhanced]/date-field:flex " \
+                "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 " \
+                "data-invalid:border-destructive data-invalid:ring-destructive/20 " \
+                "dark:data-invalid:ring-destructive/40 " \
+                "data-disabled:pointer-events-none data-disabled:opacity-50 " \
+                "[&_[data-slot=date-field-segment]]:rounded-sm " \
+                "[&_[data-slot=date-field-segment]]:px-0.5 " \
+                "[&_[data-slot=date-field-segment]]:outline-none " \
+                "[&_[data-slot=date-field-segment]:focus]:bg-accent " \
+                "[&_[data-slot=date-field-segment]:focus]:text-accent-foreground " \
+                "[&_[data-slot=date-field-segment][data-placeholder]]:text-muted-foreground " \
+                "[&_[data-slot=date-field-literal]]:text-muted-foreground"
+        element :input, "group-data-[enhanced]/date-field:sr-only"
+      end
+    end
+  end
+end

data/app/components/poetry/ui/date_picker/component.html.erb

@@ -0,0 +1,23 @@
+<%= content_tag(:div, **root_attributes.to_attributes) do %>
+  <% if input_variant? %>
+    <%= render Poetry::Ui::InputGroup::Component.new do %>
+      <%= helpers.poetry_input_group_input(**input_attributes.symbolize_keys) %>
+      <%= helpers.poetry_input_group_addon(align: :"inline-end") do %>
+        <%= render Poetry::Ui::Popover::Component.new(**popover_options, align: :end) do |popover| %>
+          <% popover.with_trigger(**input_trigger_options) do %>
+            <%= render Poetry::Ui::Icon::Component.new(name: :calendar) %>
+          <% end %>
+          <%= render Poetry::Ui::Calendar::Component.new(**calendar_options) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% else %>
+    <%= render Poetry::Ui::Popover::Component.new(**popover_options) do |popover| %>
+      <% popover.with_trigger(**trigger_options) do %>
+        <%= render Poetry::Ui::Icon::Component.new(name: :calendar) %>
+        <span class="min-w-0 truncate" <%= tag.attributes(**label_target_attributes) %>><%= formatted %></span>
+      <% end %>
+      <%= render Poetry::Ui::Calendar::Component.new(**calendar_options) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/poetry/ui/date_picker/component.rb

@@ -0,0 +1,242 @@
+# frozen_string_literal: true
+
+require "date"
+
+module Poetry
+  module Ui
+    # DatePicker family: a field-shaped trigger opening a calendar popover.
+    module DatePicker
+      # A date picker: a field-shaped trigger that opens a Calendar in a
+      # Popover. Composition, not a new primitive: the Popover owns the
+      # overlay, the Calendar owns selection and the form value (name:
+      # posts the chosen date as ISO through its hidden input), and a
+      # thin glue layer formats the trigger label and closes on pick. A
+      # preselected value: renders the formatted label and the chosen day
+      # with no JS.
+      #
+      # @example
+      #   render Poetry::Ui::DatePicker::Component.new(
+      #     name: "due_on", label: "Due date", value: Date.new(2026, 6, 5)
+      #   )
+      class Component < Poetry::Core::Component
+        # Composition: every DatePicker renders a Popover, whose minted
+        # trigger/content ids ride this DOM - a cached or looped
+        # DatePicker without identity freezes them, so the stable-identity
+        # warning is the point. Forces the registry identity fact past
+        # the source derivation (no funnel call in this family itself);
+        # popover_options forwards key:/id: to that Popover, so the
+        # warning's remedy works through the composition.
+        IDENTITY = true
+
+        # Projected into the registry, llms.txt, and the agent surface.
+        AGENT_RULES = [
+          "name: is REQUIRED - the chosen date posts as an ISO string (the Calendar's hidden input).",
+          "value: preselects a date (a Date or ISO string) - the trigger shows it formatted, no JS needed.",
+          "min:/max: bound the selectable range; the label + placeholder are the trigger's text.",
+          "key:/id: forwards to the composed Popover - a keyed DatePicker renders cache-stable popover ids.",
+          "variant: :input renders a text field with a calendar button - typed parseable dates " \
+          "re-select the calendar; single mode only.",
+          "For an always-visible grid use Calendar directly - DatePicker is the field+popover form."
+        ].freeze
+
+        use_stimulus do
+          on :root do
+            controller :date_picker do
+              register
+              value :placeholder
+              value :mode, "range", if: :range?
+              action :picked, on: event(:calendar, :change)
+            end
+          end
+          on :label do
+            controller(:date_picker) { target :label }
+          end
+          # The input variant's text field: the picker's input target plus
+          # the typed-date sync and ArrowDown-opens actions.
+          on :input do
+            controller :date_picker do
+              target :input
+              action :input_changed, on: :input
+              action :input_keydown, on: :keydown
+            end
+          end
+        end
+
+        option :name, :string, required: true, doc: "The form field name - required; the chosen date posts as ISO."
+        option :mode, :symbol, default: :single,
+                               doc: ":single or :range (two-date selection; the trigger shows the joined pair)."
+        option :placeholder, :string, default: "Pick a date", doc: "Trigger text while nothing is chosen."
+        option :label, :string,
+               doc: "The trigger's accessible name (aria-label)."
+        option :variant, :symbol, default: :button,
+                                  doc: ":button (the default trigger) or :input - a text field that accepts a typed " \
+                                       "date (parseable text re-selects the calendar) with a calendar icon-button " \
+                                       "opening the popover. Single mode only."
+        option :caption_layout, :symbol, default: :label,
+                                         doc: "Forwarded to the wrapped Calendar: :dropdown swaps the caption for " \
+                                              "month + year selects (the date-of-birth recipe - min:/max: bound the " \
+                                              "year list)."
+
+        # ONE owned part: DatePicker is composition - the Popover owns the
+        # overlay, the Calendar owns the grid + the form value, the trigger
+        # Button owns data-slot=date-picker-trigger (each under its own
+        # data-component root, so each declares its own contract).
+        part "date-picker", "Root wrapper - the glue controller (formats the trigger label, " \
+                            "closes on pick) around the composed Popover + Calendar"
+
+        # Parses the date collaborators (value/min/max/month) up front.
+        # @api private
+        def initialize(value: nil, min: nil, max: nil, month: nil, **)
+          super(**)
+          if range?
+            @range_start, @range_end = parse_range(value)
+          else
+            @value = to_date(value)
+          end
+          @min = to_date(min)
+          @max = to_date(max)
+          @month = to_date(month)
+        end
+
+        # Enforces the name/variant/mode contracts.
+        # @api private
+        def before_render
+          raise ArgumentError, "DatePicker requires name: (the form field)" if name.blank?
+          raise ArgumentError, "DatePicker variant: must be :button or :input" unless %i[button input].include?(variant)
+          raise ArgumentError, "DatePicker variant: :input is single-mode only" if input_variant? && range?
+        end
+
+        # The parsed date collaborators for the template.
+        # @api private
+        attr_reader :value, :min, :max, :month, :range_start, :range_end
+
+        # Whether mode: is :range.
+        # @api private
+        def range? = mode == :range
+
+        # Whether variant: is :input.
+        # @api private
+        def input_variant? = variant == :input
+
+        # Range mode joins the pair with SHORT month names ("Jun 5, 2026 -
+        # Jun 12, 2026" - two long-month dates outgrow any reasonable
+        # trigger); a start-only value shows one date.
+        # @api private
+        def formatted
+          if range?
+            return placeholder unless @range_start
+
+            [@range_start, @range_end].compact.map { |date| date.strftime("%b %-d, %Y") }.join(" – ")
+          else
+            @value ? @value.strftime("%B %-d, %Y") : placeholder
+          end
+        end
+
+        # Options forwarded to the wrapped Calendar.
+        # @api private
+        def calendar_options
+          selected = range? ? [@range_start, @range_end].compact.presence : @value
+          { name: name, mode: (:range if range?), selected: selected,
+            caption_layout: (caption_layout unless caption_layout == :label),
+            min: @min, max: @max, month: @month || @value || @range_start }.compact
+        end
+
+        # Attributes for the root wrapper.
+        # @api private
+        def root_attributes
+          html_attributes.merge_if_not_set(
+            { "data-slot" => "date-picker", "class" => css }
+              .merge(stimulus_attributes_for(:root)).merge(component_data_attributes)
+          )
+        end
+
+        # Button options for the field-shaped trigger.
+        # @api private
+        def trigger_options
+          {
+            variant: :outline,
+            label: label.presence,
+            class: css(range? ? :trigger_range : :trigger_single,
+                       class: [css(:trigger_chrome),
+                               (css(:trigger_placeholder) unless value)].compact.join(" ")),
+            data: { slot: "date-picker-trigger" }
+          }.compact
+        end
+
+        # Wiring for the trigger-label span the controller rewrites.
+        # @api private
+        def label_target_attributes
+          stimulus_attributes_for(:label)
+        end
+
+        # The input variant's text field: the picker's input target plus the
+        # typed-date sync and ArrowDown-opens actions. It carries NO name -
+        # the calendar's hidden ISO input stays THE form value.
+        # @api private
+        def input_attributes
+          stimulus_attributes_for(:input).merge(
+            "value" => (formatted if value), "placeholder" => placeholder,
+            "aria-label" => label.presence || "Date"
+          ).compact
+        end
+
+        # The addon's icon button IS the popover trigger - InputGroup's own
+        # icon-xs chrome on Popover's wired Button.
+        # @api private
+        def input_trigger_options
+          style = Poetry::Ui::InputGroup::Style
+          {
+            variant: :ghost, label: label.presence || "Choose date",
+            class: [style.css(:button), style.css(:button_icon_xs)].join(" "),
+            "data-size": "icon-xs", data: { slot: "date-picker-trigger" }
+          }
+        end
+
+        # Options for the composed Popover. Identity forwards: a keyed
+        # (or explicitly-id'd) DatePicker keys the Popover too, so its
+        # minted trigger/content ids are render-stable - the
+        # stable-identity warning's remedy works through the composition.
+        # @api private
+        def popover_options
+          { label: label.presence || "Choose date", content_class: "w-auto p-0",
+            key: popover_key }.compact
+        end
+
+        # The forwarded identity: the caller's key:, or the explicit root
+        # id (render-stable already; the Popover namespaces its own ids
+        # from it, so no duplicate).
+        # @api private
+        def popover_key
+          stable_key || html_attributes["id"].presence
+        end
+
+        private
+
+        def to_date(value)
+          return if value.nil?
+          return value if value.is_a?(Date)
+
+          Date.parse(value.to_s)
+        end
+
+        # A preselected range: Date..Date, [start, end], or {start:, end:}.
+        def parse_range(value)
+          case value
+          when nil then [nil, nil]
+          when Range then [to_date(value.first), to_date(value.last)]
+          when Array then [to_date(value[0]), to_date(value[1])]
+          when Hash
+            pair = value.symbolize_keys
+            [to_date(pair[:start]), to_date(pair[:end])]
+          else
+            [to_date(value), nil]
+          end
+        end
+
+        private :range?, :input_variant?, :formatted, :calendar_options, :root_attributes, :trigger_options
+        private :label_target_attributes, :input_attributes, :input_trigger_options
+        private :popover_options, :popover_key
+      end
+    end
+  end
+end

data/app/components/poetry/ui/date_picker/preview.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module DatePicker
+      # The DatePicker preview: the empty (placeholder) trigger and a
+      # preselected one (server-formatted, no JS).
+      class Preview < Poetry::Core::Preview::Base
+        def default
+          render_component(name: "due_on", label: "Due date")
+        end
+
+        def preselected
+          render_component(name: "due_on", label: "Due date", value: "2026-06-12", month: "2026-06-01")
+        end
+
+        def range
+          render_component(name: "stay", mode: :range, label: "Stay dates",
+                           placeholder: "Pick a date range",
+                           value: %w[2026-06-09 2026-06-18], month: "2026-06-01")
+        end
+
+        def input
+          render_component(name: "subscription_on", variant: :input, label: "Subscription date",
+                           placeholder: "June 1, 2026", value: "2026-06-01", month: "2026-06-01",
+                           class: "w-64")
+        end
+      end
+    end
+  end
+end

data/app/components/poetry/ui/date_picker/style.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module DatePicker
+      # The DatePicker is composition (Popover + Calendar); it owns no
+      # visual of its own beyond the trigger's field shape, which the
+      # component sets inline on the Button. This dictionary exists so the
+      # component participates in the registry/verify machinery; the root is
+      # an inline-block wrapper.
+      class Style < Poetry::Core::Style
+        base "inline-block"
+
+        # The trigger Button's classes (dictionary-resident so safelists
+        # ship them - a bare Ruby string compiles in no host). Range
+        # triggers run wider (two dates + the dash; upstream sizes its
+        # range demo up the same way).
+        element :trigger_single, "w-56"
+        element :trigger_range, "w-72"
+        element :trigger_chrome, "justify-start font-normal"
+        element :trigger_placeholder, "text-muted-foreground"
+      end
+    end
+  end
+end

data/app/components/poetry/ui/deferred/component.html.erb

@@ -0,0 +1,16 @@
+<%= content_tag(:"turbo-frame", **root_attributes.to_attributes) do %>
+  <div <%= tag.attributes(**stimulus_attributes_for(:placeholder)) %>>
+    <%= content.presence || render(Poetry::Ui::Skeleton::Component.new(class: "h-24 w-full")) %>
+  </div>
+  <template <%= tag.attributes(**stimulus_attributes_for(:error_template)) %>>
+    <div data-slot="deferred-error" class="flex flex-col items-start gap-2">
+      <p class="text-sm text-destructive"><%= t("poetry.deferred.failed") %></p>
+      <%= render(Poetry::Ui::Button::Component.new(
+                   variant: :outline, size: :sm,
+                   **stimulus_attributes_for(:retry)
+                 )) do %>
+        <%= t("poetry.deferred.retry") %>
+      <% end %>
+    </div>
+  </template>
+<% end %>