<div class="block-wrapper questionair" data-share-element="questionair" data-anchor="#questionair">
  <a id="questionair"></a>
  <div class="block-container">
    <div class="flip-container">
      <div class="flipper js-flipper">
        <div class="js-front front">
            <div class="header">
              <h3>{{ $templateData->section_7_title }}</h3>
              <h4>{{ $templateData->section_7_subtitle }}</h4>
              <div class="disclaimer">
                <p>{{ $templateData->section_7_description }}</p>
              </div>
              @include('frontend.partials.reusables.social')
            </div>
            <form method="post" action="#">
              <div class="body">
                <div class="arrows-container">
                  <div class="questions-buttons question-button-prev">
                      <svg class="svg-icon" viewBox="0 0 20 20">
                          <path d="M11.739,13.962c-0.087,0.086-0.199,0.131-0.312,0.131c-0.112,0-0.226-0.045-0.312-0.131l-3.738-3.736c-0.173-0.173-0.173-0.454,0-0.626l3.559-3.562c0.173-0.175,0.454-0.173,0.626,0c0.173,0.172,0.173,0.451,0,0.624l-3.248,3.25l3.425,3.426C11.911,13.511,11.911,13.789,11.739,13.962 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.148,3.374,7.521,7.521,7.521C14.147,17.521,17.521,14.148,17.521,10"></path>
                      </svg>
                  </div>
                  <div class="questions-buttons question-button-next">
                      <svg class="svg-icon" viewBox="0 0 20 20">
                          <path d="M12.522,10.4l-3.559,3.562c-0.172,0.173-0.451,0.176-0.625,0c-0.173-0.173-0.173-0.451,0-0.624l3.248-3.25L8.161,6.662c-0.173-0.173-0.173-0.452,0-0.624c0.172-0.175,0.451-0.175,0.624,0l3.738,3.736C12.695,9.947,12.695,10.228,12.522,10.4 M18.406,10c0,4.644-3.764,8.406-8.406,8.406c-4.644,0-8.406-3.763-8.406-8.406S5.356,1.594,10,1.594C14.643,1.594,18.406,5.356,18.406,10M17.521,10c0-4.148-3.374-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.147,17.521,17.521,14.147,17.521,10"></path>
                      </svg>
                  </div>
                  <div class="js-questionair-container questions-container">
                    <div class="js-answers questions-wrapper">
                      <div class="question-item">
                        <h5>1</h5>
                        <p>Tem capacidade para assegurar o pagamento imediato de uma despesa inesperada próxima do valor mensal da linha de pobreza (€422), sem recorrer a empréstimo?</p>
                        <div class="radios-container">
                          <div class="radio-item">
                            <input type="radio" id="radio_material_1" value="sim" name="option1">
                            <label for="radio_material_1">sim</label>
                          </div>
                          <div class="radio-item">
                            <input type="radio" id="radio_material_2" value="nao" name="option1">
                            <label for="radio_material_2">não</label>
                          </div>
                        </div>
                      </div>
                      <div class="question-item">
                        <h5>2</h5>
                        <p>Tem capacidade para pagar uma semana de férias, por ano, fora de casa, suportando a despesa de alojamento e viagem para todos os membros do agregado? </p>
                        <div class="radios-container">
                          <div class="radio-item">
                            <input type="radio" id="radio_material_3" value="sim" name="option2">
                            <label for="radio_material_3">sim</label>
                          </div>
                          <div class="radio-item">
                            <input type="radio" id="radio_material_4" value="nao" name="option2">
                            <label for="radio_material_4">não</label>
                          </div>

                        </div>
                      </div>
                      <div class="question-item">
                        <h5>3</h5>
                        <p>Tem em atraso, motivado por dificuldades económicas, algum dos pagamentos regulares relativos a rendas, prestações de crédito ou despesas correntes da residência principal, ou outras despesas não relacionadas com a residência principal?</p>
                        <div class="radios-container">
                          <div class="radio-item">
                            <input type="radio" id="radio_material_5" value="sim" name="option3">
                            <label for="radio_material_5">sim</label>
                          </div>
                          <div class="radio-item">
                            <input type="radio" id="radio_material_6" value="nao" name="option3">
                            <label for="radio_material_6">não</label>
                          </div>
                        </div>
                      </div>
                      <div class="question-item">
                        <h5>4</h5>
                        <p>Tem capacidade financeira para ter uma refeição de carne ou de peixe (ou equivalente vegetariano), pelo menos de 2 em 2 dias?</p>
                        <div class="radios-container">
                          <div class="radio-item">
                            <input type="radio" id="radio_material_7" value="sim" name="option4">
                            <label for="radio_material_7">sim</label>
                          </div>
                          <div class="radio-item">
                            <input type="radio" id="radio_material_8" value="nao" name="option4">
                            <label for="radio_material_8">não</label>
                          </div>
                        </div>
                      </div>
                      <div class="question-item">
                        <h5>5</h5>
                        <p>Tem capacidade financeira para manter a casa adequadamente aquecida?</p>
                        <div class="radios-container">
                          <div class="radio-item">
                            <input type="radio" id="radio_material_9" value="sim" name="option5">
                            <label for="radio_material_9">sim</label>
                          </div>
                          <div class="radio-item">
                            <input type="radio" id="radio_material_10" value="nao" name="option5">
                            <label for="radio_material_10">não</label>
                          </div>
                        </div>
                      </div>
                      <div class="question-item">
                        <h5>6</h5>
                        <p>Tem capacidade financeira para ter uma máquina de lavar roupa?</p>
                        <div class="radios-container">
                          <div class="radio-item">
                            <input type="radio" id="radio_material_11" value="sim" name="option6">
                            <label for="radio_material_11">sim</label>
                          </div>
                          <div class="radio-item">
                            <input type="radio" id="radio_material_12" value="nao" name="option6">
                            <label for="radio_material_12">não</label>
                          </div>
                        </div>
                      </div>
                      <div class="question-item">
                        <h5>7</h5>
                        <p>Tem capacidade financeira para ter uma televisão a cores?</p>
                        <div class="radios-container">
                          <div class="radio-item">
                            <input type="radio" id="radio_material_13" value="sim" name="option7">
                            <label for="radio_material_13">sim</label>
                          </div>
                          <div class="radio-item">
                            <input type="radio" id="radio_material_14" value="nao" name="option7">
                            <label for="radio_material_14">não</label>
                          </div>
                        </div>
                      </div>
                      <div class="question-item">
                        <h5>8</h5>
                        <p>Tem capacidade financeira para ter telefone fixo ou telemóvel?</p>
                        <div class="radios-container">
                          <div class="radio-item">
                            <input type="radio" id="radio_material_15" value="sim" name="option8">
                            <label for="radio_material_15">sim</label>
                          </div>
                          <div class="radio-item">
                            <input type="radio" id="radio_material_16" value="nao" name="option8">
                            <label for="radio_material_16">não</label>
                          </div>
                        </div>
                      </div>
                      <div class="question-item">
                        <h5>9</h5>
                        <p>Tem capacidade financeira para ter um automóvel (ligeiro de passageiros ou misto)?</p>
                        <div class="radios-container">
                          <div class="radio-item">
                            <input type="radio" id="radio_material_17" value="sim" name="option9">
                            <label for="radio_material_17">sim</label>
                          </div>
                          <div class="radio-item">
                            <input type="radio" id="radio_material_18" value="nao" name="option9">
                            <label for="radio_material_18">não</label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="footer">
                <div class="reset-btn js-answer-questions">
                  <div>
                    <span>Resultado</span>
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12.5 21.9" enable-background="new 0 0 12.5 21.9" xml:space="preserve">
                      <polyline id="XMLID_937_" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="0.7,0.7 11.1,10.9 0.7,21.2 "/>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="js-questions-error error-message-wrapper">
                <p>Atenção: <span>Por favor preencha todos os campos</span></p>
              </div>
            </form>
        </div>
        <div class="js-back back absolute">
          <div class="result-wrapper">
            <div class="info-container">
              <div class="result">
                <img class="result-icon sad js-sad-man" src="{{ Config::get('path.frontend.img') }}/icons/happy-man.svg" alt="man smiling">
                <img class="result-icon happy js-happy-man" src="{{ Config::get('path.frontend.img') }}/icons/sad-man.svg" alt="sad man">
                <div class="line"></div>
                <div class="situation-agreggator">
                  <div class="js-question-situation situation">
                    <p class="js-answer-state1"></p>
                    <p class="js-answer-state2"></p>
                  </div>
                  <div class="js-question-statistic statistic">
                    <p> em 2015</p>
                    <p class="js-percent-persons"></p>
                    <p>da população</p>
                    <p>estava na sua situação</p>
                  </div>
                </div>
              </div>
              <div class="informations">
                <div class="information">
                  <h3>O que é a privação material?</h3>
                  <p>Considera-se que uma pessoa vive numa situação de privação material quando não tem capacidade para dar resposta a três dos nove tipos de dificuldades económicas, listados no inquérito anterior e definidos pela União Europeia. Entre essas dificuldades está a incapacidade de pagar despesas inesperadas, de pagar refeições regulares de carne e peixe, pagar uma semana de férias por ano para a família ou a incapacidade de pagar as contas da casa atempadamente, entre outros itens. Essa era a situação em que vivia 21,6% da população portuguesa em 2015.</p>
                </div>
                <div class="information">
                  <h3>E a privação material severa?</h3>
                  <p>É um nível mais acentuado de privação material. Considera-se que as pessoas que não conseguem dar resposta a quatro dos itens listados no inquérito anterior vivem em privação material severa. Essa era a situação em que vivia 9,6% da população portuguesa em 2015.</p>
                </div>
              </div>
            </div>
            <div class="reset-wrapper">
               <div class="reset-chart enabled red js-reset-questions">
                  <div class="parent">
                    <div class="icon icon-reload"></div>
                    <p>Limpar resultados</p>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
