<!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>
