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

          [: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)

  [wizard-state]
  (let [channel-state (reagent/cursor wizard-state [:channel-config])
        valid-form?   @(re-frame/subscribe [:valid-slack-config? @channel-state])]
    [:div.columns.is-centered
     [:div.column.is-half
      [step-title "Fill the configuration for the slack integration."]
      [forms/detached-form-view channel-state
       ;; TODO add a name already taken validation
       {:fields [{:key      :name
                  :type     "text"
                  :required true}
                 {:key       :url
                  :type      "text"
                  :label     "Slack hook url"
                  :validate  :valid-slack-hook?
                  :help-text [:span "You can get the hook url "
                              [:a {:href   "https://my.slack.com/services/new/incoming-webhook/"
                                   :target "blank"} "here."]]
                  :required  true}
                 {:key       :targets
                  :type      "text"
                  :label     "Targets"
                  :validate  :valid-slack-targets?
                  :help-text "Where to send the message. Space separated, use \"#name\" for channels and \"@name\" for users. If left empty, the channel configured in the Slack hook will be used."}
                 {:key       :username
                  :type      "text"
                  :label     "Bot username"
                  :help-text "Defaults to :calendar:"}
                 {:key       :emoji
                  :type      "text"
                  :label     "Bot emoji"
                  :help-text "Defaults to HolidayPing"}]}]
      [wizard-navigation (dec-step wizard-state) {:static (not valid-form?)
                                                  :event  (inc-step wizard-state)}]]]))

(defn webhook-config-form
  [wizard-state]
  [:div
   [:br]
   [step-title "Fill the configuration for the webhook integration."]
   ])

(defn email-config-form
  [wizard-state]
  [:div
   [:br]
   [step-title "Fill the configuration for the email integration."]
   ])

(defn reminder-config-form
  [wizard-state]
  (let [reminder-state (reagent/cursor wizard-state [:reminder-config])]
    [:div.columns.is-centered
     [:div.column.is-half
      [step-title "When you want the reminders sent?"]
      [forms/detached-form-view reminder-state
       {:fields [{:key     :same-day
                  :label   "Send a reminder on the same day."
                  :type    "select"
                  :options [{:text "Yes" :value true}
                            {:text "Don't send" :value false}]}
                 {:key     :days-before
                  :label   "Send a reminder before the holiday."
                  :type    "select"
                  :options [{:text "Don't send" :value 0}
                            {:text "The day before" :value 1}
                            {:text "Three days before" :value 3}
                            {:text "A week before" :value 7}]}]}]
      [wizard-navigation (dec-step wizard-state) (inc-step wizard-state)]]]))

(defn holiday-source-form
  [wizard-state]
  (let [source-state (reagent/cursor wizard-state [:source-config])
        channels     @(re-frame/subscribe [:channels])
        source       (:source @source-state)]
    [:div.columns.is-centered
     [:div.column.is-half
      [step-title "What holidays do you want by default on your calendar?"]
      [:form
       [:div.field
        [:div.control
         [:label.radio
          [:input {:type      "radio"
                   :name      "from-country"
                   :checked   (= source :country)
                   :on-change #(swap! source-state assoc :source :country)}]
          " Use country defaults"]]]
       [:div.field
        [:div.control
         [forms/input-view source-state
          {:key      :country
           :type     "select"
           :disabled (not= source :country)
           :options  ["Argentina" "Brazil" "United States"]}]]]
       [:br]

       (when-not (empty? channels)
         [:div
          [:div.field
           [:div.control
            [:label.radio
             [:input {:type      "radio"
                      :name      "from-channel"
                      :checked   (= source :channel)
                      :on-change #(swap! source-state assoc :source :channel)}]
             " Copy from another channel"]]]
          [:div.field
           [:div.control
            [forms/input-view source-state
             {:key      :channel
              :type     "select"
              :disabled (not= source :channel)
              :options  (map :name channels)}]]]
          [:br]])

       [:div.field
        [:div.control
         [:label.radio
          [:input {:type      "radio"
                   :name      "empty"
                   :checked   (= source :empty)
                   :on-change #(swap! source-state assoc :source :empty)}]
          " Start with an empty calendar"]]]]

      [wizard-navigation
       (dec-step wizard-state)
       #(do (re-frame/dispatch [:load-base-holidays @source-state])
            (swap! wizard-state update :step-n inc))]]]))

(defn holiday-controls
  [wizard-state]
