<div class="block-wrapper salary-step" data-share-element="salario_media" data-anchor="#salario_media">
  <a id="salario_media"></a>
  <div class="block-container">
    <div class="block-header">
      <div class="icon icon-talk-bubble"></div>
      <h2><?php echo $templateData->section_3_title; ?></h2>
      <h3><?php echo $templateData->section_3_description; ?></h3>
      <?php echo $__env->make('frontend.partials.reusables.social', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
      <div class="icon icon-money-guy"></div>
      <div class="line"></div>
      <p><?php echo $templateData->section_3_subtitle; ?></p>
    </div>
    <div class="block-body js-categories">
      <div class="category-element">
        <div class="category-image">
          <div class="image-circle-container">
            <div class="icon icon-stacked-coins"></div>
          </div>
        </div>
        <div class="category-content">
          <div class="category-block input-content">
            <p>Salário <br>mensal líquido</p>
            <div class="input-with-elem">
              <input class="js-salary-input-step" max-length="10" data-mask="#.##0,00"  data-mask-reverse="true" type="text" name="rendimento_mensal_liquido">
              <span>€</span>
            </div>
          </div>
          <div class="category-block result-content">
            <div class="js-arrows-container arrows-container">
              <img class="js-up up" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-up.svg" alt="money">
              <img class="js-down down" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-down.svg" alt="money">
              <img class="js-inactive inactive visible" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-inactive.svg" alt="money">
            </div>
            <p class="info">ganha <span class="js-text-result">menos</span> do que a média</p>
            <p class="value js-value-color">
              <span class="js-salary-val-step">-</span><span class="euro">€</span>
            </p>
            <div class="average">
              <p>Média</p>
              <p><span class="js-average-salary-val">910</span>€</p>
            </div>
          </div>
        </div>
      </div>
      <div class="category-element">
        <div class="category-image">
          <div class="image-circle-container">
            <div class="icon icon-gender-symbols"></div>
          </div>
        </div>
        <div class="category-content">
          <div class="category-block input-content">
            <p>sexo</p>
            <div class="select2-container">
              <select disabled="true" class="js-select2 js-salary-step-calculation" data-index="2" style="width: 100%">
                <option></option>
                <option value="0">Mulher</option>
                <option value="1">Homem</option>
              </select>
            </div>
          </div>
          <div class="category-block result-content">
            <div class="js-arrows-container arrows-container">
              <img class="js-up up" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-up.svg" alt="money">
              <img class="js-down down" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-down.svg" alt="money">
              <img class="js-inactive inactive visible" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-inactive.svg" alt="money">
            </div>
            <p class="info">ganha  <span class="js-text-result">menos</span> do que a média <span class="js-gender-result">das mulheres</span></p>
            <p class="value js-value-color">
              <span class="js-salary-val-step">-</span><span class="euro">€</span>
            </p>
            <div class="average">
              <p>Média</p>
              <p><span class="js-gender-salary-average">-</span>€</p>
            </div>
          </div>
        </div>
      </div>
      <div class="category-element">
        <div class="category-image">
          <div class="image-circle-container">
            <div class="icon icon-man"></div>
          </div>
        </div>
        <div class="category-content">
          <div class="category-block input-content">
            <p>idade</p>
            <div class="select2-container">
              <select disabled="true" class="js-select2 js-salary-step-calculation" data-index="3" style="width: 100%">
                <option></option>
                <option value="0"><=24</option>
                <option value="1">25 - 34</option>
                <option value="2">35 - 44</option>
                <option value="3">45 - 54</option>
                <option value="4">55 - 64</option>
                <option value="5"> >= 65</option>
              </select>
            </div>
          </div>
          <div class="category-block result-content">
            <div class="js-arrows-container arrows-container">
              <img class="js-up up" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-up.svg" alt="money">
              <img class="js-down down" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-down.svg" alt="money">
              <img class="js-inactive inactive visible" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-inactive.svg" alt="money">
            </div>
            <p class="info">ganha <span class="js-text-result">menos</span> do que a média com <span class="js-age-result">35-44</span> anos</p>
            <p class="value js-value-color">
              <span class="js-salary-val-step">-</span><span class="euro">€</span>
            </p>
            <div class="average">
              <p>Média</p>
              <p><span class="js-age-salary-average">-</span>€</p>
            </div>
          </div>
        </div>
      </div>
      <div class="category-element">
        <div class="category-image">
          <div class="image-circle-container">
            <div class="icon icon-academic-hat2"></div>
          </div>
        </div>
        <div class="category-content">
          <div class="category-block input-content">
            <p>Nível de escolaridade</p>
            <div class="select2-container">
              <select disabled="true" class="js-select2 js-salary-step-calculation" data-index="4" style="width: 100%">
                <option></option>
                <option value="0">1º e 2º ciclo</option>
                <option value="1">3º ciclo</option>
                <option value="2">Secundário e Curso Médio</option>
                <option value="3">Ensino Superior</option>
              </select>
            </div>
          </div>
          <div class="category-block result-content">
            <div class="js-arrows-container arrows-container">
              <img class="js-up up" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-up.svg" alt="money">
              <img class="js-down down" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-down.svg" alt="money">
              <img class="js-inactive inactive visible" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-inactive.svg" alt="money">
            </div>
            <p class="info">ganha <span class="js-text-result">menos</span> do que a média <span class="js-graduation-result">com ensino superior</span></p>
            <p class="value js-value-color">
              <span class="js-salary-val-step">-</span><span class="euro">€</span>
            </p>
            <div class="average">
              <p>Média</p>
              <p><span  class="js-graduation-salary-average">-</span>€</p>
            </div>
          </div>
        </div>
      </div>
      <div class="category-element">
        <div class="category-image">
          <div class="image-circle-container">
            <div class="icon icon-document"></div>
          </div>
        </div>
        <div class="category-content">
          <div class="category-block input-content">
            <p>Tipo de contrato <br> de trabalho</p>
            <div class="select2-container">
              <select disabled="true" class="js-select2 js-salary-step-calculation" data-index="5" style="width: 100%">
                <option></option>
                <option value="0">sem termo</option>
                <option value="1">a prazo</option>
              </select>
            </div>
          </div>
          <div class="category-block result-content">
            <div class="js-arrows-container arrows-container">
              <img class="js-up up" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-up.svg" alt="money">
              <img class="js-down down" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-down.svg" alt="money">
              <img class="js-inactive inactive visible" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-inactive.svg" alt="money">
            </div>
            <p class="info">ganha <span class="js-text-result">menos</span> do que a média com contrato <span class="js-contract-type-result">sem termo</span></p>
            <p class="value js-value-color">
              <span class="js-salary-val-step">-</span><span class="euro">€</span>
            </p>
            <div class="average">
              <p>Média</p>
              <p><span class="js-contract-type-average">-</span>€</p>
            </div>
          </div>
        </div>
      </div>
      <div class="category-element">
        <div class="category-image">
          <div class="image-circle-container">
            <div class="icon icon-clock"></div>
          </div>
        </div>
        <div class="category-content">
          <div class="category-block input-content">
            <p>Tipo de horário</p>
            <div class="select2-container">
              <select disabled="true" class="js-select2 js-salary-step-calculation" data-index="6" style="width: 100%">
                <option></option>
                <option value="0">full-time</option>
                <option value="1">part-time</option>
              </select>
            </div>
          </div>
          <div class="category-block result-content">
            <div class="js-arrows-container arrows-container">
              <img class="js-up up" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-up.svg" alt="money">
              <img class="js-down down" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-down.svg" alt="money">
              <img class="js-inactive inactive visible" src="<?php echo Config::get('path.frontend.img'); ?>/icons/arrow-salary-inactive.svg" alt="money">
            </div>
            <p class="info">ganha <span class="js-text-result">menos</span> do que a média com horário <span class="js-schedule-type-result">full-time</span></p>
            <p class="value js-value-color">
              <span class="js-salary-val-step">-</span><span class="euro">€</span>
            </p>
            <div class="average">
              <p>Média</p>
              <p><span class="js-shedule-type-average">-</span>€</p>
            </div>
          </div>
        </div>
      </div>
      <div class="js-reset-salary-step reset-chart">
        <div class="parent">
          <div class="icon icon-reload"></div>
          <p>Limpar resultados</p>
        </div>
      </div>
      <div class="credits">
        <p><strong>Fonte:</strong> 	 Rodrigues,	 C.F.,	 Figueiras, R.	e Junqueira,V. (2016).	Desigualdade do Rendimento	 e	 Pobreza em Portugal: As
          Consequências	 Sociais	 do	 Programa	 de Ajustamento,	FFMS.</p>
        <p><strong>Nota: </strong>Informação	 baseada	 nos	 microdados	 do ICOR	 2015.	 Os	 valores	 deste	 quadro	 são	 uma aproximação	à	relação	entre	os	vários	níveis	de ganho	 salarial	 líquido	 de	 um	 trabalhador	 por conta	 de	 outrem	 a	 tempo	 completo.	 As diferentes	 categorias	 são	 calculadas	 de	 forma independente.</p>
      </div>
    </div>
    <?php
    /*<div class="block-footer">
      <div class="complete-result js-toggle-salary-evolution">
        <p>Como evoluíram os salários durante o período de ajustamento - 2009-2013?</p>
        <svg class="svg-icon" viewBox="0 0 20 20">
          <path fill="none" d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"></path>
        </svg>
      </div>
    </div>*/
    ?>
  </div>
</div>
