{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-3" style="max-width:1100px;">

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="bi bi-arrow-repeat me-2"></i>
      DeskTime Sync History
    </h4>
  </div>

  <div class="card shadow-sm border-0">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-sm align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th style="width:60px;">#</th>
              <th>Run Date</th>
              <th>Target Date</th>
              <th>Status</th>
              <th class="text-end">Employees</th>
              <th class="text-end">Success</th>
              <th class="text-end">Failed</th>
              <th>Errors</th>
            </tr>
          </thead>
          <tbody>
            {% if rows %}
              {% for row in rows %}
                {% set log = row.log %}
                {% set p = row.payload %}
                <tr>
                  <td>{{ loop.index }}</td>
                  <td>
                    {{ log.started_at.strftime('%d-%m-%Y %H:%M') if log.started_at else '-' }}
                  </td>
                  <td>
                    {{ p.target_date if p.target_date is defined else '-' }}
                  </td>
                  <td>
                    {% if log.status == 'success' %}
                      <span class="badge bg-success">Success</span>
                    {% elif log.status == 'partial' %}
                      <span class="badge bg-warning text-dark">Partial</span>
                    {% elif log.status == 'failed' %}
                      <span class="badge bg-danger">Failed</span>
                    {% else %}
                      <span class="badge bg-secondary">{{ log.status or 'Unknown' }}</span>
                    {% endif %}
                  </td>
                  <td class="text-end">
                    {{ p.total_employees if p.total_employees is defined else '-' }}
                  </td>
                  <td class="text-end">
                    {{ p.success if p.success is defined else '-' }}
                  </td>
                  <td class="text-end">
                    {{ p.failed if p.failed is defined else '-' }}
                  </td>
                  <td>
                    {% if p.errors and p.errors|length > 0 %}
                      <button class="btn btn-sm btn-link p-0"
                              type="button"
                              data-bs-toggle="collapse"
                              data-bs-target="#err-{{ log.id }}">
                        View ({{ p.errors|length }})
                      </button>
                    {% else %}
                      <span class="text-muted">-</span>
                    {% endif %}
                  </td>
                </tr>

                {% if p.errors and p.errors|length > 0 %}
                <tr class="collapse" id="err-{{ log.id }}">
                  <td colspan="8" class="bg-light">
                    <ul class="mb-0 small">
                      {% for e in p.errors %}
                        <li>{{ e }}</li>
                      {% endfor %}
                    </ul>
                  </td>
                </tr>
                {% endif %}
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="8" class="text-center text-muted py-3">
                  No sync runs recorded yet.
                </td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}