= form_for @group, html: { class: 'group-form form-horizontal' } 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", tabindex: 1, autofocus: true

  .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, tabindex: 2

  .form-group.group-description-holder
    = f.label :avatar, "Group avatar", class: 'control-label'
    .col-sm-10
      %a.choose-btn.btn.btn-small.js-choose-group-avatar-button
        %i.fa.fa-paperclip
        %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.

  .form-group
    .col-sm-2
    .col-sm-10
      %ul
        %li A group is a collection of several projects
        %li Groups are private by default
        %li Members of a group may only view projects they have permission to access
        %li Group project URLs are prefixed with the group namespace
        %li Existing projects may be moved into a group

  .form-actions
    = f.submit 'Create group', class: "btn btn-create", tabindex: 3