<%-   
  content_for :title, question.page_title.blank? ? question.title : question.page_title
  content_for :meta_description, question.page_description
%>

<%# Array(question.assets.select{ |asset| asset.file.image? }.first).each do |asset| %>
<div class="background-container">
  <%# image_tag rails_storage_proxy_path(asset.file.representation(resize_to_limit: [800,nil], format: :jpg)),
                srcset: "#{rails_storage_proxy_path(asset.file.representation(resize_to_limit: [800,nil], format: :jpg))} 800w,
                #{rails_storage_proxy_path(asset.file.representation(resize_to_limit: [1600,nil], format: :jpg))} 1600w,
                #{rails_storage_proxy_path(asset.file.representation(resize_to_limit: [2400,nil], format: :jpg))} 2400w",
                sizes: "100vw"
                %>
  <%= responsive_picture_tag_for_question(question) %>              
</div>
<%# end %>

<%= form_with model: @answer, url: url_for(controller: 'answers', action: 'create') do |form| %>
  
  <div class="question-container">
  
    <div class="animation-element">
      <div class="question-step">
        <div><%= question_index %>/<%= questions_size %></div>
      </div>
    </div>

    <div class="animation-element">
      <div class="question-header">
        <div class="typewriter-text"><%= question.title %></div>
      </div>
    </div>
    
    <div class="animation-element">
      <% question.attachments.with_text.each_slice(2).each_with_index do |answer_option, i| %>    
      <div class="question-answer">
        <%= form.label :value, for: nil do %>
          <%= answer_option.first.body.html_safe %>
          <%= form.radio_button :value, i %>        
        <%- end -%>
      </div>
      <% end %>
    </div>
    
    <div class="animation-element">
      <%= form.button tag.span(t('submit')), class: 'button__base' %>
    </div>
  </div>

<% end %>