decidim-comments 0.29.1 → 0.30.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 51d04842ce82296e0d8bd4a7146abc0f4c40f7097d349895fba37706bfb6a358
-  data.tar.gz: a79cb56faacd55d250a965a8373de198758a58b9dc83e3f37f01828728c99094
+  metadata.gz: ab9e4d5d3fbe47d002562511e0714a8006064ae68d8db6a575d217e1ff4ff094
+  data.tar.gz: 484efc915fc431bd0e638a0d8e746d2e577dfdb4f9b36a31cb211469bb65bc5a
 SHA512:
-  metadata.gz: 56945ff77b2ca01a53e3e8f637a08038cd806f9cb9002d36b59235ba9a130a5b1321cd304cac8661ea5084b31cb0917d5638ef9801be31668ef971871b5734b1
-  data.tar.gz: ee75b0ea226b00e66607726ba344baa0f66d89345c26422415b3bd833b84831463bb16170a4608a267e5ca165e3388466866aeeba2badfc7cea14be61d5914a7
+  metadata.gz: 0b49a6ae8203a07ffb10f8b85cde3619cb0891a94372ec699e0a8686589d4c11fa98615d958ee091033d8f55cb88bd011d051ac22ec17ea595bed822f5a34b06
+  data.tar.gz: d940aa2380a2a88e8c46833de885ffefd92a5d35a54e5388012fbc6183cc84732e3b92f0cc7afc07824efac41607d3e7761cd97faab25355ffe537b8dc80501f

data/app/cells/decidim/comments/comment/actions.erb

@@ -1,12 +1,4 @@
 <div class="comment__actions">
-  <% if depth.zero? && has_replies_in_children? %>
-    <button class="button button__sm button__text-secondary" data-comment-hide data-controls="comment-<%= model.id %>-replies" data-open="true" id="comment-<%= model.id %>-replies-trigger">
-      <%= icon "arrow-down-s-line" %>
-      <span data-show-comment-reply class="font-normal"><%= t("decidim.components.comment.show_replies", count: replies.size) %></span>
-      <%= icon "arrow-up-s-line" %>
-      <span data-hide-comment-reply class="font-normal"><%= t("decidim.components.comment.hide_replies", count: replies.size) %></span>
-    </button>
-  <% end %>
   <% if can_reply? %>
     <button class="button button__sm button__text-secondary" data-controls="panel-<%= reply_id %>" id="panel-<%= reply_id %>-trigger">
       <%= icon "chat-1-line" %>

data/app/cells/decidim/comments/comment/show.erb

@@ -1,9 +1,20 @@
-<%= content_tag :div, id: "comment_#{model.id}", class: "comment relative", role: "comment", data: { comment_id: model.id, parent: parent_element_id } do %>
+<%= content_tag :div,
+                id: "comment_#{model.id}",
+                class: ["comment", "relative", ("top-comment" if top_comment_label.present?)].compact,
+                role: "comment",
+                data: { comment_id: model.id, parent: parent_element_id } do %>
   <% if model.hidden? %>
     <%= render :moderation_data %>
   <% elsif model.deleted? %>
     <%= render :deletion_data %>
   <% else %>
+    <% if top_comment_label.present? %>
+      <div class="most-upvoted-label label">
+        <span><%= icon "star-s-line" %></span>
+        <span><%= top_comment_label %></span>
+      </div>
+    <% end %>
+
     <div class="comment__header">
       <div class="sr-only"><%= comment_label %></div>
 
@@ -21,7 +32,9 @@
 
       <div class="relative ml-auto">
         <button id="dropdown-trigger-<%= context_menu_id %>" data-component="dropdown" data-target="dropdown-menu-<%= context_menu_id %>" aria-label="<%= t("decidim.components.comment.controls_label") %>">
-          &#8230;
+          <%# NOTE: having two times the icon call is intentional, as that is how the `dropdown` CSS code is done %>
+          <%= icon "more-fill" %>
+          <%= icon "more-fill" %>
         </button>
 
         <div id="dropdown-menu-<%= context_menu_id %>" aria-hidden="true">
@@ -51,6 +64,13 @@
                 <% end %>
               </li>
             <% end %>
