 
                      "hello"]))
 
+(defn select-val  [el-id] (some-> js/document (sel1 [el-id]) .-value))
+(defn select-vals [el-ids] (->> el-ids (map select-val) vec))
+
+(defn submit-login-form
+  [{:keys [login-user] :as cmd-chans}]
+  (fn [_]
+    (let [credentials (select-vals [:#user-id :#password])]
+      (prn credentials)
+
+      (go (>! login-user credentials)))))
+
+(defcomponent Login-box
+  [state cmd-chans]
+  (let [user-id (m/user-id state)]
+    (html [:main {class-name "mdl-layout__content mdl-color--grey-100"}
+           [:div {:class-name "mdl-card mdl-shadow--2dp employer-form"}
+            [:div {:class-name "mdl-card__title"}
+             [:h2 {} "Sign in"]
+             [:div {:class-name "mdl-card__subtitle"} "Please provide your user credentials"]]
+            [:div {:class-name "mdl-card__supporting-text"}
+             [:div {:class-name "form"}
+
+              [:div {:class-name "form__article"}
+               [:div {:class-name "mdl-grid"}
+
+                [:div {:class-name "mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label"}
+                 [:input {:class-name "mdl-textfield__input"
+                          :type       "text"
+                          :id         "user-id"
+                          :default-value user-id}]
+                 [:label {:class-name "mdl-textfield__label" :for "user-id"} "User name"]]
+
+                [:div {:class-name "mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label"}
+                 [:input {:class-name "mdl-textfield__input"
+                          :type       "password"
+                          :id         "password"}]
+                 [:label {:class-name "mdl-textfield__label" :for "password"} "Password"]]]]
+
+              [:div {:class-name "form__action"}
+               [:div {:class-name "mdl-layout-spacer"}]
+               [:button {:class-name "mdl-button mdl-js-button mdl-button--raised mdl-button--colored"
+                         :on-click   (submit-login-form cmd-chans)} "Submit"]]]]]])))
+
+(defcomponent Scene-browser
+  [state cmd-chans]
+  (html [:h1 {} "scene-browser"]))
+
+(defcomponent
+  Scene-form
+  [state cmd-chans]
+  (html [:h1 {} "create-scene"]))
+
+(defcomponent
+  Edit-config
+  [state cmd-chans]
+  (html [:h1 {} "edit-config"]))
+
+(defcomponent
+  Splash-screen
+  :on-mount (fn [node state {:keys [navigate]}]
+              (go (<! (timeout 5000))
+                  (>! navigate :view/login-user)))
+  [state {:keys [navigate] :as cmd-chans}]
+  (html [:main {:class-name "mdl-layout__content mdl-color--grey-100"}
+         [:div {:class-name "mdl-card mdl-shadow--2dp employer-form"
+                :on-click   #(go (>! navigate :view/login-user))}
+          [:h1 {:style {:background-color "yellow"}} "<<< Plongeur >>>"]]]))
+
 (defcomponent Root
   [state cmd-chans]
   (html [:div {:id "plongeur-main"}

               :class-name "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab"}
         [:i {:class-name "material-icons"} "delete"]]]]])))

(defcomponent Grid
  [state cmd-chans]
  (html [:main {:class-name "mdl-layout__content"}
         [:div {:class-name "mdl-grid mdl-grid--no-spacing"}

          #_(Drawer state cmd-chans)

          (case (m/current-view state)
            :view/login-user    (Login-box     state cmd-chans)
            :view/browse-scenes (Scene-browser state cmd-chans)
            :view/create-scene  (Scene-form    state cmd-chans)
            :view/edit-scene    (Scene-grid    state cmd-chans)
            :view/edit-config   (Edit-config   state cmd-chans)
                                (Splash-screen state cmd-chans))]]))

(defn view
  "Returns a stream of view trees, represented as a core.async channel."
