<commit_before><template>
  <div v-if="dataLoaded" class="mdl-shadow--2dp mdl-color--blue-grey-100 mdl-cell mdl-cell--12-col mdl-grid">
    <div class="mdl-cell--2-col mdl-cell--2-col-phone mdl-cell--2-col-tablet mdl-grid">
      <ul class="mdl-list" style="width: 100%;">
        <li class="worldname">
          <router-link :id="'wnGreen' + matchinfo.id + matchinfo.kills.green" v-bind:to="'/match/' + matchinfo.id" class="worldname_link">
            {{worldinfo.green}}
          </router-link>
          <MdlTooltip :target="'wnGreen' + matchinfo.id + matchinfo.kills.green" class="pgTooltipName">
            {{serverTooltip.green}}
          </MdlTooltip>
        </li>
        <li class="worldname">
          <router-link :id="'wnBlue' + matchinfo.id + matchinfo.kills.blue" v-bind:to="'/match/' + matchinfo.id" class="worldname_link">
            {{worldinfo.blue}}
          </router-link>
          <MdlTooltip :target="'wnBlue' + matchinfo.id + matchinfo.kills.blue" class="pgTooltipName">
            {{serverTooltip.blue}}
          </MdlTooltip>
        </li>
        <li class="worldname">
          <router-link :id="'wnRed' + matchinfo.id + matchinfo.kills.red" v-bind:to="'/match/' + matchinfo.id" class="worldname_link">
            {{worldinfo.red}}
          </router-link>
          <MdlTooltip :target="'wnRed' + matchinfo.id + matchinfo.kills.red" class="pgTooltipName">
            {{serverTooltip.red}}
          </MdlTooltip>
        </li>
      </ul>
      <!-- Tooltips for world names -->

    </div>
    <div class="mdl-cell--2-col mdl-cell--1-col-phone mdl-cell--1-col-tablet mdl-grid">
      <ul class="mdl-list" style="width: 100%;">
        <li>
          <div class="first-place" style="padding: 10px;">
            <!--<div v-bind:data-longtooltip =
              "worldinfo.blue + ':' + scoreDiff.green.blue + '\n' + worldinfo.red + ':' + scoreDiff.green.red"
              class="mdl-progress mdl-js-progress">
            </div>-->
            <MdlProgress :id="'pgGreen' + matchinfo.id" v-bind:progress="percentage.green">
            </MdlProgress>

            <MdlTooltip :target="'pgGreen' + matchinfo.id" class="pgTooltip">
              <em>{{worldinfo.blue}}</em> : <span :class="scoreDiff.green.blue.class">{{scoreDiff.green.blue.diff}}</span><br
              />
              <em>{{worldinfo.red}}</em> : <span :class="scoreDiff.green.red.class">{{scoreDiff.green.red.diff}}</span>
            </MdlTooltip>

          </div>
        </li>
        <li>
          <div class="second-place" style="padding: 10px;">

            <MdlProgress :id="'pgBlue' + matchinfo.id" v-bind:progress="percentage.blue">
            </MdlProgress>

            <MdlTooltip :target="'pgBlue' + matchinfo.id" class="pgTooltip">
              <em>{{worldinfo.green}}</em> : <span :class="scoreDiff.blue.green.class">{{scoreDiff.blue.green.diff}}</span><br
              />
              <em>{{worldinfo.red}}</em> : <span :class="scoreDiff.blue.red.class">{{scoreDiff.blue.red.diff}}</span>
            </MdlTooltip>

          </div>
        </li>
        <li>
          <div class="third-place" style="padding: 10px;">

            <MdlProgress :id="'pgRed' + matchinfo.id" v-bind:progress="percentage.red">
            </MdlProgress>

            <MdlTooltip :target="'pgRed' + matchinfo.id" class="pgTooltip">
              <em>{{worldinfo.green}}</em> : <span :class="scoreDiff.red.green.class">{{scoreDiff.red.green.diff}}</span><br
              />
              <em>{{worldinfo.blue}}</em> : <span :class="scoreDiff.red.blue.class">{{scoreDiff.red.blue.diff}}</span>
            </MdlTooltip>

          </div>
        </li>
      </ul>
    </div>
    <div class="mdl-cell--1-col mdl-cell--1-col-phone mdl-cell--1-col-tablet mdl-grid">
      <ul v-if="useSkirmish" class="mdl-list" style="margin:auto;">
        <!-- Skirmish Scores -->
        <li :id="'scGreen' + matchinfo.id + matchinfo.kills.green">{{skirmish.green}}</li>
        <MdlTooltip :target="'scGreen' + matchinfo.id + matchinfo.kills.green" class="pgTooltip">
          {{matchinfo.scores.green}}
        </MdlTooltip>
        <li :id="'scBlue' + matchinfo.id + matchinfo.kills.blue">{{skirmish.blue}}</li>
        <MdlTooltip :target="'scBlue' + matchinfo.id + matchinfo.kills.blue" class="pgTooltip">
          {{matchinfo.scores.blue}}
        </MdlTooltip>
        <li :id="'scRed' + matchinfo.id + matchinfo.kills.red">{{skirmish.red}}</li>
        <MdlTooltip :target="'scRed' + matchinfo.id + matchinfo.kills.red" class="pgTooltip">
          {{matchinfo.scores.red}}
        </MdlTooltip>
      </ul>
      <ul v-else class="mdl-list" style="margin:auto;">
        <!-- Old Scores (total) -->
        <li>{{matchinfo.scores.green}}</li>
        <li>{{matchinfo.scores.blue}}</li>
        <li>{{matchinfo.scores.red}}</li>
      </ul>
    </div>
    <div class="mdl-cell--1-col mdl-cell--1-col-phone mdl-cell--1-col-tablet mdl-grid">
      <ul v-if="matchinfo.victory_points" class="mdl-list" style="margin:auto;">
        <li>{{matchinfo.victory_points.green}}</li>
        <li>{{matchinfo.victory_points.blue}}</li>
        <li>{{matchinfo.victory_points.red}}</li>
      </ul>
      <ul v-else class="mdl-list" style="margin:auto;">
        <li id="mi_vp_1"> N/A </li>
        <MdlTooltip target="mi_vp_1">
          Victory Points not available in custom data range mode.
        </MdlTooltip>
        <li id="mi_vp_2"> N/A </li>
        <MdlTooltip target="mi_vp_2">
          Victory Points not available in custom data range mode.
        </MdlTooltip>
        <li id="mi_vp_3"> N/A </li>
        <MdlTooltip target="mi_vp_3">
          Victory Points not available in custom data range mode.
        </MdlTooltip>
      </ul>
    </div>
    <div class="mdl-cell--1-col mdl-cell--1-col-phone mdl-cell--1-col-tablet mdl-grid">
      <ul class="mdl-list" style="margin:auto;">
        <li>+{{ppt.green}}</li>
        <li>+{{ppt.blue}}</li>
        <li>+{{ppt.red}}</li>
      </ul>
    </div>
    <div class="mdl-cell--3-col mdl-cell--2-col-phone mdl-cell--2-col-tablet mdl-grid">
      <div class="mdl-cell mdl-cell--3-col mdl-cell--1-col-phone mdl-cell--2-col-tablet">
        <ul style="text-align: left; list-style: none;">
          <li>{{objectives.camps.green}}</li>
          <li>{{objectives.camps.blue}}</li>
          <li>{{objectives.camps.red}}</li>
        </ul>
      </div>
      <div class="mdl-cell mdl-cell--3-col mdl-cell--1-col-phone mdl-cell--2-col-tablet">
        <ul style="text-align: left; list-style: none;">
          <li>{{objectives.towers.green}}</li>
          <li>{{objectives.towers.blue}}</li>
          <li>{{objectives.towers.red}}</li>
        </ul>
      </div>
      <div class="mdl-cell mdl-cell--3-col mdl-cell--1-col-phone mdl-cell--2-col-tablet">
        <ul style="text-align: left; list-style: none;">
          <li>{{objectives.keeps.green}}</li>
          <li>{{objectives.keeps.blue}}</li>
          <li>{{objectives.keeps.red}}</li>
        </ul>
      </div>
      <div class="mdl-cell mdl-cell--3-col mdl-cell--1-col-phone mdl-cell--2-col-tablet">
        <ul style="text-align: left; list-style: none;">
          <li>{{objectives.castles.green}}</li>
          <li>{{objectives.castles.blue}}</li>
          <li>{{objectives.castles.red}}</li>
        </ul>
      </div>
    </div>
    <div class="mdl-cell--1-col mdl-grid no-padding-left mdl-cell--hide-phone mdl-cell--hide-tablet">
      <ul class="mdl-list">
        <li>
          {{glicko.green | round(3, true)}}
        </li>
        <li>
          {{glicko.blue | round(3, true)}}
        </li>
        <li>
          {{glicko.red | round(3, true)}}
        </li>
      </ul>
    </div>
    <div class="mdl-cell--1-col mdl-grid mdl-cell--hide-phone mdl-cell--hide-tablet">
      <ul class="mdl-list">
        <li>
          <span v-show="isPositive(glicko.delta.green)" class="glicko glicko-up">
              <!-- <img src="../assets/uparrow.png" width="10" height="10"> -->
              {{glicko.delta.green | round(3, true)}}
            </span>
          <span v-show="!isPositive(glicko.delta.green)" class="glicko glicko-down">
              <!-- <img src="../assets/downarrow.png" width="10" height="10"> -->
              {{glicko.delta.green | round(3, true)}}
            </span>
        </li>
        <li>
          <span v-show="isPositive(glicko.delta.blue)" class="glicko glicko-up">
              <!-- <img src="../assets/uparrow.png" width="10" height="10"> -->
              {{glicko.delta.blue | round(3, true)}}
            </span>
          <span v-show="!isPositive(glicko.delta.blue)" class="glicko glicko-down">
              <!-- <img src="../assets/downarrow.png" width="10" height="10"> -->
              {{glicko.delta.blue | round(3, true)}}
            </span>
        </li>
        <li>
          <span v-show="isPositive(glicko.delta.red)" class="glicko glicko-up">
              <!-- <img src="../assets/uparrow.png" width="10" height="10"> -->
              {{glicko.delta.red | round(3, true)}}
            </span>
          <span v-show="!isPositive(glicko.delta.red)" class="glicko glicko-down">
              <!-- <img src="../assets/downarrow.png" width="10" height="10"> -->
              {{glicko.delta.red | round(3, true)}}
            </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import store from '../store'
  import MdlProgress from './MdlProgress'
  import MdlTooltip from './MdlTooltip'

  export default {

    props: ['matchinfo', 'worldlist', 'predictedglicko', 'useSkirmish'],

    computed: {
      dataLoaded() {<commit_msg>Forgot to remove 'store' import<commit_after><template>
  <div v-if="dataLoaded" class="mdl-shadow--2dp mdl-color--blue-grey-100 mdl-cell mdl-cell--12-col mdl-grid">
    <div class="mdl-cell--2-col mdl-cell--2-col-phone mdl-cell--2-col-tablet mdl-grid">
      <ul class="mdl-list" style="width: 100%;">
        <li class="worldname">
          <router-link :id="'wnGreen' + matchinfo.id + matchinfo.kills.green" v-bind:to="'/match/' + matchinfo.id" class="worldname_link">
            {{worldinfo.green}}
          </router-link>
          <MdlTooltip :target="'wnGreen' + matchinfo.id + matchinfo.kills.green" class="pgTooltipName">
            {{serverTooltip.green}}
          </MdlTooltip>
        </li>
        <li class="worldname">
          <router-link :id="'wnBlue' + matchinfo.id + matchinfo.kills.blue" v-bind:to="'/match/' + matchinfo.id" class="worldname_link">
            {{worldinfo.blue}}
          </router-link>
          <MdlTooltip :target="'wnBlue' + matchinfo.id + matchinfo.kills.blue" class="pgTooltipName">
            {{serverTooltip.blue}}
          </MdlTooltip>
        </li>
        <li class="worldname">
          <router-link :id="'wnRed' + matchinfo.id + matchinfo.kills.red" v-bind:to="'/match/' + matchinfo.id" class="worldname_link">
            {{worldinfo.red}}
          </router-link>
          <MdlTooltip :target="'wnRed' + matchinfo.id + matchinfo.kills.red" class="pgTooltipName">
            {{serverTooltip.red}}
          </MdlTooltip>
        </li>
      </ul>
      <!-- Tooltips for world names -->

    </div>
    <div class="mdl-cell--2-col mdl-cell--1-col-phone mdl-cell--1-col-tablet mdl-grid">
      <ul class="mdl-list" style="width: 100%;">
        <li>
          <div class="first-place" style="padding: 10px;">
            <!--<div v-bind:data-longtooltip =
              "worldinfo.blue + ':' + scoreDiff.green.blue + '\n' + worldinfo.red + ':' + scoreDiff.green.red"
              class="mdl-progress mdl-js-progress">
            </div>-->
            <MdlProgress :id="'pgGreen' + matchinfo.id" v-bind:progress="percentage.green">
            </MdlProgress>

            <MdlTooltip :target="'pgGreen' + matchinfo.id" class="pgTooltip">
              <em>{{worldinfo.blue}}</em> : <span :class="scoreDiff.green.blue.class">{{scoreDiff.green.blue.diff}}</span><br
              />
              <em>{{worldinfo.red}}</em> : <span :class="scoreDiff.green.red.class">{{scoreDiff.green.red.diff}}</span>
            </MdlTooltip>

          </div>
        </li>
        <li>
          <div class="second-place" style="padding: 10px;">

            <MdlProgress :id="'pgBlue' + matchinfo.id" v-bind:progress="percentage.blue">
            </MdlProgress>

            <MdlTooltip :target="'pgBlue' + matchinfo.id" class="pgTooltip">
              <em>{{worldinfo.green}}</em> : <span :class="scoreDiff.blue.green.class">{{scoreDiff.blue.green.diff}}</span><br
              />
              <em>{{worldinfo.red}}</em> : <span :class="scoreDiff.blue.red.class">{{scoreDiff.blue.red.diff}}</span>
            </MdlTooltip>

          </div>
        </li>
        <li>
          <div class="third-place" style="padding: 10px;">

            <MdlProgress :id="'pgRed' + matchinfo.id" v-bind:progress="percentage.red">
            </MdlProgress>

            <MdlTooltip :target="'pgRed' + matchinfo.id" class="pgTooltip">
              <em>{{worldinfo.green}}</em> : <span :class="scoreDiff.red.green.class">{{scoreDiff.red.green.diff}}</span><br
              />
              <em>{{worldinfo.blue}}</em> : <span :class="scoreDiff.red.blue.class">{{scoreDiff.red.blue.diff}}</span>
            </MdlTooltip>

          </div>
        </li>
      </ul>
    </div>
    <div class="mdl-cell--1-col mdl-cell--1-col-phone mdl-cell--1-col-tablet mdl-grid">
      <ul v-if="useSkirmish" class="mdl-list" style="margin:auto;">
        <!-- Skirmish Scores -->
        <li :id="'scGreen' + matchinfo.id + matchinfo.kills.green">{{skirmish.green}}</li>
        <MdlTooltip :target="'scGreen' + matchinfo.id + matchinfo.kills.green" class="pgTooltip">
          {{matchinfo.scores.green}}
        </MdlTooltip>
        <li :id="'scBlue' + matchinfo.id + matchinfo.kills.blue">{{skirmish.blue}}</li>
        <MdlTooltip :target="'scBlue' + matchinfo.id + matchinfo.kills.blue" class="pgTooltip">
          {{matchinfo.scores.blue}}
        </MdlTooltip>
        <li :id="'scRed' + matchinfo.id + matchinfo.kills.red">{{skirmish.red}}</li>
        <MdlTooltip :target="'scRed' + matchinfo.id + matchinfo.kills.red" class="pgTooltip">
          {{matchinfo.scores.red}}
        </MdlTooltip>
      </ul>
      <ul v-else class="mdl-list" style="margin:auto;">
        <!-- Old Scores (total) -->
        <li>{{matchinfo.scores.green}}</li>
        <li>{{matchinfo.scores.blue}}</li>
        <li>{{matchinfo.scores.red}}</li>
      </ul>
    </div>
    <div class="mdl-cell--1-col mdl-cell--1-col-phone mdl-cell--1-col-tablet mdl-grid">
      <ul v-if="matchinfo.victory_points" class="mdl-list" style="margin:auto;">
        <li>{{matchinfo.victory_points.green}}</li>
        <li>{{matchinfo.victory_points.blue}}</li>
        <li>{{matchinfo.victory_points.red}}</li>
      </ul>
      <ul v-else class="mdl-list" style="margin:auto;">
        <li id="mi_vp_1"> N/A </li>
        <MdlTooltip target="mi_vp_1">
          Victory Points not available in custom data range mode.
        </MdlTooltip>
        <li id="mi_vp_2"> N/A </li>
        <MdlTooltip target="mi_vp_2">
          Victory Points not available in custom data range mode.
        </MdlTooltip>
        <li id="mi_vp_3"> N/A </li>
        <MdlTooltip target="mi_vp_3">
          Victory Points not available in custom data range mode.
        </MdlTooltip>
      </ul>
    </div>
    <div class="mdl-cell--1-col mdl-cell--1-col-phone mdl-cell--1-col-tablet mdl-grid">
      <ul class="mdl-list" style="margin:auto;">
        <li>+{{ppt.green}}</li>
        <li>+{{ppt.blue}}</li>
        <li>+{{ppt.red}}</li>
      </ul>
    </div>
    <div class="mdl-cell--3-col mdl-cell--2-col-phone mdl-cell--2-col-tablet mdl-grid">
      <div class="mdl-cell mdl-cell--3-col mdl-cell--1-col-phone mdl-cell--2-col-tablet">
        <ul style="text-align: left; list-style: none;">
          <li>{{objectives.camps.green}}</li>
          <li>{{objectives.camps.blue}}</li>
          <li>{{objectives.camps.red}}</li>
        </ul>
      </div>
      <div class="mdl-cell mdl-cell--3-col mdl-cell--1-col-phone mdl-cell--2-col-tablet">
        <ul style="text-align: left; list-style: none;">
          <li>{{objectives.towers.green}}</li>
          <li>{{objectives.towers.blue}}</li>
          <li>{{objectives.towers.red}}</li>
        </ul>
      </div>
      <div class="mdl-cell mdl-cell--3-col mdl-cell--1-col-phone mdl-cell--2-col-tablet">
        <ul style="text-align: left; list-style: none;">
          <li>{{objectives.keeps.green}}</li>
          <li>{{objectives.keeps.blue}}</li>
          <li>{{objectives.keeps.red}}</li>
        </ul>
      </div>
      <div class="mdl-cell mdl-cell--3-col mdl-cell--1-col-phone mdl-cell--2-col-tablet">
        <ul style="text-align: left; list-style: none;">
          <li>{{objectives.castles.green}}</li>
          <li>{{objectives.castles.blue}}</li>
          <li>{{objectives.castles.red}}</li>
        </ul>
      </div>
    </div>
    <div class="mdl-cell--1-col mdl-grid no-padding-left mdl-cell--hide-phone mdl-cell--hide-tablet">
      <ul class="mdl-list">
        <li>
          {{glicko.green | round(3, true)}}
        </li>
        <li>
          {{glicko.blue | round(3, true)}}
        </li>
        <li>
          {{glicko.red | round(3, true)}}
        </li>
      </ul>
    </div>
    <div class="mdl-cell--1-col mdl-grid mdl-cell--hide-phone mdl-cell--hide-tablet">
      <ul class="mdl-list">
        <li>
          <span v-show="isPositive(glicko.delta.green)" class="glicko glicko-up">
              <!-- <img src="../assets/uparrow.png" width="10" height="10"> -->
              {{glicko.delta.green | round(3, true)}}
            </span>
          <span v-show="!isPositive(glicko.delta.green)" class="glicko glicko-down">
              <!-- <img src="../assets/downarrow.png" width="10" height="10"> -->
              {{glicko.delta.green | round(3, true)}}
            </span>
        </li>
        <li>
          <span v-show="isPositive(glicko.delta.blue)" class="glicko glicko-up">
              <!-- <img src="../assets/uparrow.png" width="10" height="10"> -->
              {{glicko.delta.blue | round(3, true)}}
            </span>
          <span v-show="!isPositive(glicko.delta.blue)" class="glicko glicko-down">
              <!-- <img src="../assets/downarrow.png" width="10" height="10"> -->
              {{glicko.delta.blue | round(3, true)}}
            </span>
        </li>
        <li>
          <span v-show="isPositive(glicko.delta.red)" class="glicko glicko-up">
              <!-- <img src="../assets/uparrow.png" width="10" height="10"> -->
              {{glicko.delta.red | round(3, true)}}
            </span>
          <span v-show="!isPositive(glicko.delta.red)" class="glicko glicko-down">
              <!-- <img src="../assets/downarrow.png" width="10" height="10"> -->
              {{glicko.delta.red | round(3, true)}}
            </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import MdlProgress from './MdlProgress'
  import MdlTooltip from './MdlTooltip'

  export default {

    props: ['matchinfo', 'worldlist', 'predictedglicko', 'useSkirmish'],

    computed: {
      dataLoaded() {
{'fraction_non_alphanumeric': 0.20093385214007783, 'fraction_numerical': 0.009234760051880675, 'mean_word_length': 2.163111256974073, 'pattern_counts': {'":': 0, '<': 467, '<?xml version=': 0, '>': 467, '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': '6063359', 'n_tokens_mistral': 6855, 'n_tokens_neox': 6617, 'n_words': 1018}