m9sh 0.2.1 → 0.2.2

data/app/javascript/controllers/docs/component_preview_controller.js

@@ -0,0 +1,149 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["tab", "panel", "tabList", "previewContainer", "copyButton", "themeButton", "fullscreenButton"]
+  static values = {
+    defaultTab: String,
+    code: String
+  }
+
+  connect() {
+    // Initialize with default tab
+    if (this.hasDefaultTabValue) {
+      this.selectTabByValue(this.defaultTabValue)
+    } else if (this.tabTargets.length > 0) {
+      // Select first tab if no default
+      const firstValue = this.tabTargets[0].dataset.tabValue
+      this.selectTabByValue(firstValue)
+    }
+
+    // Store original code for copying
+    this.setupCodeForCopying()
+  }
+
+  setupCodeForCopying() {
+    // Find code in the code panel
+    const codePanel = this.panelTargets.find(panel => panel.dataset.panelValue === "code")
+    if (codePanel) {
+      const codeElement = codePanel.querySelector("pre code")
+      if (codeElement) {
+        // Store the text content for copying (strip HTML from Rouge highlighting)
+        this.codeText = codeElement.textContent
+      }
+    }
+  }
+
+  selectTab(event) {
+    event.preventDefault()
+    const tab = event.currentTarget
+    const value = tab.dataset.tabValue
+
+    this.selectTabByValue(value)
+  }
+
+  selectTabByValue(value) {
+    // Update tabs
+    this.tabTargets.forEach(tab => {
+      const isActive = tab.dataset.tabValue === value
+      tab.dataset.state = isActive ? "active" : "inactive"
+      tab.setAttribute("aria-selected", isActive.toString())
+
+      if (isActive) {
+        tab.classList.remove("text-muted-foreground")
+        tab.classList.add("bg-background", "text-foreground", "shadow-sm")
+      } else {
+        tab.classList.remove("bg-background", "text-foreground", "shadow-sm")
+        tab.classList.add("text-muted-foreground")
+      }
+    })
+
+    // Update panels
+    this.panelTargets.forEach(panel => {
+      const isVisible = panel.dataset.panelValue === value
+
+      if (isVisible) {
+        panel.classList.remove("hidden")
+        panel.setAttribute("aria-hidden", "false")
+      } else {
+        panel.classList.add("hidden")
+        panel.setAttribute("aria-hidden", "true")
+      }
+    })
+  }
+
+  copyCode() {
+    if (!this.codeText) {
+      console.warn("No code to copy")
+      return
+    }
+
+    navigator.clipboard.writeText(this.codeText).then(() => {
+      // Update button with feedback
+      if (this.hasCopyButtonTarget) {
+        const button = this.copyButtonTarget
+        const originalHTML = button.innerHTML
+
+        button.innerHTML = this.getCheckIcon()
+        button.classList.add("text-green-600")
+
+        setTimeout(() => {
+          button.innerHTML = originalHTML
+          button.classList.remove("text-green-600")
+        }, 2000)
+      }
+    }).catch(err => {
+      console.error("Failed to copy code:", err)
+    })
+  }
+
+  toggleTheme() {
+    if (!this.hasPreviewContainerTarget) return
+
+    const container = this.previewContainerTarget
+    container.classList.toggle("dark")
+
+    // Update button icon or state if needed
+    if (this.hasThemeButtonTarget) {
+      const isDark = container.classList.contains("dark")
+      const button = this.themeButtonTarget
+
+      if (isDark) {
+        button.classList.add("text-primary")
+      } else {
+        button.classList.remove("text-primary")
+      }
+    }
+  }
+
+  toggleFullscreen() {
+    if (!this.element) return
+
+    if (!document.fullscreenElement) {
+      this.element.requestFullscreen().catch(err => {
+        console.error("Error attempting to enable fullscreen:", err)
+      })
+    } else {
+      document.exitFullscreen()
+    }
+
+    // Listen for fullscreen change to update button
+    document.addEventListener("fullscreenchange", () => {
+      if (this.hasFullscreenButtonTarget) {
+        const button = this.fullscreenButtonTarget
+        if (document.fullscreenElement) {
+          button.classList.add("text-primary")
+        } else {
+          button.classList.remove("text-primary")
+        }
+      }
+    })
+  }
+
+  getCheckIcon() {
+    return `
+      <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">
+        <polyline points="20 6 9 17 4 12"></polyline>
+      </svg>
+    `
+  }
+}

