(defn load-users! "Fetches a list of users and adds them to the state"
  [state]
  (ajx/GET "/users/users.json"
    {:handler (fn [users] (swap! state assoc :users users))
     :error-handler (fn [details] (.warn js/console (str "Failed to fetch users!" details)))
     :response-format :json :keywords? true
     :headers {:Access-Control-Allow-Headers "Content-Type"
               :Access-Control-Allow-Origin "*"
               :Access-Control-Allow-Methods "GET"}}))

(defn <top-cpnt> []
  (let [{:keys [users search]} @state]
    [:div.container-fluid
     [:div.row
      [:div.col-md-2 [<search-cpnt> search]]
      [:div.col-md-8 [<user-list> users search]]]]))

(defn <user-list> "A list of users"
  [user-list search]
  [:div.container-fluid
   [:ul
    (for [user (->> user-list (filter #(matches-search? search %)))]
      ^{:key (:name user)} [<user-item> user])]])

(defn <user-item> "A single user"
  [{:keys [DisplayName Title id] :as user}]
  [:a {:href (path-for :user-id {:id id})}
   [:li.user-item
    [:span "Name: " DisplayName]
    [:p "Title: " Title]]])