BathHacked/energy-sparks

<% content_for :page_title, t('activity_categories.page_title') %>

<div class="row mt-2">
  <div class="col">
    <div class="d-flex justify-content-between align-items-center">
      <h1><%= t('activity_categories.title') %></h1>
      <%= link_to t('activity_categories.search'), search_activity_types_path,
                  class: 'btn btn-outline-dark rounded-pill font-weight-bold' %>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-6">
    <p><%= t('activity_categories.introduction_1_html', for_teachers_path: for_teachers_path,
                                                        for_pupils_path: for_pupils_path) %></p>
    <p><%= t('activity_categories.introduction_2_html', count: @activity_count) %></p>
  </div>
  <div class="col-sm-6">
    <ul class="fa-ul">
      <li class="pb-3"><i class="fa-li fas fa-2x fa-check"></i><%= t('activity_categories.item_1') %>.</li>
      <li class="pb-3"><i class="fa-li fas fa-2x fa-check"></i><%= t('activity_categories.item_2') %>.</li>
      <li class="pb-3"><i class="fa-li fas fa-2x fa-check"></i><%= t('activity_categories.item_3') %>.</li>
    </ul>
  </div>
</div>

<%= render 'schools/prompt_recommended', scope: :pupil %>

<div class="container">
  <% if !@pupil_categories.blank? %>
    <div class="row mt-3 bg-light">
      <div class="col">
        <div class="d-flex justify-content-between align-items-center">
          <h4><%= t('activity_categories.pupil.title') %></h4>
        </div>
        <p><%= t('activity_categories.pupil.introduction') %></p>
      </div>
    </div>
    <%= render 'pupil_categories', activity_categories: @pupil_categories.first(4) %>
  <% end %>

  <% if !@programme_types.blank? %>
    <div class="row mt-3 bg-light">
      <div class="col">
        <div class="d-flex justify-content-between align-items-center">
          <h4><%= t('activity_categories.our_programmes.title') %></h4>
          <div>
            <%= link_to t('activity_categories.view_all_programmes'), programme_types_path,
                        class: 'btn btn-outline-dark rounded-pill font-weight-bold' %>
          </div>
        </div>
        <p><%= t('activity_categories.our_programmes.introduction') %></p>
      </div>
    </div>
    <%= render 'programme_types', programme_types: @programme_types.first(4) %>
  <% end %>

  <% @activity_categories.each do |activity_category| %>
    <div class="row mt-3">
      <div class="col">
        <div class="d-flex justify-content-between align-items-center">
          <h4><%= activity_category.name %></h4>
          <div>
            <%= link_to t('activity_categories.view_all',
                          count: activity_category.activity_types.active.count),
                        activity_category_path(activity_category),
                        class: 'btn btn-outline-dark rounded-pill font-weight-bold' %>
          </div>
        </div>
      </div>
    </div>
    <%= render 'cards',
               activity_types: activity_category.activity_types.active_and_not_custom.sample(4),
               card_deck_css: '' %>
  <% end %>
</div>