            [:span.icon.is-small
             [:i.fa.fa-chevron-right]]]]])]]))
 
+(defn step-title
+  [text]
+  [:p.subtitle.is-5.has-text-centered text])
+
 (defn select-type-event
   [state type]
   #(do (swap! state update :step-n inc)

          [:div.step-marker]
          [:div.step-content [:p.step-title title]]]))]]])

(defn create-view
  []
  (let [wizard-state (reagent/atom {:step-n          0
                                    :type            :slack
                                    :channel-config  {}
                                    :reminder-config {:same-day    true
                                                      :days-before 0}
                                    :source-config   {:source  :country
                                                      :country "Argentina"}})]
    (fn []
      (let [step-keys    [:type-select :channel-config :reminder-config :holidays-source :holidays]
            step-n       (:step-n @wizard-state)
            step         (get step-keys step-n)
            wide?        (contains? #{:type-select :holidays} step)
            section-size (if wide? :is-full :is-half)
            wizard-size  (if wide? :is-half :is-full)]
        [:div
         [views/section-size section-size
          [views/breadcrumbs [["Channels" "/"] ["New"]]]
          [wizard-steps wizard-state step-n wizard-size]
          (case step
            :type-select     [type-select wizard-state]
            :channel-config  (case (:type @wizard-state)

        on-prev      (get prev :event prev)
        on-next      (get next :event next)]
    [:div
     [:nav.level
      [:div.level-left
       (when show-prev?