+            <% if (extra_actions) %>
+              <% extra_actions.each do |action| %>
+                <li>
+                  <%= link_to(*action) %>
+                </li>
+              <% end %>
+            <% end %>
           </ul>
         </div>
       </div>
@@ -63,10 +83,26 @@
       </div>
     </div>
 
-    <div data-comment-footer data-component="accordion" id="accordion-<%= model.id %>">
+    <div data-comment-footer data-component="accordion" id="accordion-<%= model.id %>" class="relative">
       <div class="comment__footer-grid">
-        <%= render :actions %>
-        <%= votes %>
+        <div class="comment__votes-actions">
+          <%= render :actions %>
+          <%= votes %>
+        </div>
+      </div>
+      <div class="comment__reply-button">
+        <% if depth.zero? && has_replies_in_children? %>
+          <button class="button button__xs button__transparent-secondary border-white absolute top-4" data-comment-hide data-controls="comment-<%= model.id %>-replies" data-open="false" id="comment-<%= model.id %>-replies-trigger">
+            <span data-show-comment-reply class="font-normal" aria-label="<%= t("decidim.components.comment.show_replies", count: replies.size) %>">
+              <%= t("decidim.components.comment.answers", count: replies.size) %>
+            </span>
+            <%= icon "arrow-down-s-line" %>
+            <span data-hide-comment-reply class="font-normal" aria-label="<%= t("decidim.components.comment.hide_replies", count: replies.size) %>">
+              <%= t("decidim.components.comment.answers", count: replies.size) %>
+            </span>
+            <%= icon "arrow-up-s-line" %>
+          </button>
+        <% end %>
       </div>
       <% if can_reply? %>
         <div id="panel-<%= reply_id %>" class="add-comment" data-additional-reply>

data/app/cells/decidim/comments/comment_cell.rb

@@ -5,6 +5,7 @@ module Decidim
     # A cell to display a single comment.
     class CommentCell < Decidim::ViewModel
       include Decidim::ResourceHelper
+      include Decidim::UserRoleChecker
       include Cell::ViewModel::Partial
 
       delegate :current_user, :user_signed_in?, to: :controller
@@ -43,6 +44,12 @@ module Decidim
         "comment_#{model.decidim_commentable_id}"
       end
 
+      def top_comment_label
+        return unless options[:top_comment]
+
+        I18n.t("decidim.components.comments.top_comment_label")
+      end
+
       def comment_label
         if reply?
           t("decidim.components.comment.comment_label_reply", comment_id: model.id, parent_comment_id: model.decidim_commentable_id)
@@ -67,6 +74,7 @@ module Decidim
         hash.push(model.down_votes_count)
         hash.push(model.cache_key_with_version)
         hash.push(model.author.cache_key_with_version)
+        hash.push(extra_actions.to_s)
         @hash = hash.join(Decidim.cache_key_separator)
       end
 
@@ -86,6 +94,27 @@ module Decidim
         options[:order] || "older"
       end
 
+      def extra_actions
+        return @extra_actions if defined?(@extra_actions) && @extra_actions.present?
+
+        @extra_actions = model.extra_actions_for(current_user)
+        return unless @extra_actions
+
+        @extra_actions.map! do |action|
+          [
+            "#{icon(action[:icon]) if action[:icon].present?}#{action[:label]}",
+            action[:url],
+            {
+              class: "dropdown__item"
+            }
+          ].tap do |link|
+            link[2][:method] = action[:method] if action[:method].present?
+            link[2][:remote] = action[:remote] if action[:remote].present?
+            link[2][:data] = action[:data] if action[:data].present?
+          end
+        end
+      end
+
       def reply_id
         "comment#{model.id}-reply"
       end
@@ -95,10 +124,17 @@ module Decidim
       end
 
       def can_reply?
+        return false if two_columns_layout?
+        return true if current_participatory_space && user_has_any_role?(current_user, current_participatory_space)
+
         user_signed_in? && accepts_new_comments? &&
           root_commentable.user_allowed_to_comment?(current_user)
       end
 
+      def two_columns_layout?
+        root_commentable.respond_to?(:two_columns_layout?) && root_commentable.two_columns_layout?
+      end
+
       def author_presenter
         if model.author.respond_to?(:official?) && model.author.official?
           Decidim::Core::OfficialAuthorPresenter.new
