       (button "TU Chemnitz" (str "http://dict.tu-chemnitz.de/?query=" word) disabled)
       (button "PONS" (str "http://de.pons.eu/dict/search/results/?l=dede&q=" word) disabled)]]))
 
-(defn hyphenation-list []
+(defn- navbar [active]
+  [:nav.navbar.navbar-default
+   [:div.container-fluid
+    [:div.navbar-header
+     [:button.navbar-toggle.collapsed
+      {:type "button"
+       :data-toggle "collapse"
+       :data-target "#navbar-collapse"
+       :aria-expanded "false"}
+      [:span.sr-only "Toggle navigation"]
+      [:span.icon-bar]
+      [:span.icon-bar]
+      [:span.icon-bar]]
+     [:a.navbar-brand {:href "/"} "Hyphenation"]]
+    [:div#navbar-collapse.navbar-collapse.collapse
+     [:ul.nav.navbar-nav.navbar-right
+      [:li
+       (if (= active :edit) {:class "active"} {})
+       [:a {:href "/edit"} "Edit"]]]]]])
+
+;; -------------------------
+;; Views
+
+(defn home-page []
   [:div.container
-   [:h1 "Hyphenation"]
+   [navbar :insert]
+   [:h2 "Insert Hyphenations"]
    [:div.row
     [:div.col-md-6
      [new-hyphenation]]]
-   [:h1 "Lookup"]
+   [:h2 "Lookup"]
    [hyphenation-lookup @word]
-   [:h1 "Similar words"]
+   [:h2 "Similar words"]
    [:div.row
     [:table#hyphenations.table.table-striped
      [:thead [:tr [:th "Word"] [:th "Hyphenation"]]]

                  (load-hyphenation-patterns! @spelling @word))
     :on-blur #(lookup-hyphenation-pattern! @spelling @word)}]])

(defn- hyphenation-valid? [s]
  (and (not (string/blank? s))
       (string/includes? s "-")
       (re-matches #"[a-z\xDF-\xFF-]+" s)))

(defn hyphenation-field []
  (let [label "Corrected Hyphenation"
        valid? (or (string/blank? @hyphenation) (hyphenation-valid? @hyphenation))

                             (.warn js/console
                                    (str "Failed to lookup hyphenation patterns for word: " details)))))

(defn hyphenation-pattern [{:keys [word hyphenation]}]
  [:tr
   [:td word]
   [:td hyphenation]])

(defn- hyphenation-valid? [s]
  (and (not (string/blank? s))
       (string/includes? s "-")
       (re-matches #"[a-z\xDF-\xFF-]+" s)))

(defn hyphenation-pattern-editable-item [{:keys [hyphenation]}]
  (let [editing (reagent/atom false)
        new-hyphenation (reagent/atom hyphenation)]
    (fn [{:keys [word hyphenation] :as pattern}]
      (if-not @editing
        [:tr
         [:td word]
         [:td hyphenation]
         [:td
          [:div.btn-group
           [:button.btn.btn-default
            {:on-click #(reset! editing true)}
            [:span.glyphicon.glyphicon-edit {:aria-hidden true}] " Edit"]
           [:button.btn.btn-default
            {:on-click #(remove-hyphenation-pattern! pattern)}
            [:span.glyphicon.glyphicon-trash {:aria-hidden true}] " Delete"]]]]
        [:tr
         [:td word]
         [:td
          [:input.form-control
           {:type "text"
            :auto-focus true
            :on-change #(reset! new-hyphenation (-> % .-target .-value))
            :on-key-down #(case (.-which %)
                            27 (do
                                 (reset! new-hyphenation hyphenation)
                                 (reset! editing false))
                            nil)
            :value @new-hyphenation}]]
         [:td
          [:div.btn-group
           [:button.btn.btn-default
            {:on-click #(do (when (hyphenation-valid? @new-hyphenation)
                              (add-hyphenation-pattern!
                               (assoc pattern :hyphenation @new-hyphenation)))
                            (reset! editing false))}
            [:span.glyphicon.glyphicon-ok {:aria-hidden true}] " Save"]
           [:button.btn.btn-default
            {:on-click #(do
                          (reset! new-hyphenation hyphenation)
                          (reset! editing false))}
            [:span.glyphicon.glyphicon-remove {:aria-hidden true}] " Cancel"]]]]))))

(defn word-field []
  [:div.form-group
