 ; ----- Common components -----
 
 (defn menu
+  "Fixed information & navigazion menu"
   []
   [:div#info-menu.btn-group {:role "group"}
-   [:a.btn.btn-default {:href "#"}
-    [:span.glyphicon.glyphicon-home.glyphicon-start]
-    (t :labels/home)]
-   [:button.btn.btn-default {:on-click #(reagent-modals/modal! (modals/game-info)
-                                                               {:size :lg})}
-    [:span.glyphicon.glyphicon-info-sign.glyphicon-start]
-    (t :labels/about)]])
+   [:a.btn.btn-default {:href "#"} [:span.glyphicon.glyphicon-home.glyphicon-start] (t :labels/home)]
+   [:button.btn.btn-default {:on-click #(reagent-modals/modal! (modals/game-info) {:size :lg})}
+    [:span.glyphicon.glyphicon-info-sign.glyphicon-start] (t :labels/about)]])
 
 (defn label-element
   "Label with text for input identified with for-id"
   [for-id text]
   [:label.col-sm-4.control-label {:for for-id} text])
+
+(defn single-select
+  "Single-select button group. Associates selected value into given id path in app-state.
+  The group is labelled with label-key's value from the translation map.
+  Values of the available buttons are given in options as a collection of [value label] pairs.
+  Label can be either a string or a keyword that will be looked up in the translation map."
+  [id label-key options]
+  (let [id-str (string/join "." (map name id))
+        click (fn [e] (swap! app-state #(assoc-in % id (keyword (.. e -target -dataset -key)))))
+        btn-class (partial join-by-space "btn" "btn-default")
+        button (fn [current-id [id label]]
+                 [:button {:class (btn-class (when (= id current-id) "active"))
+                           :data-key id
+                           :key id} 
+                  (if (keyword? label) (t label) label)])]
+    (fn []
+      (let [current (get-in @app-state id)]
+        [:div.form-group
+         [label-element id-str (t label-key)]
+         [:div.btn-group.col-sm-8 {:id id-str
+                                   :on-click click
+                                   :role "group"}
+          (doall (for [option options]
+                   (button current option)))]]))))
+
+(defn multi-select
+  "Multi-select button group.Associates selected values into given id path in app-state.
+  The group is labelled with label-key's value from the translation map.
+  Values of the available buttons are given in options as a collection of [value label] pairs.
+  Label can be either a string or a keyword that will be looked up in the translation map."
+  [id label-key options]
+  (let [id-str (string/join "." (map name id))
+        click (fn [current-id update-fn]
+                (swap! app-state (fn [state] (update-in state id #(update-fn % current-id)))))
+        btn-class (fn [active?] (join-by-space "btn" "btn-default" (when active? "active")))]
+    (fn []
+      (let [current-value (get-in @app-state id)]
+        [:div.form-group
+         [label-element id-str (t label-key)]
+         [:div.col-sm-8.btn-group-vertical {:id id-str
+                                            :role "group"}
+          (doall (for [[current-id label] options
+                       :let [active? (current-value current-id)
+                             update-fn (if active? disj conj)]]
+                   [:button {:class (btn-class active?)
+                             :key label
+                             :on-click (partial click current-id update-fn)}
+                    (t label)]))]]))))
 
 ; ----- Home page -----
 


(defn field-labelling
  []
  (let [id [:options :labels]
        options [[:numeric "0-9"]
                 [:alphabetic "A-Z"]]
        click-fn (fn [e]
                   (swap! app-state
                          #(assoc-in % id (keyword (.. e -target -dataset -key)))))
        btn-class-fn (partial join-by-space "btn" "btn-default")
        button-fn (fn [current-id [id label]]
                    [:button {:class (btn-class-fn (when (= id current-id) "active"))
                              :data-key id
                              :key id} 
                     label])]
    (fn []
      (let [current (get-in @app-state id)]
        [:div.form-group {:on-click click-fn}
         [:label.col-sm-4.control-label (t :home/field-labelling)]
         [:div.btn-group.col-sm-8 {:role "group"}
          (doall (for [option options]
                   (button-fn current option)))]]))))

(defn language-picker
  []

  []
  (let [{:keys [board current-field]} @app-state]
    (if (empty? board)
      (do (redirect "#") ; If no data is loaded, redirect to home page.
          [:div]) ; Return empty div as a valid Reagent component. 
      [:div.container-fluid
       [menu]
       [:div.row
