         <div>TODO: List subjects without a manifest</div>
       else
         <div className="manifests-and-subjects">
-          <div className="manifests-list">
-            Manifests
-            <br />
-            {for name, {subjects, errors} of @state.manifests
-              <div key={name} className="manifest">
-                <strong>{name}</strong> ({subjects.length})
-                {for {row, message} in errors
-                  <div key={row + message} className="form-help error">Error on row {row}: {message}</div>}
-              </div>}
-          </div>
+          Manifests
           <br />
-
-          <div className="subjects-list">
-            Subjects
-            <br />
-            {for name, {subjects} of @state.manifests
-              for {locations, metadata} in subjects
-                <div key={locations.join()} className="subject">
-                  {for file in locations
-                    <div key={file} className="location">
-                      {if file of @state.files
-                        <i className="fa fa-check-circle-o fa-fw"></i>
-                      else
-                        <i className="fa fa-exclamation-circle fa-fw"></i>}
-                      <strong>{locations.join ';'}</strong>
-                    </div>}
-                   <div className="metadata">{JSON.stringify metadata}</div>
-                </div>}
-          </div>
+          <ul>
+            {for name, {errors, subjects} of @state.manifests
+              <li key={name}><ManifestView name={name} errors={errors} subjects={subjects} files={@state.files} /></li>}
+          </ul>
         </div>}
     </div>
 

  handleFileSelection: (e) ->
    @props.onSelect e.target.files

EditSubjectSetPage = React.createClass
  displayName: 'EditSubjectSetPage'


  getDefaultProps: ->
    accept: 'text/plain'
    multiple: false
    onSelect: NOOP

  getInitialState: ->
    dragEntered: false