@@ -207,6 +243,10 @@ module Decidim
         root_commentable.try(:component)
       end
 
+      def current_participatory_space
+        current_component&.participatory_space
+      end
+
       def vote_button_to(path, params, &)
         # actions are linked to objects belonging to a component
         # To apply :comment permission, the modal authorizer should be refactored to allow participatory spaces-level comments
@@ -214,6 +254,10 @@ module Decidim
 
         action_authorized_button_to(:vote_comment, path, params.merge(resource: root_commentable), &)
       end
+
+      def decidim_verifications
+        Decidim::Verifications::Engine.routes.url_helpers
+      end
     end
   end
 end

data/app/cells/decidim/comments/comment_form/comment_as.erb

@@ -1,10 +1,28 @@
 <div class="comment__as">
-  <label class="mr-2 inline-block" for="<%= comment_as_id %>">
-    <%= t("decidim.components.add_comment_form.form.user_group_id.label") %>
-  </label>
-  <select class="p-2" id="<%= comment_as_id %>" name="comment[user_group_id]">
+  <button id="dropdown-trigger-<%= comment_as_id %>" data-component="dropdown" data-target="dropdown-menu-<%= comment_as_id %>" data-comments-dropdown>
+    <div class="comment__as-author-selected">
+      <label class="ml-10 text-left text-xs" for="<%= comment_as_id %>">
+        <%= t("decidim.components.add_comment_form.form.user_group_id.your_profile") %>
+      </label>
+      <span class="flex items-center gap-2"></span>
+    </div>
+    <%= icon "arrow-down-s-line" %>
+    <%= icon "arrow-up-s-line" %>
+  </button>
+
+  <ul id="dropdown-menu-<%= comment_as_id %>" class="gap-4">
     <% comment_as_options.each do |option| %>
-      <option value="<%= option[1] %>"><%= option[0] %></option>
+      <li class="comment__as-author-container">
+        <div class="comment__as-author-info">
+          <div class="author__avatar-container border border-white">
+            <%= image_tag option[0].avatar_url(:thumb), alt: t("decidim.author.avatar", name: option[0].name), class: "author__avatar" %>
+          </div>
+
+          <p class="comment__as-author-name"><%= option[0].name %></p>
+        </div>
+
+        <input type="radio" name="comment[user_group_id]" class="w-5 h-4" value="<%= option[1] %>">
+      </li>
     <% end %>
-  </select>
+  </ul>
 </div>

data/app/cells/decidim/comments/comment_form/opinion.erb

@@ -5,10 +5,6 @@
       <span><%= t("decidim.components.comment.alignment.in_favor") %></span>
       <%= icon "thumb-up-line" %>
     </button>
-    <button type="button" aria-pressed="true" class="is-active" data-toggle-meh="true" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.neutral_selected") %>">
-      <span><%= t("decidim.components.add_comment_form.opinion.neutral") %></span>
-      <%= icon "loader-3-line" %>
-    </button>
     <button type="button" aria-pressed="false" data-toggle-ko="true" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.negative_selected") %>">
       <span><%= t("decidim.components.comment.alignment.against") %></span>
       <%= icon "thumb-down-line" %>

data/app/cells/decidim/comments/comment_form/show.erb

@@ -1,41 +1,43 @@
 <%= form_for(form_object, url: decidim_comments.comments_path(order:), method: :post, remote: true, html: { id: form_id }) do |form| %>
+  <% unless reply? %>
+    <div class="comment__form-mobile-banner">
+      <p class="font-semibold text-2xl"><%= t("decidim.components.add_comment_form.add_comment") %></p>
+      <button type="button" class="close-button close-add-comment-fullscreen">
+        <%= icon "close-line" %>
+      </button>
+    </div>
+  <% end %>
   <%= form.hidden_field :commentable_gid, id: nil %>
   <%= form.hidden_field :alignment, id: nil, class: "alignment-input" %>
   <%= comment_as_for(form) %>
 
