{% 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-fingerprint me-2"></i> Biometric Sync History
    </h4>
    <form method="post" class="d-flex align-items-center gap-2">
      <input type="date" name="sync_date" class="form-control form-control-sm" style="max-width:170px;">
      <button class="btn btn-sm btn-primary">
        <i class="bi bi-arrow-repeat me-1"></i> Sync for Date
      </button>
    </form>
  </div>

  <!-- Summary cards -->
  <div class="row g-3 mb-3">
    <div class="col-md-4">
      <div class="card shadow-sm border-0">
        <div class="card-body py-2">
          <div class="d-flex justify-content-between align-items-center">
            <div>
              <div class="text-muted small">Total sync runs</div>
              <div class="fs-4 fw-semibold">{{ total_runs }}</div>
            </div>
            <i class="bi bi-list-check fs-2 text-secondary"></i>
          </div>
        </div>
      </div>
    </div>
    {% if last_run %}
    <div class="col-md-4">
      <div class="card shadow-sm border-0">
        <div class="card-body py-2">
          <div class="text-muted small">Last run</div>
          <div class="fw-semibold">
            {{ last_run.sync_date }} – {{ last_run.status|upper }}
          </div>
          <div class="small text-muted">
            {{ last_run.punches_saved }} punches
          </div>
        </div>
      </div>
    </div>
    {% endif %}
  </div>

  <!-- Filter -->
  <form method="get" class="row g-2 mb-2">
    <div class="col-md-3">
      <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
        <option value="">All statuses</option>
        <option value="success" {% if status == 'success' %}selected{% endif %}>Success</option>
        <option value="error" {% if status == 'error' %}selected{% endif %}>Error</option>
        <option value="skipped" {% if status == 'skipped' %}selected{% endif %}>Skipped</option>
      </select>
    </div>
  </form>

  <!-- Table -->
  <div class="card shadow-sm border-0">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-sm mb-0 align-middle">
          <thead class="table-light">
            <tr>
              <th style="width:60px;">#</th>
              <th>Date</th>
              <th>Status</th>
              <th>Source</th>
              <th class="text-end">Punches</th>
              <th>Started</th>
              <th>Ended</th>
              <th>Message</th>
              <th style="width:110px;"></th>
            </tr>
          </thead>
          <tbody>
            {% if runs %}
              {% for r in runs %}
              <tr>
                <td>{{ loop.index + ((pagination.page-1) * pagination.per_page) }}</td>
                <td>{{ r.sync_date }}</td>
                <td>
                  {% if r.status == 'success' %}
                    <span class="badge bg-success">SUCCESS</span>
                  {% elif r.status == 'error' %}
                    <span class="badge bg-danger">ERROR</span>
                  {% elif r.status == 'skipped' %}
                    <span class="badge bg-secondary">SKIPPED</span>
                  {% else %}
                    <span class="badge bg-warning text-dark">{{ r.status|upper }}</span>
                  {% endif %}
                </td>
                <td>{{ r.source_type }} / {{ r.source_name }}</td>
                <td class="text-end">{{ r.punches_saved }}</td>
                <td class="small text-muted">{{ r.started_at }}</td>
                <td class="small text-muted">{{ r.ended_at }}</td>
                <td class="small">{{ r.message }}</td>
                <td class="text-end">
                  <a href="{{ url_for('biometric.biometric_log_detail', run_id=r.id) }}"
                     class="btn btn-sm btn-outline-primary">
                    <i class="bi bi-eye"></i> View
                  </a>
                </td>
              </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="9" class="text-center text-muted py-3">
                  No biometric sync runs yet.
                </td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>

    {% if pagination.pages > 1 %}
    <div class="card-footer d-flex justify-content-between align-items-center py-2">
      <div class="small text-muted">
        Page {{ pagination.page }} of {{ pagination.pages }}
      </div>
      <nav>
        <ul class="pagination pagination-sm mb-0">
          {% if pagination.has_prev %}
          <li class="page-item">
            <a class="page-link" href="{{ url_for('biometric.biometric_logs', page=pagination.prev_num, status=status) }}">&laquo;</a>
          </li>
          {% endif %}
          {% for p in range(1, pagination.pages+1) %}
          <li class="page-item {% if p == pagination.page %}active{% endif %}">
            <a class="page-link" href="{{ url_for('biometric.biometric_logs', page=p, status=status) }}">{{ p }}</a>
          </li>
          {% endfor %}
          {% if pagination.has_next %}
          <li class="page-item">
            <a class="page-link" href="{{ url_for('biometric.biometric_logs', page=pagination.next_num, status=status) }}">&raquo;</a>
          </li>
          {% endif %}
        </ul>
      </nav>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}