<div class="recommended-index">
  <div class="row relative" data-equalizer data-equalizer-on="medium">
    <div class="small-12 column">
      <h2 class="show-for-sr"><%= t("shared.recommended_index.title") %></h2>
    </div>

    <div id="recommendations" data-toggler=".hide">
      <%= link_to disable_recommendations_path, title: t("shared.recommended_index.hide"),
                                                class: "float-right-medium small hide-recommendations",
                                                data: {
                                                  toggle: "recommendations",
                                                  confirm: t("#{namespace}.index.recommendations.disable")
                                                },
                                                method: :put do %>
        <span class="icon-x"></span>
        <span class="show-for-sr"><%= t("shared.recommended_index.hide") %></span>
      <% end %>

      <% recommended.each_with_index do |recommended, index| %>
        <div class="small-12 medium-6 large-4 column end">
          <%= link_to recommended_path(recommended) do %>
            <div class="recommendation" data-equalizer-watch>
              <h3><%= recommended.title %></h3>
            </div>
          <% end %>
        </div>
      <% end %>

      <div class="small-12 column">
        <%= link_to t("shared.recommended_index.see_more"),
                    current_path_with_query_params(order: "recommendations"),
                    class: "float-right-medium small" %>
      </div>
    </div>
  </div>
</div>
