<%- content_for :title, node_title(@node) %>
<% image_attachment = @node.attachments.select { |a| a.asset&.file&.image? }[0] %>

<%= render partial: "stage_header" %>

<div class="hero-container">
  <%= render_responsive_picture(image_attachment.asset, alt: "Hero", fetchpriority: "high") %>
  <article>
    <%= image_attachment.body.html_safe %>
  </article>
  <%= svg "ico-wave" %>
</div>

<article class="answers-container" data-controller="chance">
  <% @node.children.each do |node| %>
    <%= button_to node.title, url_for(action: "answer", value: node.id),
          class: ("chance" if node.chance?),
          form: ((stage_index == 1 and node.chance?) ? { data: { action: "submit->chance#confirm" } } : {}) %>
  <% end %>

  <% if stage_index == 1 %>
    <dialog data-chance-target="dialog" data-action="click->chance#backdropClick">
      
      <div class="header-label"><%= t("game.take_a_chance") %></div>
      <%= tag.h2 t("game.its_risky").html_safe %>

      <div class="dialog-actions">
        <%= svg "ico-wave" %>
        <div>
          <button type="button" data-action="click->chance#cancel"><%= t("game.cancel") %></button>
          <button type="button" data-action="click->chance#ok"><%= t("game.ok") %></button>
        </div>
      </div>
    
    </dialog>
  <% end %>

</article>
