content: import React from 'react';
  import { Link } from 'react-router';
  import { Pagination } from 'react-bootstrap';
  import { Loading } from '/imports/ui/components/loading.js';
  import Blaze from 'meteor/gadicc:blaze-react-component';
  import '/imports/ui/templates/sa-details.html'
  
  export const SaCollections = React.createClass({ 
    getInitialState() { 
      return { activePage: 1, range: 15 };
     },
  
    propTypes: { 
      loading: React.PropTypes.bool,
      saDetails: React.PropTypes.array
     },
  
    handleSelect(eventKey) { 
      this.setState({ activePage: eventKey });
     },
  
    detailsFiltered(details) { 
      if (details.length > 0) { 
        var output = [];
        var startIndex = (this.state.activePage * this.state.range) - this.state.range;
        for (var index = 0; index < this.state.range; index++) { 
          var element = details[startIndex];
          if (element !== undefined) { 
            output.push(element);
           }
          startIndex++;
         }
        return output;
       }
     },
  
    pagesNo(arrayLength) { 
      return Math.ceil(arrayLength / this.state.range);
     },
  
    top() { 
      return 90 + '%';
     },
  
    render() { 
      if (this.props.loading) { 
        return <div className="middle">
          <Loading/>
        </div>
       } else { 
        return (
          <span>
            <Blaze template="sa-details" saDetails={ this.detailsFiltered(this.props.saDetails) }/>
            <div className="sPagination">
              <Pagination prev next first last ellipsis boundaryLinks items={ this.pagesNo(this.props.saDetails.length) } maxButtons={ 9 } activePage={ this.state.activePage } onSelect={ this.handleSelect }/>
            </div>
          </span>
        );
       }
     }
   });
  