<div class="fairies" id="fairies">
  <div class="map">
    <img src="/maps/<%= instance.zone %>.jpg" style="width: 100%;" />
    <% APP_DATA[instance.zone.to_sym][:fairies].each do |fairy| %>
      <div
        class="<%= class_names(unclaimed: !has_fairy?(instance, fairy)) %> fairy-dot"
        style="left: <%= fairy[:x].to_f / get_map_x(instance.zone) * 100 %>%; top: <%= fairy[:y].to_f / get_map_y(instance.zone) * 100 %>%; ">
        <% if has_fairy?(instance, fairy) %>
          <% idx = instance.fairies.index { |f| f.location == "#{fairy[:x]},#{fairy[:y]}" } %>
          <% if idx == 0 %>
            <span class="fairy-a fairy-marker">A</span>
          <% elsif idx == 1 %>
            <span class="fairy-b fairy-marker">B</span>
          <% elsif idx == 2 %>
            <span class="fairy-c fairy-marker">C</span>
          <% else %>
            <span class="other-fairy fairy-marker"><%= idx + 1 %></span>
          <% end %>
        <% else %>
          <div
            class="action button"
            hx-post="/fairy/mark?instance=<%=   instance.public_id   %>&location=<%=  fairy[:x]  %>,<%= fairy[:y] %>"
            hx-swap="outerHTML"
            hx-target="#fairies"
            hx-select="#fairies"
          >
            ◆
          </div>
        <% end %>
      </div>
    <% end %>
  </div>

  <% if instance.fairies.empty? %>
    <div class="fairy-list">
      <div class="note">No elementals found yet! Click on any dot to mark that position.</div>
    </div>
  <% else %>
    <div class="fairy-list">
      <% instance.fairies.to_a.each_index do |idx| %>
        <% fdata = APP_DATA[instance.zone.to_sym][:fairies].find { |f| "#{f[:x]},#{f[:y]}" == instance.fairies[idx].location } %>
        <div>
          <% if idx == 0 %>
            <div>
              Elemental <span class="fairy-a">A</span>
            </div>
          <% elsif idx == 1 %>
            <div>
              Elemental <span class="fairy-b">B</span>
            </div>
          <% elsif idx == 2 %>
            <div>
              Elemental <span class="fairy-c">C</span>
            </div>
          <% elsif idx > 2  %>
            <div>
              Elemental <span><%= idx + 1 %></span>
            </div>
          <% end %>

          <div>
            <%#= instance.fairies[idx].location %>
            <%= fdata[:mx] %>,<%= fdata[:my] %>
          </div>

          <div>
            <div
              class="copyable action needs_pwd"
              hx-post="/fairy/unmark?instance=<%= instance.public_id %>&location=<%= instance.fairies[idx].location %>"
              hx-swap="outerHTML"
              hx-target="#fairies"
              hx-select="#fairies"
            >
              remove</div>
            <% unless instance.fairies[idx].is_despawned %>
              <div
                class="copyable action no_pwd"
                hx-post="/fairy/despawn?instance=<%= instance.public_id %>&location=<%= instance.fairies[idx].location %>"
                hx-swap="outerHTML"
                hx-target="#fairies"
                hx-select="#fairies"
              >
                gone?
              </div>
            <% end %>
          </div>
        </div>
        <% if instance.fairies[idx].is_despawned %>
          <span class="despawn-note">potentially despawned!</span>
        <% end %>
      <% end %>
      <div class="needs_pwd note">Click on a black dot to mark another Elemental.</div>
      <div class="note">
        <div
          class="copyable"
          data-copy-content="Elementals: <%= instance.fairies[0..-1].map { |f|
            fdata = APP_DATA[instance.zone.to_sym][:fairies].find { |fd| "#{fd[:x]},#{fd[:y]}" == f.location }
            "#{fdata[:mx]},#{fdata[:my]}"
          }.join(" | ") %>"
        >
          copy elemental positions for chat
        </div>
      </div>
  <% end %>
  </div>
</div>
