(def container ui/Container)
(def grid ui/Grid)
(def row ui/Grid.Row)
(def column ui/Grid.Column)
(def form ui/Form)
(def form-field ui/Form.Field)
(def form-checkbox ui/Form.Checkbox)
(def form-button ui/Form.Button)
(def form-dropdown ui/Form.Dropdown)
(def form-input ui/Input)
(def icon ui/Icon)
(def segment ui/Segment)
(def segment-group ui/Segment.Group)
(def menu ui/Menu)
(def menu-item ui/Menu.Item)
(def menu-nested ui/Menu.Menu)
(def search ui/Search)
(def divider ui/Divider)
(def label ui/Label)
(def breadcrumb ui/Breadcrumb)
(def breadcrumb-section ui/Breadcrumb.Section)
(def breadcrumb-divider ui/Breadcrumb.Divider)
(def dropdown ui/Dropdown)
(def dropdown-menu ui/Dropdown.Menu)
(def dropdown-header ui/Dropdown.Header)
(def dropdown-item ui/Dropdown.Item)
(def popup ui/Popup)
(def image ui/Image)
(def button ui/Button)

(defn home [] [:p "This is the home page"])
(defn about [] [:p "This is the about page"])

(defn home-page-example [] (let [active (reagent/atom "home")
                                 main (reagent/atom home)]
                             (fn []
                             [:> grid
                              [:> row
                               [:> column
                                [:> menu {:secondary "true" :pointing "true" :color "teal" :size "tiny"}
                                 [:> menu-item
                                  [:> image
                                   {:size "tiny" :src "https://www.graphicsprings.com/filestorage/images/292/logomakersamples53.png?width=150&height=70&quality=80&crop=0&method=crop"}]]
                                 [:> menu-nested
                                  {:position "right"}
                                  [:> menu-item
                                   {:id "home"
                                    :active (if (= @active "home") true false)
                                    :on-click #(js/alert (.getElementById js/document "about"))}
                                   "Home"]
                                  [:> menu-item
                                   {:id "about"
                                    :active (if (= @active "about") true false)
                                    :on-click #(js/alert (.getElementById js/document "home"))}
                                   "About-Us"]
                                  [:> menu-item {:name "contact"} "Contact"]
                                  [:> menu-item [:> button {:compact "true" :size "mini"} "Log-in"]]]]]]
                               [:> row {:stretched "true"}
                                [:> column {:width "three"}
                                 [side-bar]]
                                  [:> column {:width "thirteen"}
                                  [:> segment {}
                                   [@main]]]]
                              [:> row
                               [:> column
                                  [:> segment
                                   [:p "This is an example of a footer"]]]]])))