{% extends "data_type_base.html" %}

{% block type_specific_content %}
<div class="space-y-6">
  {% for record in records %}
    {% set payload = record.payload|from_json %}
    <div class="bg-gray-800 rounded-lg overflow-hidden">
      <div class="p-4 border-b border-gray-700">
        <div class="flex justify-between items-center">
          <h3 class="text-lg font-medium text-gray-200">
            Record #{{ loop.index }}
          </h3>
          <span class="text-sm text-gray-400">{{ record.timestamp }}</span>
        </div>
      </div>

      <div class="p-4">
        {% if payload.location %}
          <p class="text-sm text-gray-400 mb-4">URL: {{ payload.location }}</p>
        {% endif %}
        
        <div class="bg-gray-900 rounded-lg p-4">
          <pre class="text-sm text-gray-300 overflow-x-auto whitespace-pre-wrap">{{ payload|tojson(indent=2) }}</pre>
        </div>
      </div>
    </div>
  {% endfor %}
</div>
{% endblock %}