<% content_for :head do %>
  <%= vite_javascript_tag "map" %>
<% end %>
<% content_for :window_title, "Letter Tracking Map" %>
<div id="map-legend" style="padding: 4px; font-size: 12px; display: flex; align-items: center; gap: 20px; justify-content: center; margin: 0;">
  <span class="legend-item" style="display: flex; align-items: center; gap: 6px;">
    <span class="legend-color" style="background: #ff6b6b;"></span>
    Current Location
  </span>
  <span class="legend-item" style="display: flex; align-items: center; gap: 6px;">
    <span class="legend-color" style="background: #00e12c;"></span>
    Traveled Path
  </span>
  <span class="legend-item" style="display: flex; align-items: center; gap: 6px;">
    <span class="legend-color" style="background: #0f95ef;"></span>
    Projected Path
  </span>
</div>
<div id="map" style="width: <%= @framed ? '300px' : '100%' %>; height: <%= @framed ? '200px' : '250px' %>; position: relative;"></div>
<p>(coords not exact for obvious reasons)</p>
<style>
  .legend-color {
    background: #fff;
    box-shadow: inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
    display: inline-block;
    height: 13px;
    width: 13px;
    flex-shrink: 0;
  }

  .letter-emoji {
    font-size: 8px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  }

  .current-letter {
    color: #ff6b6b;
  }

  .received-letter {
    color: #00e12c;
  }
</style>
<script type="application/json" id="map-data">
  {
    "letters": <%= raw @letters_data.to_json %>,
    "strokeWidth": <%= @framed ? 2 : 3 %>
  }
</script>
