<!-- Works with Liveblog 3.4 -->

<div class="statPerc">

  <div class="statPerc__itemWrap colorWrap">

    <div class="statPerc__item">
      <label hide-render="">Home color</label>
      <input class="statPerc__colorPickerValue1"  placeholder="Home color"  name="$stat.color1">
    </div>

    <div class="statPerc__item">
      <label hide-render="">Away color</label>
      <input class="statPerc__colorPickerValue2"  placeholder="Away color"  name="$stat.color2">
    </div>

  </div>

  <div class="statPerc__itemWrap">

    <div class="statPerc__name statPerc__item">
    <div class="statPerc__nameInput">
      <label class="legend--padding-top" for="stat.name1" hide-render="">Statistic name</label>
      <input class="statPerc__nameText" placeholder="Statistic name" name="$stat.name1">
    </div>
    <div class="statPerc__nameIcon">
      <label class="legend--padding-top" for="stat.img1" hide-render="">Statistic icon</label>
      <input image="$stat.img1"/>
    </div>
  </div>
      <div class="statPerc__item statPerc__result statPerc__result--home statPerc__result--perc">
          <div class="statPerc__resultWrap">
              <div class="statPerc__resultBarWrap">
                  <div class="statPerc__resultBar statPerc__resultBar--perc home" style="width: 0%; background-color: @stat.color1"></div>
              </div>
              <label class="legend--padding-top" for="stat.score1" hide-render="">Home result (e.g. 72%)</label>
              <input class="statPerc__resultScore statPerc__resultScore--perc"  placeholder="Home result"  name="$stat.score1">
          </div>
      </div>
      <div class="statPerc__item statPerc__result statPerc__result--away statPerc__result--perc">
          <div class="statPerc__resultWrap">
              <div class="statPerc__resultBarWrap">
                  <div class="statPerc__resultBar statPerc__resultBar--perc away" style="width: 0%; background-color: @stat.color2"></div>
              </div>
              <label class="legend--padding-top" for="stat.score2" hide-render="">Away result (e.g. 28%)</label>
              <input class="statPerc__resultScore statPerc__resultScore--perc"  placeholder="Home result"  name="$stat.score2">
          </div>
      </div>
  </div>

  <div class="statPerc__itemWrap statPerc__itemWrap--number">
    <div class="statPerc__name statPerc__item">
    <div class="statPerc__nameInput">
      <label class="legend--padding-top" for="stat.name2" hide-render="">Statistic name</label>
      <input class="statPerc__nameText" placeholder="Statistic name" name="$stat.name2">
    </div>
    <div class="statPerc__nameIcon">
      <label class="legend--padding-top" for="stat.img2" hide-render="">Statistic icon</label>
      <input image="$stat.img2"/>
    </div>
  </div>
      <div class="statPerc__item statPerc__result statPerc__result--home">
          <div class="statPerc__resultWrap statPerc__resultWrap--number">
              <div class="statPerc__resultBarWrap">
                  <div class="statPerc__resultBar statPerc__resultBar1 home" style="width: 0%; background-color: @stat.color1"></div>
              </div>
              <label class="legend--padding-top" for="stat.score3" hide-render="">Home result (e.g. 2)</label>
              <input class="statPerc__resultScore statPerc__resultScore1"  placeholder="Home result"  name="$stat.score3">
          </div>
      </div>
      <div class="statPerc__item statPerc__result statPerc__result--away">
          <div class="statPerc__resultWrap statPerc__resultWrap--number">
              <div class="statPerc__resultBarWrap">
                  <div class="statPerc__resultBar statPerc__resultBar2 away" style="width: 0%; background-color: @stat.color2"></div>
              </div>
              <label class="legend--padding-top" for="stat.score4" hide-render="">Away result (e.g. 1)</label>
              <input class="statPerc__resultScore statPerc__resultScore2"  placeholder="Home result"  name="$stat.score4">
          </div>
      </div>
  </div>
</div>


<style type="text/css">
.statPerc {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.statPerc .statPerc__itemWrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
}
.editor-holder .statPerc .statPerc__itemWrap {
  flex-wrap: wrap;
}
.statPerc .colorWrap {
  display: none;
}
.editor-holder .statPerc .colorWrap {
  display: flex;
}
.statPerc .statPerc__item {
  flex: 0 1 170px;
  max-width: 50%;
  text-align: center;
  box-sizing: border-box;
}
.editor-holder .statPerc .statPerc__item {
  flex: 0 1 48%;
  text-align: left;
}

.statPerc .statPerc__result--home {
  order: 0;
}
.statPerc .statPerc__result--away {
  order: 2;
}
.statPerc .statPerc__resultBarWrap {
  position: relative;
  display: block;
  margin: 10px 0px;
  background: #e9e9e9;
  width: 100%;
  height: 10px;
}
.editor-holder .statPerc .statPerc__resultBarWrap {
  display: none;
}
.statPerc .statPerc__resultBar {
  height: 10px;
  display: block;
  width: 0%;
  background: #66cfa0;
  transition: width 1s;
}
.statPerc .statPerc__colorPicker {
  display: none;
}
.editor-holder .statPerc .statPerc__colorPicker {
  display: block;
}
.statPerc .statPerc__name {
  flex: 0 1 33%;
  max-width: 33%;
  order: 1;
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0px 10px;
}
.editor-holder .statPerc .statPerc__name {
  flex: 0 0 100%;
  max-width: 100%;
  order: 0;
  padding: 0px;
}
.statPerc .statPerc__nameInput {
  flex: 0 0 100%;
  order: 1;
}
.editor-holder .statPerc .statPerc__nameInput {
  order: 0;
  margin-bottom: 10px;
}
.statPerc .statPerc__nameIcon {
  flex: 1 1 auto;
}
.editor-holder .statPerc__nameIcon {
  flex: 0 0 auto;
  margin-bottom: 10px;
}
.statPerc .statPerc__nameIcon img {
  max-height: 30px;
  width: auto !important;
}

.editor-holder .statPerc .statPerc__nameIcon img {
  max-width: 40px;
  margin: 0 auto 10px auto;
  display: block;
}
</style>
<script type="text/javascript">

// checking if function already exists
if (typeof statPerc_init != 'function') {
  function statPerc_init() {

      document.querySelectorAll('.statPerc__result--perc').forEach(function(item, i) {
          var value = item.querySelectorAll('.statPerc__resultScore--perc')[0].innerHTML;

          item.querySelectorAll('.statPerc__resultBar--perc')[0].style.width = value;

      });

      document.querySelectorAll('.statPerc__itemWrap--number').forEach(function(item, i) {

      var number1 = parseInt(item.querySelectorAll('.statPerc__resultScore1')[0].innerHTML),
      number2 = parseInt(item.querySelectorAll('.statPerc__resultScore2')[0].innerHTML);

      var actual2 = (number2 * 100)/(number2+number1);
      var actual1 = 100 - actual2;

      item.querySelectorAll('.statPerc__resultBar1')[0].style.width = actual1 + '%';
      item.querySelectorAll('.statPerc__resultBar2')[0].style.width = actual2 + '%';
    });
  };
}

if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
  setTimeout(statPerc_init, 500);
} else {
  document.addEventListener('DOMContentLoaded', function(){
    setTimeout(statPerc_init, 500);
  });
}


</script>