= gitlab_ui_form_for [@group, @milestone], html: { class: 'milestone-form common-note-form js-quick-submit js-requires-input' } do |f|
  = form_errors(@milestone)
  .form-group.row
    .col-form-label.col-sm-2
      = f.label :title, _("Title")
    .col-sm-10
      = f.text_field :title, maxlength: 255, class: "form-control", data: { qa_selector: "milestone_title_field" }, required: true, autofocus: true
  = render "shared/milestones/form_dates", f: f
  .form-group.row.milestone-description
    .col-form-label.col-sm-2
      = f.label :description, _("Description")
    .col-sm-10
      = render layout: 'shared/md_preview', locals: { url: group_preview_markdown_path } do
        = render 'shared/zen', f: f, attr: :description,
                                classes: 'note-textarea',
                                qa_selector: 'milestone_description_field',
                                supports_autocomplete: true,
                                placeholder: _('Write milestone description...')
      .clearfix
      .error-alert

  .form-actions
    - if @milestone.new_record?
      = f.submit _('Create milestone'), data: { qa_selector: "create_milestone_button" }, pajamas_button: true
      = render Pajamas::ButtonComponent.new(href: group_milestones_path(@group)) do
        = _("Cancel")
    - else
      = f.submit _('Update milestone'), pajamas_button: true
      = render Pajamas::ButtonComponent.new(href: group_milestone_path(@group, @milestone)) do
        = _("Cancel")