-  <div class="flex justify-between items-end mb-4">
-    <label class="comment__form-label" for="<%= add_comment_id %>">
-      <%= t("decidim.components.add_comment_form.form.body.label") %>
-    </label>
-
-    <span id="<%= add_comment_id %>-remaining-characters" class="remaining-character-count"></span>
+  <div class="px-4 md:p-0">
+    <%= form.text_area(
+      :body,
+      id: add_comment_id,
+      class: "w-full min-h-[160px]",
+      maxlength: comments_max_length,
+      required: true,
+      placeholder: t("decidim.components.add_comment_form.form.body.placeholder"),
+      label: false,
+      data: { remaining_characters: "##{add_comment_id}-remaining-characters", input_emoji: true }
+    ) %>
   </div>
-
-  <%= form.text_area(
-    :body,
-    id: add_comment_id,
-    class: "w-full min-h-[160px]",
-    maxlength: comments_max_length,
-    required: true,
-    placeholder: t("decidim.components.add_comment_form.form.body.placeholder"),
-    label: false,
-    data: { remaining_characters: "##{add_comment_id}-remaining-characters", input_emoji: true }
-  ) %>
+  <span id="<%= add_comment_id %>-remaining-characters" class="remaining-character-count"></span>
 
   <div class="comment__form-submit">
-    <% if alignment_enabled? %>
+    <% if two_columns_layout? && alignment_enabled? %>
       <%= render :opinion %>
     <% end %>
-
-    <button type="submit" class="button button__sm button__secondary" disabled="disabled">
-      <span>
-      <% if reply? %>
-        <%= t("decidim.components.add_comment_form.form.submit_reply") %>
-      <% else %>
-        <%= t("decidim.components.add_comment_form.form.submit_root_comment") %>
-      <% end %>
-      </span>
-      <%= icon "chat-1-line" %>
-    </button>
+    <div class="<%= reply? ? "" : "publish-comment-button" %>">
+      <button type="submit"
+              class="button button__sm button__secondary <%= reply? ? "w-full" : "h-9 close-comment-fullscreen" %>"
+              disabled="disabled">
+        <span>
+          <%= reply? ? t("decidim.components.add_comment_form.form.submit_reply") : t("decidim.components.add_comment_form.form.submit_root_comment") %>
+        </span>
+        <%= icon "chat-1-line" %>
+      </button>
+    </div>
   </div>
 <% end %>

data/app/cells/decidim/comments/comment_form_cell.rb

@@ -13,6 +13,10 @@ module Decidim
         render view: :comment_as, locals: { form: }
       end
 
+      def two_columns_layout?
+        model.respond_to?(:two_columns_layout?) && model.two_columns_layout?
+      end
+
       private
 
       def cache_hash
@@ -21,6 +25,7 @@ module Decidim
         hash.push(model.cache_key)
         hash.push(order)
         hash.push(current_user.try(:id))
+        hash.push(options)
         hash.join(Decidim.cache_key_separator)
       end
 
@@ -74,8 +79,8 @@ module Decidim
       end
 
       def comment_as_options
-        [[current_user.name, ""]] + verified_user_groups.map do |group|
-          [group.name, group.id]
+        [[UserPresenter.new(current_user), ""]] + verified_user_groups.map do |group|
+          [UserGroupPresenter.new(group), group.id]
         end
       end
 

data/app/cells/decidim/comments/comment_thread/show.erb

@@ -1,3 +1,3 @@
 <div class="comment-thread" role="region">
-  <%= cell("decidim/comments/comment", model, root_depth: model.depth, order:) %>
+  <%= cell("decidim/comments/comment", model, root_depth: model.depth, order:, top_comment: options[:top_comment]) %>
 </div>

data/app/cells/decidim/comments/comments/add_comment.erb

@@ -1,15 +1,13 @@
-<div class="add-comment">
-  <% if user_signed_in? %>
+<% if user_signed_in? %>
+  <div class="add-comment hidden md:flex" id="add-comment-anchor">
     <%== cell("decidim/comments/comment_form", model, root_depth:) %>
-  <% else %>
-    <p>
-      <span>
-        <%== t(
-          "decidim.components.add_comment_form.account_message",
-          sign_in_url: decidim.new_user_session_path,
-          sign_up_url: decidim.new_user_registration_path
-        ) %>
-      </span>
-    </p>
-  <% end %>
-</div>
+  </div>
+<% else %>
+  <p>
+  <div class="flash flex-col warning">
+    <div class="flash__message">
+      <%= action_authorized_link_to("comment", t("decidim.components.add_comment_form.account_message"), "#", **onboarding_action_params) %>
+    </div>
+  </div>
+  </p>
+<% end %>

