<h3>Sprites</h3>

<div class="sprite-list">
  <% Bestiary.get_sprites_for_zone(instance.zone).each do |sprite| %>
    <% is_spawning = forecast[0][:curr_weather].in?(sprite[:weather]) %>
    <div class="sprite">
      <div class="sprite-name">
        <img src="/<%= sprite[:element] %>.png" width="15" style="margin-top: -3px;" />
        <%= sprite[:name] %>
      </div>
      <% if is_spawning %>
        <div class="spawning">is spawning!</div>
      <% else %>
        <% next_pattern = forecast.find { |f| f[:curr_weather].in?(sprite[:weather]) } %>
        <div class="not-spawning">spawns in
          <% if next_pattern.nil? %>
            >300m
          <% else %>
            <%= ((next_pattern[:time] - Time.now.utc) / 1.minutes).ceil %>m
          <% end %>
        </div>
      <% end %>
    </div>
    <% if is_spawning %>
      <div class="sprite-levels">
        <% sprite[:sprite_levels].each do |lvl| %>
          <div>
            <div style="display: flex; gap: 3px;">
              <div>lv<%= lvl[:lv] %></div>
              <div>
                <% if lvl[:mutates] %>
                  <img src="/mutation.png" width="13" />
                <% elsif lvl[:adapts] %>
                  <img src="/adaptation.png" width="13" />
                <% end %>
              </div>
            </div>
            ~<%= lvl[:mx] %>/<%= lvl[:my] %>
          </div>
        <% end %>
      </div>
      <details class="sprite-map">
        <summary>
          show map
        </summary>

        <div style="position: relative;">
          <img src="/maps/<%= sprite[:zone] %>_fw.jpg" style="width: 100%; position: relative;" />
          <% sprite[:sprite_levels].each do |lvl| %>
            <div
              title="LV<%= lvl[:lv] %>"
              style="line-height: 10px; position: absolute; left: <%= (lvl[:mx] / 42) * 100.0 - 2.0 %>%; top: <%= (lvl[:my] / 42) * 100.0 - 2.5 %>%"
            >
              &bullet;
              <br/>
              <small>LV<%= lvl[:lv] %></small>
            </div>
          <% end %>
        </div>
      </details>
    <% end %>
  <% end %>
</div>