%h3.page-title= @milestone.new_record? ? "New Milestone" : "Edit Milestone ##{@milestone.iid}"
.back-link
  = link_to namespace_project_milestones_path(@project.namespace, @project) do
    ← To milestones

%hr

= form_for [@project.namespace.becomes(Namespace), @project, @milestone], html: {class: 'form-horizontal milestone-form gfm-form js-requires-input'}  do |f|
  -if @milestone.errors.any?
    .alert.alert-danger
      %ul
        - @milestone.errors.full_messages.each do |msg|
          %li= msg
  .row
    .col-md-6
      .form-group
        = f.label :title, "Title", class: "control-label"
        .col-sm-10
          = f.text_field :title, maxlength: 255, class: "form-control", required: true
          %p.hint Required
      .form-group.milestone-description
        = f.label :description, "Description", class: "control-label"
        .col-sm-10
          = render layout: 'projects/md_preview', locals: { preview_class: "md-preview" } do
            = render 'projects/zen', f: f, attr: :description, classes: 'description form-control'
            .hint
              .pull-left Milestones are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}.
              .pull-left Attach files by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
          .clearfix
          .error-alert
    .col-md-6
      .form-group
        = f.label :due_date, "Due Date", class: "control-label"
        .col-sm-10= f.hidden_field :due_date
        .col-sm-10
          .datepicker

  .form-actions
    - if @milestone.new_record?
      = f.submit 'Create milestone', class: "btn-create btn"
      = link_to "Cancel", namespace_project_milestones_path(@project.namespace, @project), class: "btn btn-cancel"
    -else
      = f.submit 'Save changes', class: "btn-save btn"
      = link_to "Cancel", namespace_project_milestone_path(@project.namespace, @project, @milestone), class: "btn btn-cancel"


:javascript
  $( ".datepicker" ).datepicker({
    dateFormat: "yy-mm-dd",
    onSelect: function(dateText, inst) { $("#milestone_due_date").val(dateText) }
  }).datepicker("setDate", $.datepicker.parseDate('yy-mm-dd', $('#milestone_due_date').val()));