<div class="orbit margin-bottom" role="region" aria-label="<%= option.title %>" data-orbit data-auto-play="false" data-use-m-u-i="false">
  <button type="button" data-toggle="option_<%= option.id %> zoom_<%= option.id %>" class="zoom-link hide-for-small-only">
    <span id="zoom_<%= option.id %>" class="icon-search-plus" data-toggler="icon-search-plus icon-search-minus"></span>
    <span class="show-for-sr"><%= t("polls.show.zoom_plus") %></span>
  </button>

  <ul class="orbit-container">
    <li>
      <button class="orbit-previous">
        <span class="show-for-sr"><%= t("shared.orbit.previous_slide") %></span>&#9664;&#xFE0E;
      </button>
    </li>
    <li>
      <button class="orbit-next">
        <span class="show-for-sr"><%= t("shared.orbit.next_slide") %></span>&#9654;&#xFE0E;
      </button>
    </li>

    <% option.images.reverse.each_with_index do |image, index| %>
      <li class="orbit-slide <%= is_active_class(index) %>">
        <%= link_to image.attachment do %>
          <%= image_tag image.attachment,
                        class: "orbit-image",
                        alt: image.title.unicode_normalize %>
        <% end %>
        <span class="orbit-caption"><%= image.title.unicode_normalize %></span>
      </li>
    <% end %>

  </ul>

  <nav class="orbit-bullets">
    <% option.images.each_with_index do |image, index| %>
      <button class="<%= is_active_class(index) %>" data-slide="<%= index %>">
        <span class="show-for-sr"><%= image.title.unicode_normalize %></span>
      </button>
    <% end %>
  </nav>
</div>
