-{div, span, h3, h4, button, i, ul, li, p} = React.DOM
+{div, span, h3, h4, button, i, ul, li, p, textarea, input} = React.DOM
 
 @ProfileInfo = React.createFactory React.createClass
   getInitialState: ->
     edit_mode: false
     user: @props.user
+    
+  onEditPressed: ->
+    @setState edit_mode: true
 
   render: ->
     innerContent = if @state.edit_mode

        (span className: "label__item label label-default", key: "service_#{i}", service)
      
    (span null,
      (button className: 'title__btn_edit edit-body__btn-group_in-title btn btn-link', type: "button",
        (i className: 'button__icon fa fa-pencil')
        (span null, 'Edit'))


                (h4 className: "form__title", 'Services')
                (div className: "form__label",
                  (services))))))))
          
  onCancelPressed: ->
    @setState edit_mode: false

  renderForm: ->
    (span null,
      (div className: 'edit-body__btn-group edit-body__btn-group_in-title', onClick: @onCancelPressed,
        (button className: 'btn-group__item_left btn_link btn btn-link', type: 'button', 'Cancel'))
        
      (div className: "section__body section__body_edit",
        (div className: "edit-body",
          (div className: "edit-body__form",
            (h4 className: "form__title", 'About me')
            (textarea className: "form__textarea form-control"))

          (div className: "edit-body__form",
            (h4 className: "form__title", 'What I do')
            (textarea rows: {3}, placeholder: "Something more", className: "form__textarea form-control"))

          (div className: "edit-body__form",
            (div className: "row",
              (div className: "col-md-7",
                (h4 className: "form__title", 'Roles')
                (div className: "form__label",
                  (span className: "label__item label label-default",
                    (span null, 'UX')
                    (i className: "label__icon fa fa-times"))

                  (span className: "label__item label label-default",
                    (span null, 'UI')
                    (i className: "label__icon fa fa-times"))

                  (span className: "label__item label label-default",
                    (span null, 'Mobile Design')
                    (i className: "label__icon fa fa-times"))

                  (span className: "label__item label label-default",
                    (span null, 'Illustrations')
                    (i className: "label__icon fa fa-times"))))

              (div className: "col-md-5",
                (div className: "form__input input-group",
                  (input type: "text", placeholder: "Type here", className: "input__form-control form-control")
                  (span className: "input-group-btn",
                    (button type: "button", className: "input__btn btn btn-default",
                      (i className: "input__btn-icon fa fa-angle-down")))))))

          (div className: "edit-body__form",
            (div className: "row",
              (div className: "col-md-7",
                (h4 className: "form__title", 'Skills')
                (div className: "form__label",
                  (span className: "label__item label label-default",
                    (span null, 'UX')
                    (i className: "label__icon fa fa-times"))

                  (span className: "label__item label label-default",
                    (span null, 'UI')
                    (i className: "label__icon fa fa-times"))

                  (span className: "label__item label label-default",
                    (span null, 'Mobile Design')
                    (i className: "label__icon fa fa-times"))

                  (span className: "label__item label label-default",
                    (span null, 'Illustrations')
                    (i className: "label__icon fa fa-times"))))

              (div className: "col-md-5",
                (div className: "form__input input-group",
                  (input type: "text", placeholder: "Type here", className: "input__form-control form-control")
                  (span className: "input-group-btn",
                    (button type: "button", className: "input__btn btn btn-default",
                      (i className: "input__btn-icon fa fa-angle-down")))))))

          (div className: "edit-body__form",
            (div className: "row",
              (div className: "col-md-7",
                (h4 className: "form__title", 'Services')
                (div className: "form__label",
                  (span className: "label__item label label-default",
                    (span null, 'UX')
                    (i className: "label__icon fa fa-times"))

                  (span className: "label__item label label-default",
                    (span null, 'UI')
                    (i className: "label__icon fa fa-times"))

                  (span className: "label__item label label-default",
                    (span null, 'Mobile Design')
                    (i className: "label__icon fa fa-times"))

                  (span className: "label__item label label-default",
                    (span null, 'Illustrations')
                    (i className: "label__icon fa fa-times"))))

              (div className: "col-md-5",
                (div className: "form__input input-group",
                  (input type: "text", placeholder: "Type here", className: "input__form-control form-control")
                  (span className: "input-group-btn",
                    (button type: "button", className: "input__btn btn btn-default",
                      (i className: "input__btn-icon fa fa-angle-down")))))))

          (div className: "edit-body__btn-group edit-body__btn-group_right",
            (button type: "button", className: "btn-group__item_left btn_link btn btn-link", onClick: @onCancelPressed, 'Cancel')
            (button type: "button", className: "btn-group__item_right btn_save btn btn-success", 'Save')))))