data/app/javascript/controllers/docs/copy_button_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    text: String
+  }
+
+  copy() {
+    navigator.clipboard.writeText(this.textValue).then(() => {
+      const originalText = this.element.textContent
+      this.element.textContent = "Copied!"
+
+      setTimeout(() => {
+        this.element.textContent = originalText
+      }, 2000)
+    }).catch(err => {
+      console.error("Failed to copy:", err)
+    })
+  }
+}

data/app/javascript/controllers/index.js

@@ -0,0 +1,6 @@
+// Import and register all your controllers from the importmap via controllers/**/*_controller
+import { application } from "./application"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+
+// Eager load all controllers defined in the import map under controllers/**/*_controller
+eagerLoadControllersFrom("controllers", application)

data/app/javascript/controllers/theme_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    // Initialize theme on connect
+    this.updateTheme()
+  }
+
+  toggle() {
+    const html = document.documentElement
+    const isDark = html.classList.toggle('dark')
+    localStorage.setItem('theme', isDark ? 'dark' : 'light')
+  }
+
+  updateTheme() {
+    const theme = localStorage.getItem('theme') || 'light'
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }
+}

data/app/views/blocks/_sidebar.html.erb

@@ -0,0 +1,31 @@
+<nav class="px-12 py-8 space-y-8">
+  <!-- Overview Section -->
+  <div>
+    <h4 class="mb-2 text-sm font-semibold">Overview</h4>
+    <ul class="space-y-0.5">
+      <li>
+        <a href="<%= blocks_path %>"
+           class="block px-3 py-1.5 text-sm rounded-lg transition-colors <%= @current_page == 'index' ? 'bg-sidebar-accent font-medium' : 'hover:bg-sidebar-accent' %>">
+          All Blocks
+        </a>
+      </li>
+    </ul>
+  </div>
+
+  <!-- Blocks by Category -->
+  <% BlocksController::BLOCK_CATEGORIES.each do |category, blocks| %>
+    <div>
+      <h4 class="mb-2 text-sm font-semibold"><%= category %></h4>
+      <ul class="space-y-0.5">
+        <% blocks.each do |block| %>
+          <li>
+            <a href="<%= block_path(block) %>"
+               class="block px-3 py-1.5 text-sm rounded-lg transition-colors <%= @block == block ? 'bg-sidebar-accent font-medium' : 'hover:bg-sidebar-accent' %>">
+              <%= block.titleize %>
+            </a>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+</nav>

data/app/views/blocks/_toc.html.erb

@@ -0,0 +1,29 @@
+<div class="px-12 py-8">
+  <p class="font-semibold text-sm mb-2 px-3">On This Page</p>
+  <nav class="space-y-0.5">
+    <% if @block.present? %>
+      <a href="#overview" class="block text-sm px-3 py-1.5 rounded-lg hover:bg-sidebar-accent transition-colors">
+        Overview
+      </a>
+      <a href="#preview" class="block text-sm px-3 py-1.5 rounded-lg hover:bg-sidebar-accent transition-colors">
+        Preview
+      </a>
+      <a href="#code" class="block text-sm px-3 py-1.5 rounded-lg hover:bg-sidebar-accent transition-colors">
+        Code
+      </a>
+      <a href="#usage" class="block text-sm px-3 py-1.5 rounded-lg hover:bg-sidebar-accent transition-colors">
+        Usage
+      </a>
+    <% elsif @current_page == 'index' %>
+      <a href="#hero" class="block text-sm px-3 py-1.5 rounded-lg hover:bg-sidebar-accent transition-colors">
+        Overview
+      </a>
+      <a href="#dashboard" class="block text-sm px-3 py-1.5 rounded-lg hover:bg-sidebar-accent transition-colors">
+        Dashboard
+      </a>
+      <a href="#about" class="block text-sm px-3 py-1.5 rounded-lg hover:bg-sidebar-accent transition-colors">
+        About
+      </a>
+    <% end %>
+  </nav>
+</div>

