{#
/**
 * @file
 * FlowDrop Data Viewer Component
 *
 * Displays JSON data in a formatted, collapsible view.
 * Handles JSON parsing and pretty-printing for better readability.
 *
 * Available variables:
 * - label: The label for the data section (required)
 * - data: The JSON string to display
 * - collapsed: Whether initially collapsed (default: true)
 * - max_height: Maximum height for data container (default: '300px')
 * - variant: Visual variant (default, success, warning, error, info)
 */
#}

{% set collapsed = collapsed is defined ? collapsed : true %}
{% set max_height = max_height|default('300px') %}
{% set variant = variant|default('default') %}

{# Generate unique ID for accessibility #}
{% set viewer_id = 'fd-data-viewer-' ~ random() %}

<div class="fd-data-viewer fd-data-viewer--{{ variant }}">
  <button 
    type="button" 
    class="fd-data-viewer__header"
    aria-expanded="{{ collapsed ? 'false' : 'true' }}"
    aria-controls="{{ viewer_id }}"
    data-flowdrop-collapse-toggle
  >
    <span class="fd-data-viewer__label">{{ label }}</span>
    <svg class="fd-data-viewer__chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
    </svg>
  </button>
  
  <div 
    id="{{ viewer_id }}" 
    class="fd-data-viewer__content{% if collapsed %} fd-data-viewer__content--collapsed{% endif %}"
    style="--fd-data-viewer-max-height: {{ max_height }}"
  >
    {% if data %}
      <div class="fd-data-viewer__toolbar">
        <button type="button" class="fd-data-viewer__copy-btn" data-flowdrop-copy-json title="Copy to clipboard">
          <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path d="M7 3.5A1.5 1.5 0 018.5 2h3.879a1.5 1.5 0 011.06.44l3.122 3.12A1.5 1.5 0 0117 6.622V12.5a1.5 1.5 0 01-1.5 1.5h-1v-3.379a3 3 0 00-.879-2.121L10.5 5.379A3 3 0 008.379 4.5H7v-1z" />
            <path d="M4.5 6A1.5 1.5 0 003 7.5v9A1.5 1.5 0 004.5 18h7a1.5 1.5 0 001.5-1.5v-5.879a1.5 1.5 0 00-.44-1.06L9.44 6.439A1.5 1.5 0 008.378 6H4.5z" />
          </svg>
          <span>Copy</span>
        </button>
      </div>
      <pre class="fd-data-viewer__pre"><code class="fd-data-viewer__code" data-flowdrop-json>{{ data }}</code></pre>
    {% else %}
      <div class="fd-data-viewer__empty">
        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z" clip-rule="evenodd" />
        </svg>
        <span>No data available</span>
      </div>
    {% endif %}
  </div>
</div>
