            [:button {:class (str "btn btn-default " (when (= "given" @(cursor state [:show])) "btn-active"))
                      :id "btn-all"
                      :on-click #(do (swap! state assoc :show "given"))}
-            (t :badge/Iendorsed)]]] ]]
+            (t :badge/Iendorsed)]]] ]
+        [g/grid-radio-buttons (t :core/Order ":") "order" (order-opts) :order state]]
 
        (endorsements state)]
       [:div (t :badge/Youhavenoendorsements)])]])

                             ]

                            [:div.caption.card-footer.text-center
                             [:hr]
                             #_[:button.btn.btn-primary {:href "#"
                                                         :on-click #(do
                                                                      (.preventDefault %)
                                                                      (update-status id "accepted" user_badge_id state init-pending-endorsements)
                                                                      )} (t :badge/Acceptendorsement)]
                             #_[:button.btn.btn-warning.cancel {:href "#"
                                                                :on-click #(do
                                                                             (.preventDefault %)
                                                                             (update-status id "declined" user_badge_id state init-pending-endorsements))} (t :badge/Declineendorsement)]
                             [:ul.list-inline.buttons
                              [:li {:style {:margin "10px"}} [:a.button {:href "#"
                                                                         :on-click #(do
                                                                                      (.preventDefault %)
                                                                                      (update-status id "accepted" user_badge_id state init-pending-endorsements)
                                                                                      )} [:i.fa.fa-check] (t :badge/Acceptendorsement)]]
                              [:li.cancel {:style {:margin "10px"}}[:a.button {:href "#"
                                                                               :on-click #(do
                                                                                            (.preventDefault %)
                                                                                            (update-status id "declined" user_badge_id state init-pending-endorsements))} [:i.fa.fa-remove] (t :badge/Declineendorsement)]]]]]]]))) [:div.row] @(cursor state [:pending]))
       ])))

(defn endorse-badge [badge-id]

                  (when reload-fn (reload-fn state))))}))




(def simplemde-toolbar (array "bold" "italic" "heading-3"
                              "quote" "unordered-list" "ordered-list"
                              "link" "horizontal-rule"
                              "preview"))

(defn init-editor [atom element-id]
  (let [editor (js/SimpleMDE. (js-obj "element" (.getElementById js/document element-id)
                                      "toolbar" simplemde-toolbar
                                      "autosave" "true"
                                      "forceSync" "true"))]

    (js/setTimeout (fn [] (.value editor @atom)) 200) ;;delay for editor to load
    (.codemirror.on editor "change" (fn [] (reset! atom (.value editor))))))

(defn markdown-editor [value]
  (create-class {:component-did-mount #(init-editor value (str "editor" (-> (session/get :user) :id)))
                 :reagent-render (fn []
                                   [:div.form-group
                                    [:textarea {:class "form-control"
                                                :id (str "editor" (-> (session/get :user) :id))
                                                ;:value @atom
                                                :on-change #(reset! value (.-target.value %))
                                                }]]) }))

(defn test-editor [value]
  (let [instance (atom nil)]
    (create-class {:component-did-mount (fn []
                                          (let [editor (js/SimpleMDE. (js-obj "element" (.getElementById js/document (str "editor" (-> (session/get :user) :id)))
                                                                              "toolbar" simplemde-toolbar
                                                                              "autosave" "true"
                                                                              "forceSync" "true"))]
                                            (-> editor
                                                .-codemirror
                                                (.refresh)
                                                #_(.setValue @value))
                                            (.value editor @value)

                                            (.codemirror.on editor "scroll" (fn [] (.value editor @value)))
                                            (.codemirror.on editor "mousedown" (fn [] (.value editor @value)))
                                            (.codemirror.on editor "change" (fn [] (reset!  value (.value editor))))
                                            )

                                          )
                   :component-did-update (fn [this editor]
                                           (prn "TEST"))
                   :reagent-render (fn []
                                     @value
                                     [:div.form-group
                                      [:textarea {:class "form-control"
                                                  :id (str "editor" (-> (session/get :user) :id))
                                                  :defaultValue @value
                                                  :on-change #(reset! value (.-target.value %))
                                                  }]])})))

(defn process-text [s state]
  (let [text (-> js/document
                 (.getElementById (str "editor" (-> (session/get :user) :id)))
                 (.-innerHTML))
        endorsement-claim (str text (if (blank? text) "" "\n\n") "* " s)]
    ; (prn text)
    (reset! (cursor state [:endorsement-comment]) endorsement-claim))
  #_(init-editor (cursor state [:endorsement-comment] (-> (session/get :user) :id))))


#_(defn editor [value-atom]
    (let [cm (atom nil)]
      (create-class
        {:component-did-mount
         (fn [this]
           (let [el (dom-node this)
                 editor (js/SimpleMDE.
                          (clj->js
                            {:toolbar simplemde-toolbar
                             :autofocus    true
                             :spellChecker true
                             :placeholder  ""
                             :forceSync    true
                             :element      @cm
                             :initialValue @value-atom
                             :value        @value-atom
                             }))]

             (reset! cm editor)
             (.codemirror.on editor "change" (fn [] (reset! value-atom (.value editor))))
             #_(.on editor "change"
                    (fn []
                      (let [value (.value editor)]
                        (when-not (= value @value-atom)
                          (reset! value-atom value)))))
             ))

         :component-did-update
         (fn [this old-argv]
           (when-not (= @value-atom (.value cm))
             (.setValue @cm @value-atom)
             ;; reset the cursor to the end of the text, if the text was changed externally
             (let [last-line (.lastLine @cm)
                   last-ch (count (.getLine @cm last-line))]
               (.setCursor @cm last-line last-ch))))

         :reagent-render
         (fn [_ _ _]
           ;@atom
           [:textarea {:id (str "editor" (-> (session/get :user) :id)) :defaultValue @value-atom}])})))



(defn endorse-badge-content [state]

  (fn []
    [:div {:style {:display @(cursor state [:show-content])}}
     [:hr]
