- tip = exercise_tip.tip
- index = exercise_tip_counter + 1
.card class="#{exercise_tip.parent_exercise_tip_id? || exercise_tip.rank != 1 ? 'mt-2' : ''}"
  .card-header.p-2 id="tip-heading-#{exercise_tip.id}" role="tab"
    .card-title.mb-0
      a.collapsed aria-controls="tip-collapse-#{exercise_tip.id}" aria-expanded="false" data-parent="#tips" data-toggle="collapse" href="#tip-collapse-#{exercise_tip.id}"
        .clearfix role="button"
          i.fa aria-hidden="true"
          span
            = t('activerecord.models.tip.one')
            =< tip_prefix + index.to_s
            = ": #{tip.title}" if tip.title?
  .card.card-collapse.collapse id="tip-collapse-#{exercise_tip.id}" aria-labelledby="tip-heading-#{exercise_tip.id}" role="tabpanel" data-exercise-tip-id=exercise_tip.id
    .card-body.p-3
      - if tip.description?
        h5
          = t('exercises.implement.tips.description')
        = render_markdown(tip.description)
      - if tip.example?
        h5
          = t('exercises.implement.tips.example')
        pre
          code.mh-100 class="language-#{tip.file_type.programming_language}"
            = tip.example
      = render(partial: 'tips/collapsed_card',
              collection: exercise_tip.children, as: :exercise_tip,
              locals: { tip_prefix: "#{tip_prefix + index.to_s}." })