.row
  .col-md-2
    %ul.nav.nav-pills.nav-stacked.nav-stacked-menu
      %li.active
        = link_to '#tab-edit', 'data-toggle' => 'tab' do
          %i.icon-edit
          Group
      %li
        = link_to '#tab-projects', 'data-toggle' => 'tab' do
          %i.icon-folder-close
          Projects
      %li
        = link_to '#tab-remove', 'data-toggle' => 'tab' do
          %i.icon-remove-sign
          Remove

  .col-md-10
    .tab-content
      .tab-pane.active#tab-edit
        .ui-box
          .title
            %strong= @group.name
            group settings:
          %div.form-holder
            = form_for @group, html: { multipart: true, class: "form-horizontal" }, authenticity_token: true do |f|
              - if @group.errors.any?
                .alert.alert-danger
                  %span= @group.errors.full_messages.first
              .form-group
                = f.label :name, class: 'control-label' do
                  Group name
                .col-sm-10
                  = f.text_field :name, placeholder: "Ex. OpenSource", class: "form-control left"

              .form-group.group-description-holder
                = f.label :description, "Details", class: 'control-label'
                .col-sm-10
                  = f.text_area :description, maxlength: 250, class: "form-control js-gfm-input", rows: 4

              .form-group
                .col-sm-2
                .col-sm-10
                  = image_tag group_icon(@group.to_param), alt: '', class: 'avatar s160'
                  %p.light
                    - if @group.avatar?
                      You can change your group avatar here
                    - else
                      You can upload an group avatar here
                  %a.choose-btn.btn.btn-small.js-choose-group-avatar-button
                    %i.icon-paper-clip
                    %span Choose File ...
                   
                  %span.file_name.js-avatar-filename File name...
                  = f.file_field :avatar, class: "js-group-avatar-input hidden"
                  .light The maximum file size allowed is 100KB.
                  - if @group.avatar?
                    %hr
                    = link_to 'Remove avatar', group_avatar_path(@group.to_param), data: { confirm: "Group avatar will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-small remove-avatar"

              .form-actions
                = f.submit 'Save group', class: "btn btn-save"

      .tab-pane#tab-projects
        .ui-box
          .title
            %strong= @group.name
            projects:
            - if can? current_user, :manage_group, @group
              %span.pull-right
                = link_to new_project_path(namespace_id: @group.id), class: "btn btn-tiny" do
                  %i.icon-plus
                  New Project
          %ul.well-list
            - @group.projects.each do |project|
              %li
                .list-item-name
                  = visibility_level_icon(project.visibility_level)
                  = link_to project.name_with_namespace, project
                .pull-right
                  = link_to 'Members', project_team_index_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
                  = link_to 'Edit', edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
                  = link_to 'Remove', project, data: { confirm: remove_project_message(project)}, method: :delete, class: "btn btn-small btn-remove"
            - if @group.projects.blank?
              .nothing-here-block This group has no projects yet

      .tab-pane#tab-remove
        .ui-box.ui-box-danger
          .title Remove group
          .body
            %p
              Removing group will cause all child projects and resources to be removed.
            %p
              %strong Removed group can not be restored!

            = link_to 'Remove Group', @group, data: {confirm: 'Removed group can not be restored! Are you sure?'}, method: :delete, class: "btn btn-remove"