{% extends 'base.html' %}

{% block content %}
<div class="space-y-8 max-w-6xl mx-auto px-4">
  <h2 class="text-3xl font-semibold mb-6">Welkom, {{ current_user.username }}!</h2>
  <div class="overflow-x-auto rounded-lg border border-gray-300">
    <table class="min-w-full divide-y divide-gray-200 bg-white">
      <thead class="bg-gray-100">
        <tr>
          <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">Naam</th>
          <th class="px-6 py-3 text-sm font-semibold text-gray-700">URL</th>
          <th class="px-6 py-3 text-center text-sm font-semibold text-gray-700">Bewerken</th>
          <th class="px-6 py-3 text-center text-sm font-semibold text-gray-700">Weergeven</th>
          <th class="px-6 py-3 text-center text-sm font-semibold text-gray-700">Verwijderen</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200">
        {% for board in boards %}
        <tr>
          <td class="whitespace-nowrap px-6 py-4 text-gray-900">{{ board.name }}</td>
          <td class="px-6 py-4 text-blue-600 break-words">
            {% if board.church.is_active %}
            <a href="{{ url_for('display_board_unique', unique_id=board.unique_id) }}" target="_blank" class="underline hover:text-blue-800 transition">display/{{ board.unique_id }}</a>
            {% else %}
            <em>Geen actieve licentie voor dit scherm</em>
            {% endif %}
          </td>
          <td class="text-center px-6 py-4">
            <a href="{{ url_for('edit_board', board_id=board.id) }}" class="bg-[#f7d91a] text-black text-xs px-2 py-1 rounded hover:bg-yellow-300 transition">Bewerken</a>
          </td>
          <td class="relative text-center px-6 py-4">
            {% if board.church.is_active %}
            <a href="{{ url_for('display_board_unique', unique_id=board.unique_id) }}" class="bg-black text-white text-xs px-2 py-1 rounded border border-black hover:bg-gray-800 transition show-iframe-preview" target="_blank" data-url="{{ url_for('display_board_unique', unique_id=board.unique_id) }}">Weergeven</a>
            <div class="iframe-preview-popup" style="display:none; position:absolute; top:0; left:100%; margin-left:8px; width:400px; height:225px; border:1px solid #ccc; box-shadow:0 2px 8px rgba(0,0,0,0.2); z-index:50;">
              <iframe src="" frameborder="0" style="width:100%; height:100%; transform-origin: top left; transform: scale(0.2);"></iframe>
            </div>
            {% endif %}
          </td>
          <td class="text-center px-6 py-4">
            <form method="post" action="{{ url_for('delete_board', board_id=board.id) }}" style="display:inline;">
              <button type="submit" class="bg-white text-black text-xs px-2 py-1 rounded border border-black hover:bg-gray-100 transition" onclick="return confirm('Weet je zeker dat je dit bord wilt verwijderen?');">Verwijderen</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <a href="{{ url_for('add_board') }}" class="bg-[#f7d91a] text-black px-6 py-3 rounded-md font-semibold shadow hover:bg-yellow-300 inline-block mb-6 transition">Nieuw liturgiebord toevoegen</a>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const showIframeLinks = document.querySelectorAll('.show-iframe-preview');

  // Create a single popup container to be reused
  const popup = document.createElement('div');
  popup.style.position = 'absolute';
  popup.style.width = '1080px';
  popup.style.height = '1920px';
  popup.style.border = '1px solid #ccc';
  popup.style.boxShadow = '0 2px 8px rgba(0,0,0,0.2)';
  popup.style.zIndex = '9999';
  popup.style.display = 'none';
  popup.style.background = 'white';
  popup.style.transformOrigin = 'top left';
  popup.style.transform = 'scale(0.2)';

  // iframe inside popup
  const iframe = document.createElement('iframe');
  iframe.frameBorder = 0;
  iframe.style.width = '100%';
  iframe.style.height = '100%';
  iframe.style.transform = '';
  iframe.style.transformOrigin = 'top left';
  popup.appendChild(iframe);

  document.body.appendChild(popup);

  showIframeLinks.forEach(link => {
    link.addEventListener('mouseenter', (event) => {
      const url = link.getAttribute('data-url');
      iframe.src = url;
      const rect = link.getBoundingClientRect();

      // Position popup to the right and vertically aligned with the link
      popup.style.left = (window.scrollX + rect.right + 8) + 'px';
      popup.style.top = (window.scrollY + rect.top) + 'px';
      popup.style.display = 'block';
    });

    link.addEventListener('mouseleave', () => {
      popup.style.display = 'none';
      iframe.src = '';
    });
  });

  // Also hide popup if mouse moves out of popup itself
  popup.addEventListener('mouseleave', () => {
    popup.style.display = 'none';
    iframe.src = '';
  });
});
</script>

{% endblock %}