{% extends "registration-admin/base.html" %}
{% load static %}

{% block title %}GLCDI Admin - Data space participants{% endblock %}

{% block content %}
<div class="admin-header">
  <h1 class="admin-page-title">Data space participants</h1>
</div>

<div class="admin-table-wrap">
  <table class="admin-table">
    <thead>
      <tr>
        <th>Organization</th>
        <th>Primary contact</th>
        <th>Email</th>
        <th>Organization type</th>
        <th>Submitted</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for p in participants %}
      <tr>
        <td>
          <div class="org-cell">
            {% if p.organization_logo %}
            <img src="{{ p.organization_logo.url }}" alt="{{ p.organization }}" class="org-logo">
            {% else %}
            <span class="org-logo-placeholder">{{ p.organization|truncatechars:2 }}</span>
            {% endif %}
            <span>{{ p.organization }}</span>
          </div>
        </td>
        <td>{{ p.firstname }} {{ p.lastname }}</td>
        <td>{{ p.email }}</td>
        <td>
          {% for label in p.organization_type_display %}
            <span class="org-type-tag">{{ label }}</span>
          {% empty %}
            <span class="text-muted">N/A</span>
          {% endfor %}
        </td>
        <td>{{ p.created_at|date:"M d, Y H:i" }}</td>
        <td>
          <span class="status-badge status-{{ p.status }}">
            {% if p.status == "pending" %}Pending
            {% elif p.status == "processing" %}Processing
            {% elif p.status == "approved" %}Accepted
            {% elif p.status == "rejected" %}Denied
            {% endif %}
          </span>
        </td>
        <td>
          <button type="button"
                  class="btn-review"
                  data-pk="{{ p.pk }}"
                  data-org="{{ p.organization|escapejs }}"
                  data-name="{{ p.firstname }} {{ p.lastname }}"
                  data-email="{{ p.email|escapejs }}"
                  {% if p.organization_logo %}data-logo="{{ p.organization_logo.url }}"{% endif %}
                  data-status="{{ p.status }}"
                  {% if p.status != 'pending' %}disabled{% endif %}
                  onclick="openReviewModal(this)">Review</button>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="7" class="empty-state">No participants registered yet.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="modal-overlay" id="reviewModal" style="display:none;">
  <div class="modal">
    <h2 class="modal-title">Approve application</h2>
    <p class="modal-subtitle">You are about to approve the application from:</p>
    <div class="modal-participant">
      <span class="modal-participant-logo" id="modalLogo"></span>
      <div class="modal-participant-info">
        <strong id="modalOrg"></strong>
        <span id="modalName"></span>
        <span id="modalEmail"></span>
      </div>
    </div>
    <div class="modal-warning">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="#d97706"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.168 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 6a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 6Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/></svg>
      <span>You must deploy a dedicated connector to this participant for data sharing &amp; access management.</span>
    </div>
    <div class="modal-info">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="#059669"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z"/></svg>
      <span id="modalNotifyEmail"></span>
    </div>
    <div class="modal-actions">
      <button type="button" class="btn-cancel" onclick="closeReviewModal()">Cancel</button>
      <form method="post" id="modalDenyForm" style="display:inline;">
        {% csrf_token %}
        <button type="submit" class="btn-deny">Deny</button>
      </form>
      <form method="post" id="modalApproveForm" style="display:inline;">
        {% csrf_token %}
        <button type="submit" class="btn-approve">Approve</button>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function() {
  var approveTemplate = "{{ approve_url_template }}";
  var denyTemplate = "{{ deny_url_template }}";

  function urlFor(template, pk) {
    return template.replace(/\/0\/?/, "/" + pk + "/");
  }

  window.openReviewModal = function(btn) {
    var pk = btn.getAttribute("data-pk");
    var org = btn.getAttribute("data-org");
    var name = btn.getAttribute("data-name");
    var email = btn.getAttribute("data-email");
    var logo = btn.getAttribute("data-logo");

    document.getElementById("modalOrg").textContent = org;
    document.getElementById("modalName").textContent = name;
    document.getElementById("modalEmail").textContent = email;
    document.getElementById("modalNotifyEmail").textContent = email + " will be notified by email about this decision.";

    var logoEl = document.getElementById("modalLogo");
    if (logo) {
      logoEl.innerHTML = '<img src="' + logo + '" alt="' + org + '" class="modal-logo-img">';
    } else {
      logoEl.innerHTML = '<span class="org-logo-placeholder">' + org.substring(0, 2) + '</span>';
    }

    document.getElementById("modalApproveForm").action = urlFor(approveTemplate, pk);
    document.getElementById("modalDenyForm").action = urlFor(denyTemplate, pk);
    document.getElementById("reviewModal").style.display = "flex";
  };

  window.closeReviewModal = function() {
    document.getElementById("reviewModal").style.display = "none";
  };

  document.getElementById("reviewModal").addEventListener("click", function(e) {
    if (e.target === this) closeReviewModal();
  });

  document.addEventListener("keydown", function(e) {
    if (e.key === "Escape") closeReviewModal();
  });
})();
</script>
{% endblock %}