 
   render: ->
     glyph = <Glyphicon glyph="search"/>
-    <Input type='text' className="form-control"
-      ref="filter"
-      label="Search"
-      addonBefore={glyph}
-      onChange={@onChange}
-      value={@state.filter}/>
+    <Panel>
+      <Col xs={12}>
+        Search
+        <Input type='text' className="form-control"
+          ref="filter"
+          addonBefore={glyph}
+          onChange={@onChange}
+          value={@state.filter}/>
+      </Col>
+      <Col xs={12}>
+        <SortableButton name="score" onSortChange={@props.onSortChange}/>
+        <SortableButton name="name" onSortChange={@props.onSortChange}/>
+        <SortableButton name="category" onSortChange={@props.onSortChange}/>
+      </Col>
+    </Panel>
+
+ProblemClassifier = React.createClass
+  render: ->
+    <div/>
 
 Problem = React.createClass
   getInitialState: ->

      </pre>
    </Panel>

ProblemTab = React.createClass
  propTypes:
    problems: React.PropTypes.array.isRequired

  getInitialState: ->
    filterRegex: /.*/

  onFilterChange: (filter) ->
    try

    catch
      # We shouldn't do anything.

  onSortChange: (name, ascending) ->
    @setState update @state,
      activeSort: $set: {name: name, ascending: ascending}

  filterProblems: (problems) ->
    visibleProblems = _.filter problems, ((problem) ->
      @state.filterRegex.exec problem.name
    ).bind this

    sortedProblems = _.sortBy visibleProblems, @state.activeSort.name
    if @state.activeSort.ascending
      sortedProblems
    else
      sortedProblems.reverse()

  render: ->
    <Row className="pad">
      <Col xs={3} md={3}>
        <Row>
          <ProblemFilter onSortChange={@onSortChange} filter="" onFilterChange={@onFilterChange}/>
        </Row>
        <Row>
          <ProblemClassifier/>
        </Row>
      </Col>
      <Col xs={9} md={9}>
        <ProblemList problems={@filterProblems(@props.problems)}/>
      </Col>
    </Row>
