    [:input.new-todo
     {:autofocus true, :placeholder placeholder}]])
 
+(defn todo-item [todo]
+    (fn [{:keys [id title done]}]
+      [:li {:class (if done "completed" "")}
+       [:div.view
+        [:input.toggle {:type "checkbox" :checked done :on-change #(toggle id)}]
+        [:label title]
+        [:button.destroy {:on-click #(delete id)}]
+        [:input.edit {:value ""}]]]))
+
 (defn todo-list [todos]
-  (for [todo todos]
-    [:li
-     [:div.view
-      [:input.toggle {:type "checkbox"}]
-      [:label (:value todo)]
-      [:button.destroy]
-      [:input.edit {:value ""}]]]))
+  [:ul.todo-list
+   (for [todo todos]
+     ^{:key (:id todo)} [todo-item todo])])
+
+(defn todo-footer [count]
+  (when (> count 0)
+    [:footer.footer
+     [:span.todo-count [:strong (str count)] " item left"]
+     [:ul.filters
+      [:li [:a.selected {:href "#/"} "All"]]
+      [:li [:a {:href "#/active"} "Active"]]
+      [:li [:a {:href "#/completed"} "Completed"]]]
+     [:button.clear-completed "Clear completed"]]))
 
 (defn home-page []
   (fn []

      [:section.main
       [:input.toggle-all {:type "checkbox"}]
       [:label {:for "toggle-all"} "Mark all as complte"]
       
       [:ul.todo-list
        (todo-list @todos)
        ]]
      
      [:footer.footer
       [:span.todo-count [:strong "0"] " item left"]
       [:ul.filters
        [:li [:a.selected {:href "#/"} "All"]]
        [:li [:a {:href "#/active"} "Active"]]
        [:li [:a {:href "#/completed"} "Completed"]]]
       [:button.clear-completed "Clear completed"]]]
     
     [:footer.info
      [:p "Double-click to edit a todo"]

(ns todomvc-reagent.core
    (:require [reagent.core :as r]))

;; -------------------------
;; Db

(def todos
  (r/atom (sorted-map)))

(def counter
  (r/atom 0))

(defn add-todo
  ([title]
   (add-todo title false))
  ([title done]
   (let [id (swap! counter inc)]
     (swap! todos assoc id {:id id :title title :done done}))))

(add-todo "Taste JavaScript" true)
(add-todo "Buy a unicorn")

;; -------------------------
;; Helper
(defn toggle [id]
  (swap! todos update-in [id :done] not))
(defn delete [id]
  (swap! todos dissoc id))

;; -------------------------
;; Views
