<%- content_for :title, node_title(@node) %>
<%- content_for :main_controller, "carousel" %>

<ul class="carousel" data-carousel-target="carousel">
  <% @node.attachments.each do |attachment| %>
    <li>
      <div class="hero-container">
        <%= render_responsive_picture(attachment.asset, alt: "Hero", fetchpriority: "high") %>
        <%= svg "ico-wave" %>
      </div>
      <article>
        <%= attachment.body.html_safe %>
      </article>
    </li>
  <% end %>
</ul>

<div class="scroll-marker-group" role="tablist">
  <% @node.attachments.each_with_index do |_attachment, index| %>
    <button type="button"
            class="scroll-marker"
            role="tab"
            data-carousel-target="marker"
            data-index="<%= index %>"
            data-action="click->carousel#goto"
            aria-label="<%= t("game.go_to_slide", index: index + 1, default: "Go to slide %{index}") %>"></button>
  <% end %>
</div>

<article>
  <%= link_to tag.span(t("game.got_it_lets_get_started")), {action: "intro"}, class: "cta" %>
</article>
  
