 SelectDropdown     = require('./select-dropdown')
 ReactSlider        = require('react-slider')
 API                = require('../lib/api')
+
+
+sort_first_pages_json = (a, b) ->
+  (2 * a['retired_from_mark'] + a['retired_from_transcribe']) -
+  (2 * b['retired_from_mark'] + b['retired_from_transcribe'])
 
 GroupPage = React.createClass
   displayName: "GroupPage"

                </div>

                <div className="collection-range-slider">
                  <ReactSlider 
                    onAfterChange={@updateYearSliderState}
                    ref="ReactYearSlider"
                    min={@state.min_year} 
                    max={@state.max_year} 
                    value={[@state.start_year, @state.end_year]} withBars />
                </div>
                
                <div className="custom-select collection-institution">
                  <SelectDropdown options_array={@state.all_institutions} 
                                  placeholder={@state.placeholder_institution}
                                  value={@state.selected_institution}
                                  onSelect={@updateSelectedInstitution} />
                </div>

                <div className="custom-select collection-playwright">
                  <SelectDropdown options_array={@state.all_playwrights} 
                                  placeholder={@state.placeholder_playwright}
                                  value={@state.selected_playwright}
                                  onSelect={@updateSelectedPlaywright} />

            </div>

            <div className="collection-progressbar-container">
              <div className="collection-progressbar"
                   aria-valuenow={parseInt((@state.group.stats?.completeness ? 0) * 100)}
                   aria-valuemin="0" aria-valuemax="100"
                   style={{width: parseInt((@state.group.stats?.completeness ? 0) * 100) + "%"}}></div>