data/app/views/blocks/examples/dashboard-01.html.erb

@@ -0,0 +1,180 @@
+<% content_for :title, "Dashboard 01 - Blocks" %>
+
+<!-- Page Header -->
+<div class="space-y-2 mb-8">
+  <h1 class="text-3xl font-bold tracking-tight">Dashboard 01</h1>
+  <p class="text-muted-foreground">
+    A comprehensive dashboard with stats cards, charts, and recent activity. Perfect for admin panels and analytics interfaces.
+  </p>
+</div>
+
+<!-- Dashboard Preview -->
+<% dashboard_html = capture do %>
+  <div class="w-full space-y-6">
+    <!-- Stats Cards Grid -->
+    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <!-- Total Revenue Card -->
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header(class: "!pb-2") do |header| %>
+            <% header.with_title do %>
+              <h3 class="text-sm font-medium text-muted-foreground">Total Revenue</h3>
+            <% end %>
+            <% header.with_action do %>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+                <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+              </svg>
+            <% end %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="text-2xl font-bold">$45,231.89</div>
+            <p class="text-xs text-muted-foreground">+20.1% from last month</p>
+          <% end %>
+        <% end %>
+
+        <!-- Subscriptions Card -->
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header(class: "!pb-2") do |header| %>
+            <% header.with_title do %>
+              <h3 class="text-sm font-medium text-muted-foreground">Subscriptions</h3>
+            <% end %>
+            <% header.with_action do %>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+                <circle cx="9" cy="7" r="4" />
+                <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
+              </svg>
+            <% end %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="text-2xl font-bold">+2,350</div>
+            <p class="text-xs text-muted-foreground">+180.1% from last month</p>
+          <% end %>
+        <% end %>
+
+        <!-- Sales Card -->
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header(class: "!pb-2") do |header| %>
+            <% header.with_title do %>
+              <h3 class="text-sm font-medium text-muted-foreground">Sales</h3>
+            <% end %>
+            <% header.with_action do %>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+                <rect width="20" height="14" x="2" y="5" rx="2" />
+                <path d="M2 10h20" />
+              </svg>
+            <% end %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="text-2xl font-bold">+12,234</div>
+            <p class="text-xs text-muted-foreground">+19% from last month</p>
+          <% end %>
+        <% end %>
+
+        <!-- Active Now Card -->
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header(class: "!pb-2") do |header| %>
+            <% header.with_title do %>
+              <h3 class="text-sm font-medium text-muted-foreground">Active Now</h3>
+            <% end %>
+            <% header.with_action do %>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+                <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+              </svg>
+            <% end %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="text-2xl font-bold">+573</div>
+            <p class="text-xs text-muted-foreground">+201 since last hour</p>
+          <% end %>
+        <% end %>
+    </div>
+
+    <!-- Chart and Recent Sales Section -->
+    <div class="grid gap-4 grid-cols-1 lg:grid-cols-7">
+        <!-- Overview Chart Card -->
+        <%= render M9sh::CardComponent.new(class: "lg:col-span-4") do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title do %>
+              Overview
+            <% end %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="h-[300px] flex items-center justify-center text-muted-foreground border-2 border-dashed rounded-lg">
+              Chart placeholder
+            </div>
+          <% end %>
+        <% end %>
+
+        <!-- Recent Sales Card -->
+        <%= render M9sh::CardComponent.new(class: "lg:col-span-3") do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title do %>
+              Recent Sales
+            <% end %>
+            <% header.with_description do %>
+              You made 265 sales this month.
+            <% end %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="space-y-6">
+              <% [
+                { name: "Olivia Martin", email: "olivia.martin@email.com", amount: "+$1,999.00", avatar: "OM" },
+                { name: "Jackson Lee", email: "jackson.lee@email.com", amount: "+$39.00", avatar: "JL" },
+                { name: "Isabella Nguyen", email: "isabella.nguyen@email.com", amount: "+$299.00", avatar: "IN" },
+                { name: "William Kim", email: "will@email.com", amount: "+$99.00", avatar: "WK" },
+                { name: "Sofia Davis", email: "sofia.davis@email.com", amount: "+$39.00", avatar: "SD" }
+              ].each do |sale| %>
+                <div class="flex items-center">
+                  <%= render M9sh::AvatarComponent.new(fallback: sale[:avatar], class: "h-9 w-9") %>
+                  <div class="ml-4 space-y-1">
+                    <p class="text-sm font-medium leading-none"><%= sale[:name] %></p>
+                    <p class="text-sm text-muted-foreground"><%= sale[:email] %></p>
+                  </div>
+                  <div class="ml-auto font-medium"><%= sale[:amount] %></div>
+                </div>
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+    </div>
+  </div>
+<% end %>
+
+<%= render Docs::ComponentPreviewComponent.new(
+  title: "Dashboard Example",
+  preview_content: dashboard_html,
+  code: dashboard_01_code,
+  ai_command: dashboard_01_code
+) %>
+
+<!-- Usage Section -->
+<div class="mt-12 space-y-4">
+  <h2 class="text-2xl font-semibold tracking-tight">Usage</h2>
+  <p class="text-muted-foreground leading-relaxed">
+    Copy and paste the code above into your application. This dashboard uses the Card, Avatar, and Separator components from m9sh/ui.
+  </p>
+
+  <%= render M9sh::CardComponent.new(class: "mt-6") do |card| %>
+    <% card.with_header do |header| %>
+      <% header.with_title do %>
+        Required Components
+      <% end %>
+      <% header.with_description do %>
+        Make sure these components are installed in your project
+      <% end %>
+    <% end %>
+    <% card.with_body do %>
+      <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          CardComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          AvatarComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          SeparatorComponent
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/app/views/blocks/examples/dashboard-02.html.erb

