   [:div.pure-g
   [:p.subtitle.pure-u
     [:input {:type        "text"
-             :placeholder "A suitable description"
+             :placeholder "Optional description"
              :on-change   #(swap! template-state assoc :description (-> % .-target .-value))
              :value       (:description @template-state)}]]])
 

                                                             "yellow")}
                                    :on-click #(when (not (some #{c} (get-in @template-state [:parts i :categories])))
                                                (swap! template-state update-in [:parts i :categories] conj c))} c]]))








       [:div.pure-g
        [:label.pure-u "Additionally, the following exercises should always be included:"]
        [:div.pure-u


(def template-state (atom {:parts []}))

(defn preview-file []
  (let [file (.getElementById js/document "upload")
        reader (js/FileReader.)]
    (when-let [file (aget (.-files file) 0)]
      (set! (.-onloadend reader) #(swap! template-state assoc :background (-> % .-target .-result)))
      (.readAsDataURL reader file))))

(defn movement-component
  ([data title image] (movement-component data title image nil))
  ([{:keys [reps sets distance duration i]} title image m]
    [:div.pure-u.movement
     [:div.pure-g
      [:div.pure-u.refresh {:on-click #()}]
      [:h3.pure-u.title title]
      [:div.pure-u.destroy {:on-click #(when (and (not (nil? m)) (not (nil? i)))
                                        (let [movements (vec (remove #{m} (get-in @template-state [:parts i :specific-movements])))]
                                          (swap! template-state assoc-in [:parts i :specific-movements] movements)))}]]
     [:img.graphic.pure-img-responsive {:src image}]
     [:div.pure-g
      [:div.pure-u-1-4 reps]
      [:div.pure-u-3-4 "reps"]]
     [:div.pure-g
      [:div.pure-u-1-4 sets]
      [:div.pure-u-3-4 "set"]]
     [:div.pure-g
      [:div.pure-u-1-4 distance]
      [:div.pure-u-3-4 "meters"]]
     [:div.pure-g
      [:div.pure-u-1-4 duration]
      [:div.pure-u-3-4 "seconds"]]]))

(defn rep-set-distance-duration-component [i]
  [:div
   [:div.pure-g
    [:label.pure-u "These movements should be done for: "]]
   [:div.pure-g
    [:div.pure-u [:input {:type "text"
                          :value (get-in @template-state [:parts i :reps])
                          :placeholder "nil"
                          :on-change   #(swap! template-state assoc-in [:parts i :reps] (-> % .-target .-value))}]]
    [:div.pure-u "reps"]]
   [:div.pure-g
    [:div.pure-u [:input {:type "text"
                          :value (get-in @template-state [:parts i :sets])
                          :placeholder "nil"
                          :on-change #(swap! template-state assoc-in [:parts i :sets] (-> % .-target .-value))}]]
    [:div.pure-u "sets"]]
   [:div.pure-g
    [:div.pure-u [:input {:type "text"
                          :value (get-in @template-state [:parts i :distance])
                          :placeholder "nil"
                          :on-change #(swap! template-state assoc-in [:parts i :distance] (-> % .-target .-value))}]]
    [:div.pure-u "meters"]]
   [:div.pure-g
    [:div.pure-u [:input {:type "text"
                          :value (get-in @template-state [:parts i :duration])
                          :placeholder "nil"
                          :on-change #(swap! template-state assoc-in [:parts i :duration] (-> % .-target .-value))}]]
    [:div.pure-u "seconds"]]])

(defn part-creator-component []
