<commit_before><template>
  <aside>
    <select v-model="teamSelected">
      <template v-for="team in teamsAlpha">
      <option v-bind:selected="team.isUser ? 'selected' : null">{{ team.name }}</option>
      </template>
    </select>
    <!--<button v-on:click="" class="button-primary">Start draft!</button>-->

    <table v-for="section in rosters(teamSelected)">
      <tr>
        <th rowspan="2" class="position">{{ section.positionKey }}</th>
        <th rowspan="2">Round</th>
        <th colspan="2">Overall</th>
        <th colspan="2">Position</th>
        <th rowspan="2">Bye</th>
      </tr>
      <tr>
        <th>Rank</th>
        <th>Pick</th>
        <th>Rank</th>
        <th>Pick</th>
      </tr>
      <tr v-for="pick in section.picks" track-by="$index" :class="{ 'empty-row': !pick.player }">
        <template v-if="pick.player">
          <td class="player">{{ (pick.player || {}).name }}</td>
          <td class="round">{{ pick.round }}</td>
          <td class="rank">{{ (pick.player.ranking || {}).overall || 'U' }}</td>
          <td class="pick">{{ pick.pickNumber.overall }}</td>
          <td class="rank">{{ (pick.player.ranking || {}).position || 'U' }}</td>
          <td class="pick">{{ pick.pickNumber.position }}</td>
          <td class="bye">{{ pick.player.nflTeam.bye }}</td>
        </template>
        <template v-else>
          <td class="player"></td>
          <td class="round"></td>
          <td class="rank"></td>
          <td class="pick"></td>
          <td class="rank"></td>
          <td class="pick"></td>
          <td class="bye"></td>
        </template>
      </tr>
    </table>
  </aside>
</template>

<script>
import { getRoster, getTeams } from '../vuex/getters'

export default {
  data () {
    return {
      teamSelected: ''
    }
  },

  computed: {
    teamsAlpha: function () {
      return this.teams.slice(0).sort((a, b) => a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1)
    }
  },

  vuex: {
    getters: {
      rosters: getRoster,
      teams: getTeams
    }
  }
}
</script>

<style scoped>
aside {
  padding: 20px;
}

th {
  font-size: 0.7em;
  padding: 0 10px;
}

th[colspan="2"] {
  border-bottom: none;
  text-align: center;
}

tr:not(:first-child) th {
  font-size: 0.55em;
}

th.position {
  font-size: 1.25em;
}

td {
  padding: 2px 10px;
}

td:first-child {
  padding: 2px 0;
  width: 100%;
}

td.round,
td.rank,
td.bye {
  text-align: right;
}

.empty-row {
  background-color: #bdbdbd;
  border-top: solid #424242 10px;
  height: 1.4em;
  opacity: 0.6;
}
</style><commit_msg>Use filter to sort<commit_after><template>
  <aside>
    <select v-model="teamSelected">
      <template v-for="team in teams | orderBy teamsByAlpha">
      <option v-bind:selected="team.isUser ? 'selected' : null">{{ team.name }}</option>
      </template>
    </select>
    <!--<button v-on:click="" class="button-primary">Start draft!</button>-->

    <table v-for="section in rosters(teamSelected)">
      <tr>
        <th rowspan="2" class="position">{{ section.positionKey }}</th>
        <th rowspan="2">Round</th>
        <th colspan="2">Overall</th>
        <th colspan="2">Position</th>
        <th rowspan="2">Bye</th>
      </tr>
      <tr>
        <th>Rank</th>
        <th>Pick</th>
        <th>Rank</th>
        <th>Pick</th>
      </tr>
      <tr v-for="pick in section.picks" track-by="$index" :class="{ 'empty-row': !pick.player }">
        <template v-if="pick.player">
          <td class="player">{{ (pick.player || {}).name }}</td>
          <td class="round">{{ pick.round }}</td>
          <td class="rank">{{ (pick.player.ranking || {}).overall || 'U' }}</td>
          <td class="pick">{{ pick.pickNumber.overall }}</td>
          <td class="rank">{{ (pick.player.ranking || {}).position || 'U' }}</td>
          <td class="pick">{{ pick.pickNumber.position }}</td>
          <td class="bye">{{ pick.player.nflTeam.bye }}</td>
        </template>
        <template v-else>
          <td class="player"></td>
          <td class="round"></td>
          <td class="rank"></td>
          <td class="pick"></td>
          <td class="rank"></td>
          <td class="pick"></td>
          <td class="bye"></td>
        </template>
      </tr>
    </table>
  </aside>
</template>

<script>
import { getRoster, getTeams } from '../vuex/getters'

export default {
  data () {
    return {
      teamSelected: ''
    }
  },

  methods: {
    teamsByAlpha: function (a, b) {
      return a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1
    }
  },

  vuex: {
    getters: {
      rosters: getRoster,
      teams: getTeams
    }
  }
}
</script>

<style scoped>
aside {
  padding: 20px;
}

th {
  font-size: 0.7em;
  padding: 0 10px;
}

th[colspan="2"] {
  border-bottom: none;
  text-align: center;
}

tr:not(:first-child) th {
  font-size: 0.55em;
}

th.position {
  font-size: 1.25em;
}

td {
  padding: 2px 10px;
}

td:first-child {
  padding: 2px 0;
  width: 100%;
}

td.round,
td.rank,
td.bye {
  text-align: right;
}

.empty-row {
  background-color: #bdbdbd;
  border-top: solid #424242 10px;
  height: 1.4em;
  opacity: 0.6;
}
</style>
{'fraction_non_alphanumeric': 0.21005455962587685, 'fraction_numerical': 0.0161730319563523, 'mean_word_length': 2.333116883116883, 'pattern_counts': {'":': 0, '<': 153, '<?xml version=': 0, '>': 156, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3679797', 'n_tokens_mistral': 1956, 'n_tokens_neox': 1880, 'n_words': 380}