<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Survey Responses</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-950 text-white p-6">
  <h1 class="text-2xl font-bold mb-4">Survey Responses</h1>

  <div class="overflow-x-auto">
    <table class="min-w-full text-sm">
      <thead class="bg-slate-900">
        <tr>
          <th class="p-2 text-left">ID</th>
          <th class="p-2 text-left">PID</th>
          <th class="p-2 text-left">Name</th>
          <th class="p-2 text-left">Persona</th>
          <th class="p-2 text-left">Online Frequency</th>
          <th class="p-2 text-left">Fulfillment</th>
          <th class="p-2 text-left">Coupons Use</th>
          <th class="p-2 text-left">Pref</th>
          <th class="p-2 text-left">Matters</th>
          <th class="p-2 text-left">Barriers</th>
          <th class="p-2 text-left">Device</th>
          <th class="p-2 text-left">Email</th>
          <th class="p-2 text-left">Created</th>
        </tr>
      </thead>
      <tbody>
        {% for r in rows %}
        {% set a = r.answers %}
        <tr class="border-b border-slate-800">
          <td class="p-2">{{ r.id }}</td>
          <td class="p-2">{{ r.pid }}</td>
          <td class="p-2">{{ r.name }}</td>
          <td class="p-2">{{ r.persona }}</td>
          <td class="p-2">{{ a.shop_online_freq or '-' }}</td>
          <td class="p-2">{{ a.fulfillment_preference or '-' }}</td>
          <td class="p-2">{{ a.digital_coupons_use or '-' }}</td>
          <td class="p-2">{{ a.coupons_preference or '-' }}</td>
          <td class="p-2">{{ (a.what_matters or [])|join(', ') }}</td>
          <td class="p-2">{{ (a.barriers or [])|join(', ') }}</td>
          <td class="p-2">{{ a.device or '-' }}</td>
          <td class="p-2">
            {% if a.email_consent and a.email %}{{ a.email }}{% else %}-{% endif %}
          </td>
          <td class="p-2 whitespace-nowrap">{{ r.created_at }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% set pages = (total // per_page) + (1 if total % per_page else 0) %}
  <div class="mt-4 flex gap-2">
    {% if page > 1 %}
      <a class="px-3 py-1 bg-slate-900 rounded" href="?page={{ page - 1 }}">Prev</a>
    {% endif %}
    <span class="opacity-75">Page {{ page }} / {{ pages }}</span>
    {% if page < pages %}
      <a class="px-3 py-1 bg-slate-900 rounded" href="?page={{ page + 1 }}">Next</a>
    {% endif %}
    <a class="ml-auto px-3 py-1 bg-emerald-600 rounded font-semibold text-black" href="/host/responses.csv">Export CSV</a>
  </div>
</body>
</html>

