{% 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-2">
    <div>
      <h4 class="mb-0">
        <i class="bi bi-fingerprint me-2"></i>
        Biometric Sync Detail – {{ run.sync_date }}
      </h4>
      <div class="small text-muted">
        Status: 
        {% if run.status == 'success' %}
          <span class="badge bg-success">SUCCESS</span>
        {% elif run.status == 'error' %}
          <span class="badge bg-danger">ERROR</span>
        {% elif run.status == 'skipped' %}
          <span class="badge bg-secondary">SKIPPED</span>
        {% else %}
          <span class="badge bg-warning text-dark">{{ run.status|upper }}</span>
        {% endif %}
        &nbsp;|&nbsp;
        {{ run.punches_saved }} punches
      </div>
    </div>
    <a href="{{ url_for('biometric.biometric_logs') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-arrow-left"></i> Back to list
    </a>
  </div>

  <div class="card shadow-sm border-0 mb-3">
    <div class="card-body py-2">
      <div class="row small">
        <div class="col-md-4">
          <strong>Source:</strong> {{ run.source_type }} / {{ run.source_name }}
        </div>
        <div class="col-md-4">
          <strong>Started:</strong> {{ run.started_at }}
        </div>
        <div class="col-md-4">
          <strong>Ended:</strong> {{ run.ended_at }}
        </div>
      </div>
      {% if run.message %}
      <div class="mt-1 small text-muted">
        <strong>Message:</strong> {{ run.message }}
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Punch listing grouped by employee -->
  <div class="card shadow-sm border-0">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
      <div>
        <strong>Punches by employee</strong>
        <small class="text-muted ms-1">(IN/OUT ordered by time)</small>
      </div>
      <form method="get" class="d-flex align-items-center gap-2 mb-0">
        <input type="text" name="emp" value="{{ emp_search }}"
               class="form-control form-control-sm"
               placeholder="Search by code / name">
        <button class="btn btn-sm btn-outline-primary">
          <i class="bi bi-search"></i>
        </button>
      </form>
    </div>
    <div class="card-body p-0">
      {% if grouped %}
        {% for key, data in grouped.items() %}
          <div class="border-bottom px-3 py-2">
            <div class="d-flex justify-content-between align-items-center">
              <div>
                {% if data.employee %}
                  <strong>{{ data.employee.employee_code }} - {{ data.employee.full_name }}</strong>
                {% else %}
                  <strong>{{ data.external_code }}</strong>
                  <span class="badge bg-warning text-dark ms-2">Not mapped</span>
                {% endif %}
              </div>
              <span class="badge bg-light text-muted">
                {{ data.punches|length }} punch(es)
              </span>
            </div>
            <div class="table-responsive mt-2">
              <table class="table table-sm mb-0 align-middle">
                <thead class="table-light">
                  <tr>
                    <th style="width:40px;">#</th>
                    <th>Punch time</th>
                    <th>Direction</th>
                    <th>Device</th>
                  </tr>
                </thead>
                <tbody>
                  {% for p in data.punches %}
                  <tr>
                    <td>{{ loop.index }}</td>
                    <td>{{ p.punch_time }}</td>
                    <td>{{ p.direction or '-' }}</td>
                    <td>{{ p.device_code or '-' }}</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        {% endfor %}
      {% else %}
        <div class="p-3 text-center text-muted">
          No punches stored for this sync run.
        </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}