 (defn now-playing []
   (let [track (@app-state :now-playing)]
     [:p#player-track
-      [:i.fa.fa-music]
-      [:span (if track
-               (str (:artist track) " - " (:title track))
-               [:em "Nothing is playing."])]]))
+     [:i.fa.fa-music]
+     [:span (if track
+              (str (:artist track) " - " (:title track))
+              [:em "Nothing is playing."])]]))
 
 (defn player-section []
   (let [audio-ref (r/atom nil)]
     (fn []
       (when-let [url (get-in @app-state [:info :stream_url])]
         [:section#player
-          [:audio {:ref #(reset! audio-ref %)}
-                  [:source {:src url}]]
+         [:audio {:ref #(reset! audio-ref %)}
+          [:source {:src url}]]
 
-          [:div#player-controls.pure-button-group
-            {:role "group"}
-            (when-let [audio @audio-ref]
-              (if (.-paused audio)
-                [:button.pure-button.pure-button-primary
-                  {:on-click #(.play audio)}
-                  [:i.fa.fa-play] "Play"]
-                [:button.pure-button.pure-button-primary.pure-button-active
-                  {:on-click #(.pause audio)}
-                  [:i.fa.fa-pause] "Pause"]))
+         [:div#player-controls.pure-button-group
+          {:role "group"}
+          (when-let [audio @audio-ref]
+            (if (.-paused audio)
+              [:button.pure-button.pure-button-primary
+               {:on-click #(.play audio)}
+               [:i.fa.fa-play] "Play"]
+              [:button.pure-button.pure-button-primary.pure-button-active
+               {:on-click #(.pause audio)}
+               [:i.fa.fa-pause] "Pause"]))
 
-            [:a.pure-button {:href url :target "_blank"}
-                            [:i.fa.fa-external-link]
-                            "Open stream"]]
+          [:a.pure-button {:href url :target "_blank"}
+           [:i.fa.fa-external-link]
+           "Open stream"]]
 
-          [now-playing]]))))
+         [now-playing]]))))
 
 ;; -------------------------
 ;; Upload


(defn sorting-th [field caption]
  [:th {:on-click #(update-sort-field! field)}
       caption
       [:span.sorting-arrow (when (= field (@app-state :sort-field))
                              (if (@app-state :ascending)
                                " ▲"
                                " ▼"))]])

(defn library-section []
  (let [tracks (@app-state :library)]
    [:section#library
      [:h2 "Library"]
      [:form#library-search.pure-form
        [:input {:type "text"
                :id "query"
                :placeholder "Search through the library..."
                :value (@app-state :query)
                :on-change on-query-change}]
        [:span (str "Tracks: " (count tracks))]]
      [:table.pure-table.pure-table-striped
        [:thead
          [:tr [:th]
               [sorting-th :title "Title"]
               [sorting-th :artist "Artist"]
               [sorting-th :album "Album"]]]
        [:tbody (for [track (sort-tracks tracks)]
                  ^{:key track} [track-tr track playlist-add-button])]]]))

;; -------------------------
;; Main

(defn page-component []
  [:main.pure-g
    [:div.pure-u-1.pure-u-md-1-2
      [header]
      [player-section]
      [upload-section]
      [playlist-section]]
    [:div.pure-u-1.pure-u-md-1-2
      [library-section]]])


(defn header []
  (let [cursor  (r/cursor app-state [:info])
        title   (@cursor :name)
        message (@cursor :greet_message)]
    [:header
     [:h1 title]
     [:p message]]))

;; -------------------------
;; Player
