<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../shared/person-summary.html">

<dom-module id="people-pane">
  <style>
    :host {
      background-color: #f9f9f9;
      border-top: 1px solid #e0e0e0;
      display: block;
      float: left;
      width: 25%;
      height: 100%;
    }
  </style>
  <template>
    <template is="dom-repeat" items="[[activeProjectPeople]]" as="person">
      <person-summary class$="{{isActivePerson(index, activePerson)}}" on-click="activatePerson" person="[[person]]"></person-summary>
    </template>
  </template>
  <script>
  (function() {
    Polymer({
      is: 'people-pane',
      isActivePerson: function(idx, activeIndex) {
        return idx === activeIndex ? 'active' : '';
      },
      activatePerson: function(e) {
        page('/projects/' + app.params.project_id + '/people/' + e.model.person.id);
        this.notifyPath('activePerson', this.getActivePerson(this.activeProjectPeople));
      },
      getActivePerson: function(people) {
        if (_.keys(app.params).length) {
          var i = people.map(function(p) {
            return p.id;
          }).indexOf(app.params.person_id);
        }

        return i !== -1 ? i : 0;
      },
      properties: {
        activeProjectPeople: {
          type: Array,
        },
        activePerson: {
          type: Number,
          computed: 'getActivePerson(activeProjectPeople)'
        }
      }
    });
  })();
  </script>
</dom-module>

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../shared/person-summary.html">

<dom-module id="people-pane">
  <style>
    :host {
      background-color: #f9f9f9;
      border-top: 1px solid #e0e0e0;
      display: block;
      float: left;
      width: 25%;
      height: 100%;
    }
  </style>
  <template>
    <template is="dom-repeat" items="[[activeProjectPeople]]" as="person">
      <person-summary class$="{{isActivePerson(index, panelState.activePerson)}}" on-click="activatePerson" person="[[person]]"></person-summary>
    </template>
  </template>
  <script>
  (function() {
    Polymer({
      is: 'people-pane',
      isActivePerson: function(idx, activeIndex) {
        return idx === activeIndex ? 'active' : '';
      },
      activatePerson: function(e) {
        page('/projects/' + app.params.project_id + '/people/' + e.model.person.id);

        this.panelState.activePerson = e.model.index;
        this.notifyPath('panelState.activePerson', this.panelState.activePerson);
      },
      properties: {
        activeProjectPeople: {
          type: Array,
        },
        panelState: {
          type: Object,
          notify: true
        }
      }
    });
  })();
  </script>
</dom-module>

Use panel state for active person
Use panel state for active person
