<% content_for :header_addon do %>
  <%= render "shared/search_form_header",
             search_path: debates_path(page: 1),
             i18n_namespace: "debates.index.search_form" %>
<% end %>

<section role="main">
  <div class="wrap row">
    <div id="debates" class="debates-list small-12 medium-9 column">

      <div class="filters">
        <div class="small-12 medium-7 left">
          <% if @search_terms %>
            <h2 class="margin-top">
              <%= page_entries_info @debates %>
              <%= t("debates.index.search_results", count: @debates.size, search_term: @search_terms) %>
            </h2>
          <% elsif @tag_filter %>
            <h2 class="margin-top">
              <%= page_entries_info @debates %>
              <%= t("debates.index.filter_topic", count: @debates.size, topic: @tag_filter) %>
            </h2>
          <% end %>
        </div>

        <% if @tag_filter || @search_terms %>
          <div class="small-12 medium-5 margin-top inline-block debates-order">
            <h6 class="inline-block">
              <%= t("debates.index.select_order") %>
            </h6>
            <%= render 'shared/order_selector', i18n_namespace: "debates.index" %>
          </div>
        <% else %>
          <div class="small-12 inline-block">
            <h2 class="inline-block">
              <%= t("debates.index.select_order_long") %>
            </h2>
            <%= render 'shared/order_selector', i18n_namespace: "debates.index" %>
          </div>
        <% end %>

        <div class="show-for-small-only">
          <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button radius expand' %>
        </div>

        <%= render @debates %>
        <%= paginate @debates %>
      </div>
    </div>

    <div class="small-12 medium-3 column">
      <aside class="sidebar" role="complementary">
        <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button radius expand' %>
        <%= render "shared/tag_cloud", taggable: 'debate' %>
      </aside>
    </div>
  </div>
</section>
