<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>WhoMatch地図ページ</title>
  <link rel="stylesheet" href="/leaflet/leaflet.css">
  <link rel="stylesheet" href="/style.css">
</head>

<body>
  <h2>高齢者補助マッチ</h2>
<div id="direction-text" style="font-size: 20px; margin: 10px 0;"></div>

  <!-- 地図エリア -->
  <div id="map" style="height: 500px; margin-bottom: 20px;"></div>

  <!-- ✅ 方位磁石コンパス -->
  <div id="compass-container">
    <div id="compass-circle">
      <span class="c-n">N</span>
      <span class="c-e">E</span>
      <span class="c-s">S</span>
      <span class="c-w">W</span>
      <div id="compass-needle"></div>
    </div>
  </div>

  <!-- Sinatraから依頼データを埋め込み -->
  <script id="requests-data" type="application/json">
    <%= @requests.to_json %>
  </script>

  <!-- 一覧エリア -->
  <h3>依頼一覧</h3>
  <table border="1" cellpadding="6" style="border-collapse: collapse; width: 100%;">
    <thead>
      <tr style="background: #f2f2f2;">
        <th>カテゴリ</th>
        <th>詳細</th>
        <th>緯度</th>
        <th>経度</th>
        <th>登録日時</th>
      </tr>
    </thead>
    <tbody>
      <% @requests.each do |req| %>
        <tr>
          <td><%= req["category"] %></td>
          <td><%= req["description"] || "（なし）" %></td>
          <td><%= req["latitude"] %></td>
          <td><%= req["longitude"] %></td>
          <td><%= req["created_at"] %></td>
        </tr>
      <% end %>
    </tbody>
  </table>

  <script src="/leaflet/leaflet.js"></script>
  <script src="/script.js"defer></script>
</body>
</html>
