{% load ui3_tags %}
<div class="ui-overlay">
  <div class="ui-modal" role="dialog" aria-modal="true">
    <button type="button" class="ui-modal-x" data-ui3-close aria-label="Close">&times;</button>
    <h3 class="font-bold text-lg pr-8">{{ title }}</h3>
    <div class="mt-3 overflow-auto max-h-96">
      {% if related %}
      <table class="table table-zebra table-sm w-full">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {% for row in related %}
          <tr>
            <td><a class="link" href="{% url 'ui3:jobs' %}?q={{ row.id }}">{{ row.id }}</a></td>
            <td>{{ row.job_name }}</td>
            <td>{% status_badge row %} {{ row.status|status_label }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <p class="text-sm opacity-70">No related jobs found.</p>
      {% endif %}
    </div>
    <div class="mt-3 flex justify-end">
      <button class="ui-btn" type="button" data-ui3-close>Close</button>
    </div>
  </div>
</div>