data/app/cells/decidim/comments/comments/comments_in_single_column.erb

@@ -0,0 +1,6 @@
+<div class="comment-threads" id="<%= threads_node_id %>" aria-live="polite">
+  <%= comments_loading %>
+  <% comments.each do |comment| %>
+    <%= cell("decidim/comments/comment_thread", comment, order:) %>
+  <% end %>
+</div>

data/app/cells/decidim/comments/comments/order_control.erb

@@ -1,13 +1,36 @@
 <div class="comment-order-by">
-  <% available_orders.each do | order_value| %>
-    <div class="text-center">
-      <%= link_to(
-        t("decidim.components.comment_order_selector.order.#{order_value}"),
-        decidim_comments.comments_path(commentable_gid: model.to_signed_global_id.to_s, order: order_value, reload: 1),
-        class: "button button__sm button__text-secondary only:m-auto comment-order-by__item inline-block #{order_value == order ? "underline font-bold" : ""}",
-        remote: true,
-        aria: { controls: threads_node_id }
-      ) %>
+  <%= form_with url: "#" do %>
+    <div class="md:hidden">
+      <select id="order-mobile" aria-label="<%= t("decidim.components.comment.sort_by") %>" data-mobile-order-comment-select="true">
+        <option class="input-hidden" value="" <%= "disabled selected hidden" %>> <%= t("decidim.components.comment.sort_by") %> </option>
+        <% available_orders.each do |order_value| %>
+          <option
+            value="<%= order_value %>"
+            <%= "selected" if order_value == order %>
+            <% if order == nil && order_value == "older" || order_value == order %>
+              class="selected"
+            <% end %>
+            data-order-comment-url="<%= decidim_comments.comments_path(commentable_gid: model.to_signed_global_id.to_s, order: order_value || "older", reload: 1) %>">
+            <%= t("decidim.components.comment_order_selector.order.#{order_value}") %>
+          </option>
+        <% end %>
+      </select>
+    </div>
+    <div class="hidden md:block">
+      <label for="order" class="comments-label-dropdown"><%= t("decidim.components.comment.sort_by") %></label>
+      <select id="order" aria-label="<%= t("decidim.components.comment.sort_by") %>" data-desktop-order-comment-select="true">
+        <% available_orders.each do |order_value| %>
+          <option
+            value="<%= order_value %>"
+            <%= "selected" if order_value == order %>
+            <% if order == nil && order_value == "older" || order_value == order %>
+            class="selected"
+            <% end %>
+            data-order-comment-url="<%= decidim_comments.comments_path(commentable_gid: model.to_signed_global_id.to_s, order: order_value || "older", reload: 1) %>">
+            <%= t("decidim.components.comment_order_selector.order.#{order_value}") %>
+          </option>
+        <% end %>
+      </select>
     </div>
   <% end %>
 </div>

data/app/cells/decidim/comments/comments/show.erb

@@ -12,16 +12,16 @@
             </span>
           <% end %>
         </h2>
-        <%= render :order_control %>
+        <%= render :order_control unless two_columns_layout? %>
       </div>
       <%= single_comment_warning %>
       <%= blocked_comments_warning %>
-      <div class="comment-threads" id="<%= threads_node_id %>" aria-live="polite">
-        <%= comments_loading %>
-        <% comments.each do |comment| %>
-          <%= cell("decidim/comments/comment_thread", comment, order:) %>
-        <% end %>
-      </div>
+      <%= render_comments %>
+      <% if user_signed_in? %>
+        <button class="button button__lg button__secondary flex md:hidden w-full h-9 text-sm add-comment-mobile">
+          <%= t("add_comment", scope: "decidim.components.add_comment_form") %>
+        </button>
+      <% end %>
       <%= add_comment %>
       <%= user_comments_blocked_warning %>
     </div>

data/app/cells/decidim/comments/comments_cell.rb

@@ -4,13 +4,17 @@ module Decidim
   module Comments
     # A cell to display a comments section for a commentable object.
     class CommentsCell < Decidim::ViewModel
+      include UserRoleChecker
       delegate :user_signed_in?, to: :controller
-      def add_comment
-        return if single_comment?
-        return if comments_blocked?
-        return if user_comments_blocked?
 
