       [:pre "..."]])])
 
 (defn history-card
-  [{:keys [state columns] :as props} num {:keys [ns expression result output] :as history-item}]
+  [{:keys [state columns] :as props} {:keys [num ns expression result output] :as history-item}]
   [:div
    {:class (str "mdl-cell " (card-columns-class columns))}
    [:div.mdl-card.mdl-shadow--2dp

    (if (< 0 columns)
      (assoc state :columns columns)
      state)))

(defn pprint-str [data]
  (with-out-str (fipp/pprint data)))

     "Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version."]]
   [:div.mdl-dialog__actions
    [:button.mdl-button
     {:on-click #(close-dialog "about-dialog")}
     "Ok"]]])

(defn reset-repl-button [{:keys [show-reset-dialog]}]
  [:button.mdl-button.mdl-js-button.mdl-js-ripple-effect
   {:on-click show-reset-dialog
    :style    {:color "#fff"}}
   [:i.material-icons "report"]
   [:span.mdl-cell--hide-phone "RESET"]])

(defn more-columns-button [{:keys [more-columns]}]
  [:button.mdl-button.mdl-js-button.mdl-js-ripple-effect.mdl-cell--hide-phone
   {:on-click more-columns
    :style    {:color "#fff"}}
   [:i.material-icons "view_column"]])

(defn less-columns-button [{:keys [less-columns]}]
  [:button.mdl-button.mdl-js-button.mdl-js-ripple-effect.mdl-cell--hide-phone
   {:on-click less-columns
    :style    {:color "#fff"}}
   [:i.material-icons "view_stream"]])

(defn menu-button [id]
  [:button.mdl-button.mdl-js-button.mdl-button--icon.mdl-js-ripple-effect {:id "main-menu"}
   [:i.material-icons "more_vert"]])

(defn more-columns-menu-item [{:keys [more-columns]}]
  [:li.mdl-menu__item {:on-click more-columns} "More Columns"])

(defn less-columns-menu-item [{:keys [less-columns]}]
  [:li.mdl-menu__item {:on-click less-columns} "Less Columns"])

(defn github-menu-item [{:keys [github]}]
  [:li.mdl-menu__item {:on-click github} "GitHub"])

(defn about-menu-item [{:keys [show-about-dialog]}]
  [:li.mdl-menu__item {:on-click show-about-dialog} "About"])

(defn reset-menu-item [{:keys [show-reset-dialog]}]
  [:li.mdl-menu__item {:on-click show-reset-dialog} "Reset REPL"])

(defn home-page-menu [props]
  [:ul.mdl-menu.mdl-menu--bottom-right.mdl-js-menu.mdl-js-ripple-effect
   {:for "main-menu"}
   [more-columns-menu-item props]
   [less-columns-menu-item props]
   [reset-menu-item props]
   [github-menu-item props]
   [about-menu-item props]])

(defn home-page-title [{:keys [title title-icon] :as props}]
  [:span.mdl-layout-title
   [:img.svg-size {:src title-icon}]
   (str " " title)])

(defn home-page-header [{:keys [reset-repl more-columns] :as props}]
  [:header.mdl-layout__header
   [:div.mdl-layout__header-row
    [home-page-title props]
    [:div.mdl-layout-spacer]
    [reset-repl-button props]
    [less-columns-button props]
    [more-columns-button props]
    [menu-button "main-menu"]
    [home-page-menu props]]])

(defn home-page [{:keys [state] :as props}]
  (debugf "Props: %s" (keys props))
  [:div
   [about-dialog props]
   [reset-dialog props]
   [:div.tall
    [mdl/upgrade
     [:div.flex-v.tall.mdl-layout.mdl-js-layout.mdl-layout--fixed-header.mdl-layout--no-drawer-button
      [home-page-header props]
      (if (:ns @state)
        [history (assoc props :columns (:columns @state))]
        [please-wait props])]]]])

(defn mount-root []
  (let [props {:state             state
               :more-columns      #(swap! state more-columns)
               :less-columns      #(swap! state less-columns)
               :show-reset-dialog #(show-dialog "reset-dialog")
               :show-about-dialog #(show-dialog "about-dialog")
               :github            #(set! (.-location js/window) "https://github.com/theasp/cljs-webrepl")
               :title-icon        "images/cljs-white.svg"
               :title             "Cljs-WebREPL"}]
    (r/render [home-page props] (.getElementById js/document "app"))))

(defn init! []
  (reset-repl! state)
