<%# locals: all_themes & popover_message %>
<div class="form-group">
  <%= f.label _('Themes'), for: :theme_ids, class: 'control-label' %>
  <%= render partial: 'shared/popover', 
             locals: { message: popover_message, placement: 'right' }%>

  <div class="form-group col-md-12">

    <% if all_themes.length > 0 %>
      <% 
        cntr = 0
        nbr_of_cols = (all_themes.length.to_f / MAX_NUMBER_THEMES_PER_COLUMN.to_f).ceil
        col_size = (12 / (nbr_of_cols > 4 ? 3 : nbr_of_cols)).round
      %>
      <div class="col-md-<%= col_size %>">
        <% all_themes.each do |theme| %>
          <% if cntr >= MAX_NUMBER_THEMES_PER_COLUMN %>
            </div>
            <div class="col-md-<%= col_size %>">
            <% cntr = 0 %>
          <% end %>
          <div class="checkbox">
            <% namespace = f.object.class.name.downcase %>
            <% id = f.object.id.present? ? f.object.id : 'new' %>
            <input id="<%= id %>_<%= namespace %>_theme_ids_<%= theme.id %>" 
                   name="<%= namespace %>[theme_ids][]" 
                   type="checkbox" 
                   value="<%= theme.id %>"<%= f.object.themes.include?(theme) ? ' checked="checked"' : '' %>>
            <%= theme.title %>
          </div>
          <% cntr += 1 %>
        <% end %>
      </div>
    <% else %>
      <p><%= _('No themes have been defined. Please contact your administrator for assistance.') %></p>
    <% end %>
  </div>
</div>