<div class="block-wrapper answers-block" data-share-element="comparacao_homens_mulheres" data-anchor="#comparacao_homens_mulheres">
  <a id="comparacao_homens_mulheres"></a>
  <div class="block-container">
    <div class="graph-content">
      <div class="graph-header">
        <div class="icon icon-bars"></div>
        <h2>{{ $templateData->section_4_title }}</h2>
        @include('frontend.partials.reusables.social')
        <h3>{{ $templateData->section_4_subtitle }}</h3>
        <p>{{ $templateData->section_4_description }}</p>
      </div>
      <div class="graph-body">
        <div id="women-average-salary"></div>
        <p class="credits">Fonte: Quadros de Pessoal</p>
      </div>
    </div>
    <div class="header-wrapper">
      <a id="respostas_sara"></a>
      <div class="header-portrait">
         <img src="{{ getMediaUrl( $templateData->image->filename) }}" alt="{{ $templateData->section_4_title }}">
      </div>
    </div>
    <div class="content-container js-drawer-block-elem js-share-element" data-share-element="respostas_sara"  data-anchor="#respostas_sara">
      <h2>{{ $templateData->section_5_title }}</h2>
      @include('frontend.partials.reusables.social')
      <p>{{ $templateData->section_5_subtitle }}</p>
      <div class="js-answers-drawer-wrapper">
         @foreach($qaBlock->questionsAnswers as $qa)
          <div class="drawer-question">
            <div class="question">
              <div class="question-limiter">
                <div class="{{ $qa->iconclass }}"></div>
                <p>{{ $qa->question }}</p>
              </div>
            </div>
            <div class="answer">
              {{ $qa->answer }}
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </div>
</div>
