{% extends "layout/base.html" %}
{% block content %}
<h2 class="mb-3">Jobs</h2>

{% if selected_customer_id %}
<div class="alert alert-info d-flex justify-content-between align-items-center py-2" role="alert">
  <span>
    Filtered on customer:
    <strong>{{ selected_customer_name or ('#' ~ selected_customer_id) }}</strong>
  </span>
  <a href="{{ url_for('main.jobs') }}" class="btn btn-sm btn-outline-primary">Clear filter</a>
</div>
{% endif %}

<div class="table-responsive">
  <table class="table table-sm table-hover align-middle">
    <thead class="table-light">
      <tr>
        <th scope="col">Customer</th>
        <th scope="col">Backup</th>
        <th scope="col">Type</th>
        <th scope="col">Job name</th>
      </tr>
    </thead>
    <tbody>
      {% if jobs %}
        {% for j in jobs %}
          <tr class="job-row" data-href="{{ url_for('main.job_detail', job_id=j.id) }}" style="cursor: pointer;">
            <td>{{ j.customer_name }}</td>
            <td>{{ j.backup_software }}</td>
            <td>{{ j.backup_type }}</td>
            <td>{{ j.job_name }}</td>
          </tr>
        {% endfor %}
      {% else %}
        <tr>
          <td colspan="4" class="text-center text-muted py-3">
            No jobs found.
          </td>
        </tr>
      {% endif %}
    </tbody>
  </table>
</div>

<script>
  (function () {
    function onRowClick(e) {
      // Don't navigate when clicking interactive elements inside the row.
      if (e.target.closest('a, button, input, select, textarea, label, form')) {
        return;
      }

      var href = this.getAttribute('data-href');
      if (href) {
        window.location.href = href;
      }
    }

    document.querySelectorAll('tr.job-row[data-href]').forEach(function (row) {
      row.addEventListener('click', onRowClick);
    });
  })();
</script>
{% endblock %}