= vertical_tabs do
  .statement-activity-content.tab-pane
    -# The javascript will load the .statement-activity-form content into here

  - effective_cpd_categories.each do |category|
    - rule = cpd_statement.cpd_cycle.rule_for(category)
    - next if rule.unavailable?

    = tab(category) do
      .float-right= link_to icon('x', class: 'small-1'), '#', 'data-cpd-collapse': true

      %h3
        #{category}
        %small
          = cpd_score(cpd_statement.score_per_category[category.id])
          - if rule.max_credits_per_cycle.present?
            = '/'
            = rule.max_credits_per_cycle

      .mb-3
        %strong Description
        = category.body.to_s

      .mb-3
        %strong #{cpd_credits_label.titleize} Calculation
        %br
        = rule.category_credit_description.to_s
        = rule.credit_description.to_s

      %div
        %strong Select an Activity to Continue

      %ol
        - category.cpd_activities.each do |activity|
          - next if cpd_statement.cpd_cycle.rule_for(activity).unavailable?

          %li
            = link_to(activity, '#', 'data-cpd-show-activity': true)

            .statement-activity-form{style: 'display: none;'}
              - cpd_statement_activity = cpd_statement.cpd_statement_activities.new(cpd_category: category, cpd_activity: activity)
              = render('effective/cpd_statement_activities/form', cpd_statement_activity: cpd_statement_activity)