@@ -0,0 +1,190 @@
+<% content_for :title, "Dashboard 02 - Blocks" %>
+
+<!-- Page Header -->
+<div class="space-y-2 mb-8">
+  <h1 class="text-3xl font-bold tracking-tight">Dashboard 02</h1>
+  <p class="text-muted-foreground">
+    An analytics-focused dashboard with metrics, progress indicators, and activity feed. Ideal for SaaS applications and product analytics.
+  </p>
+</div>
+
+<!-- Dashboard Preview -->
+<% dashboard_html = capture do %>
+  <div class="w-full space-y-6">
+    <!-- Top Metrics Row -->
+    <div class="grid gap-4 md:grid-cols-3">
+      <!-- Total Users Card -->
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title do %>
+            Total Users
+          <% end %>
+          <% header.with_description do %>
+            Active users this month
+          <% end %>
+        <% end %>
+        <% card.with_body do %>
+          <div class="text-3xl font-bold">12,543</div>
+          <p class="text-xs text-muted-foreground mt-2">
+            <%= render M9sh::BadgeComponent.new(variant: :default, class: "text-xs") do %>
+              +12.5%
+            <% end %>
+            from last month
+          </p>
+        <% end %>
+      <% end %>
+
+      <!-- Conversion Rate Card -->
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title do %>
+            Conversion Rate
+          <% end %>
+          <% header.with_description do %>
+            Trial to paid conversion
+          <% end %>
+        <% end %>
+        <% card.with_body do %>
+          <div class="text-3xl font-bold">24.8%</div>
+          <%= render M9sh::ProgressComponent.new(value: 24.8, class: "mt-2") %>
+        <% end %>
+      <% end %>
+
+      <!-- Average Revenue Card -->
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title do %>
+            Avg Revenue
+          <% end %>
+          <% header.with_description do %>
+            Per user this month
+          <% end %>
+        <% end %>
+        <% card.with_body do %>
+          <div class="text-3xl font-bold">$89.42</div>
+          <p class="text-xs text-muted-foreground mt-2">
+            <%= render M9sh::BadgeComponent.new(variant: :destructive, class: "text-xs") do %>
+              -3.2%
+            <% end %>
+            from last month
+          </p>
+        <% end %>
+      <% end %>
+    </div>
+
+    <!-- Main Content Grid -->
+    <div class="grid gap-4 grid-cols-1 lg:grid-cols-2">
+      <!-- Activity Feed Card -->
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title do %>
+            Recent Activity
+          <% end %>
+          <% header.with_description do %>
+            Latest user actions
+          <% end %>
+        <% end %>
+        <% card.with_body do %>
+          <div class="space-y-4">
+            <% [
+              { user: "Alex Johnson", action: "created a new project", time: "2 minutes ago", badge: "New" },
+              { user: "Sarah Chen", action: "upgraded to Pro plan", time: "15 minutes ago", badge: "Upgrade" },
+              { user: "Michael Brown", action: "invited 3 team members", time: "1 hour ago", badge: "Team" },
+              { user: "Emma Wilson", action: "completed onboarding", time: "2 hours ago", badge: "New" },
+              { user: "David Lee", action: "exported data report", time: "3 hours ago", badge: "Export" }
+            ].each do |activity| %>
+              <div class="flex items-start gap-4 pb-4 border-b border-border last:border-0 last:pb-0">
+                <%= render M9sh::AvatarComponent.new(fallback: activity[:user].split.map(&:first).join, class: "h-8 w-8") %>
+                <div class="flex-1 space-y-1">
+                  <p class="text-sm">
+                    <span class="font-medium"><%= activity[:user] %></span> <%= activity[:action] %>
+                  </p>
+                  <p class="text-xs text-muted-foreground"><%= activity[:time] %></p>
+                </div>
+                <%= render M9sh::BadgeComponent.new(variant: :outline, class: "text-xs") do %>
+                  <%= activity[:badge] %>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+
+      <!-- Goals Progress Card -->
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title do %>
+            Monthly Goals
+          <% end %>
+          <% header.with_description do %>
+            Track your progress
+          <% end %>
+        <% end %>
+        <% card.with_body do %>
+          <div class="space-y-6">
+            <% [
+              { goal: "New Signups", current: 842, target: 1000, percentage: 84.2 },
+              { goal: "Revenue Target", current: 45231, target: 50000, percentage: 90.5 },
+              { goal: "Active Users", current: 6543, target: 8000, percentage: 81.8 },
+              { goal: "Support Tickets", current: 23, target: 50, percentage: 46 }
+            ].each do |goal| %>
+              <div class="space-y-2">
+                <div class="flex items-center justify-between text-sm">
+                  <span class="font-medium"><%= goal[:goal] %></span>
+                  <span class="text-muted-foreground">
+                    <%= goal[:current].to_s.reverse.gsub(/(\d{3})(?=\d)/, '\\1,').reverse %> /
+                    <%= goal[:target].to_s.reverse.gsub(/(\d{3})(?=\d)/, '\\1,').reverse %>
+                  </span>
+                </div>
+                <%= render M9sh::ProgressComponent.new(value: goal[:percentage]) %>
+                <p class="text-xs text-muted-foreground text-right"><%= goal[:percentage] %>%</p>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+<% end %>
+
+<%= render Docs::ComponentPreviewComponent.new(
+  title: "Analytics Dashboard",
+  preview_content: dashboard_html,
+  code: dashboard_02_code,
+  ai_command: dashboard_02_code
+) %>
+
+<!-- Usage Section -->
+<div class="mt-12 space-y-4">
+  <h2 class="text-2xl font-semibold tracking-tight">Usage</h2>
+  <p class="text-muted-foreground leading-relaxed">
+    An analytics dashboard showing key metrics, activity feeds, and goal tracking. Perfect for SaaS applications and product analytics platforms.
+  </p>
+
+  <%= render M9sh::CardComponent.new(class: "mt-6") do |card| %>
+    <% card.with_header do |header| %>
+      <% header.with_title do %>
+        Required Components
+      <% end %>
+      <% header.with_description do %>
+        Make sure these components are installed in your project
+      <% end %>
+    <% end %>
+    <% card.with_body do %>
+      <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          CardComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          AvatarComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          BadgeComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          ProgressComponent
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+</div>