.container-fluid
  div
    .medium.fs-20
      = @project.title
    .semi-bold.fs-30.mb-2
      = t(:create_a_new_sub_project)
    = render 'form'

    .d-flex.flex-column.align-items-center.bg-light.justify-content-center.p-5.mt-5.mx-auto style="width: 30vw;"
      .fs-16.semi-bold.justify-content-center.text-wrap.text-center.mb-3
        | Complete the following steps to finish creating this Sub-Project
      .d-flex.align-items-center.rounded.p-3.mb-3 style="background-color: #E5F0FB; width: 22vw;"
        .number-circle
          | 2
        .fs-14.medium.ms-3
          | Upload Conversations
      .d-flex.align-items-center.rounded.p-3.mb-3 style="background-color: #E5F0FB; width: 22vw;"
        .number-circle
          | 3
        .fs-14.medium.ms-3
          | Create, edit, manage tags
      .d-flex.align-items-center.rounded.p-3.mb-3 style="background-color: #E5F0FB; width: 22vw;"
        .number-circle
          | 4
        .fs-14.medium.ms-3
          | Create, edit, manage sections
  
  / .d-flex.flex-column.align-items-center.bg-light.justify-content-center.p-5.mt-5.mx-auto style="width: 35vw;"
  /   .fs-16.semi-bold.justify-content-center.text-wrap.text-center.mb-3
  /     | Complete the following steps to finish creating this Sub-Project
  /   - steps = ["Upload Conversations", "Create, edit, manage tags", "Create, edit, manage sections"]
  /   - steps.each_with_index do |step, index|
  /     .d-flex.align-items-center.rounded.py-2.mb-3 style="background-color: #E5F0FB; width: 25vw; padding-left: 15px;"
  /       .d-flex.align-items-center.justify-content-center.rounded-circle.me-3(style="width: 30px; height: 30px; background-color: white;")
  /         .number-circle.fs-14.semi-bold.text-center(style="width: 100%; line-height: 30px;")
  /           | #{index + 1}
  /       .fs-14.medium.text-left(style="flex-grow: 1;")
  /         | #{step}