-        render :add_comment
+      def render_comments
+        return render_single_comment if single_comment?
+
+        two_columns_layout? ? render_comments_in_two_columns : render(:comments_in_single_column)
+      end
+
+      def add_comment
+        render :add_comment if can_add_comments?
       end
 
       def single_comment_warning
@@ -19,6 +23,10 @@ module Decidim
         render :single_comment_warning
       end
 
+      def reply?
+        model.is_a?(Decidim::Comments::Comment)
+      end
+
       def comments_loading
         return if single_comment?
 
@@ -41,6 +49,28 @@ module Decidim
 
       private
 
+      def two_columns_layout?
+        model.try(:two_columns_layout?)
+      end
+
+      def render_single_comment
+        @sorted_comments_in_favor = [single_comment]
+        render :comments_in_single_column
+      end
+
+      def render_comments_in_two_columns
+        cell(TwoColumnsCommentsCell, model).call
+      end
+
+      def can_add_comments?
+        return true if current_participatory_space && user_has_any_role?(current_user, current_participatory_space)
+        return if single_comment?
+        return if comments_blocked?
+        return if user_comments_blocked?
+
+        true
+      end
+
       def decidim_comments
         Decidim::Comments::Engine.routes.url_helpers
       end
@@ -74,7 +104,7 @@ module Decidim
       end
 
       def order
-        options[:order] || "older"
+        options[:order]
       end
 
       def decidim
@@ -139,16 +169,30 @@ module Decidim
         model.try(:component)
       end
 
+      def current_participatory_space
+        model.try(:participatory_space)
+      end
+
+      def onboarding_action_params
+        params = if model.try(:component).present? || current_component.present?
+                   { resource: model }
+                 else
+                   { resource: model, permissions_holder: model }
+                 end
+        return params if ResourceLocatorPresenter.new(model).url
+      rescue NoMethodError
+        params.merge!(data: { onboarding_redirect_path: request.path })
+      end
+
       def blocked_comments_for_unauthorized_user_warning_link
-        options = if current_component.present?
-                    { resource: model }
-                  else
-                    { resource: model, permissions_holder: model }
-                  end
-        action_authorized_link_to(:comment, commentable_path, options) do
+        action_authorized_link_to(:comment, commentable_path, onboarding_action_params) do
           t("decidim.components.comments.blocked_comments_for_unauthorized_user_warning")
         end
       end
+
+      def decidim_verifications
+        Decidim::Verifications::Engine.routes.url_helpers
+      end
     end
   end
 end

data/app/cells/decidim/comments/two_columns_comments/column.erb

@@ -0,0 +1,20 @@
+<div class="comments-section__<%= @title.parameterize %>">
+  <div class="comments-section__header">
+    <%= icon @icon_name, class: "icon" %>
+    <span class="comments-section__title"><%= @title %></span>
+  </div>
+
+  <% if @top_comment.present? %>
+    <div class="top-comment">
+      <%= cell("decidim/comments/comment_thread", @top_comment, order:, top_comment: true) %>
+    </div>
+  <% end %>
+
+  <% if @comments.any? %>
+    <% @comments.each do |comment| %>
+      <%= cell("decidim/comments/comment_thread", comment, order:) %>
+    <% end %>
+  <% else %>
+    <p class="comments-section__no-comments"><%= @no_comments_message %></p>
+  <% end %>
+</div>

data/app/cells/decidim/comments/two_columns_comments/show.erb

@@ -0,0 +1,11 @@
+<div id="desktopContainer" class="comments-two-columns card__grid-grid hidden md:grid">
+  <%= render_column(@top_comment_in_favor, @sorted_comments_in_favor, "thumb-up-line", t("decidim.components.comments.in_favor")) %>
+  <%= render_column(@top_comment_against, @sorted_comments_against, "thumb-down-line", t("decidim.components.comments.against")) %>
+</div>
+
+<div id="mobileContainer" class="comment-threads block md:hidden" aria-live="polite">
+  <%= comments_loading %>
+  <% @interleaved_comments.each do |comment| %>
+    <%= cell("decidim/comments/comment_thread", comment, order:, top_comment: (comment == @top_comment_in_favor || comment == @top_comment_against)) %>
+  <% end %>
+</div>