{% 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 – Employee Mapping
    </h4>
    <a href="{{ url_for('biometric.biometric_logs') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-list-ul"></i> View Sync Logs
    </a>
  </div>

  <!-- Add / Edit form -->
  <div class="card shadow-sm border-0 mb-3">
    <div class="card-header bg-white">
      {% if edit_mapping %}
        <strong>Edit Mapping</strong>
        <small class="text-muted ms-1">(ID: {{ edit_mapping.id }})</small>
      {% else %}
        <strong>Add New Mapping</strong>
      {% endif %}
    </div>
    <div class="card-body">
      <form method="post" action="{{ url_for('biometric.biometric_mapping') }}">
        {% if edit_mapping %}
          <input type="hidden" name="mapping_id" value="{{ edit_mapping.id }}">
        {% endif %}

        <div class="row g-3">
          <div class="col-md-5">
            <label class="form-label">Employee <span class="text-danger">*</span></label>
            <select name="employee_id" class="form-select" required>
              <option value="">-- Select employee --</option>
              {% for e in employees %}
                {% set selected = (edit_mapping and edit_mapping.employee_id == e.id) %}
                <option value="{{ e.id }}" {% if selected %}selected{% endif %}>
                  {{ e.employee_code }} - {{ e.full_name }}
                </option>
              {% endfor %}
            </select>
          </div>

          <div class="col-md-3">
            <label class="form-label">Card Number (external code) <span class="text-danger">*</span></label>
            <input type="text"
                   name="external_code"
                   class="form-control"
                   value="{{ edit_mapping.external_code if edit_mapping else '' }}"
                   required>
          </div>

          <div class="col-md-2">
            <label class="form-label">Source Name</label>
            <input type="text"
                   name="source_name"
                   class="form-control"
                   value="{{ edit_mapping.source_name if edit_mapping else 'default' }}">
            <small class="text-muted">Use 'default' unless you separate by machine/site.</small>
          </div>

          <div class="col-md-2 d-flex align-items-center">
            <div class="form-check mt-3">
              <input class="form-check-input" type="checkbox" name="is_active" id="is_active"
                     {% if not edit_mapping or edit_mapping.is_active %}checked{% endif %}>
              <label class="form-check-label" for="is_active">
                Active
              </label>
            </div>
          </div>
        </div>

        <div class="mt-3 d-flex justify-content-between">
          {% if edit_mapping %}
            <a href="{{ url_for('biometric.biometric_mapping') }}" class="btn btn-outline-secondary">
              Cancel edit
            </a>
          {% else %}
            <span></span>
          {% endif %}
          <button class="btn btn-primary">
            <i class="bi bi-save me-1"></i>
            {% if edit_mapping %}Update Mapping{% else %}Save Mapping{% endif %}
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- Mapping list -->
  <div class="card shadow-sm border-0">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
      <div>
        <strong>Existing Mappings</strong>
        <small class="text-muted ms-1">({{ mappings|length }} total)</small>
      </div>
    </div>
    <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>Employee</th>
              <th>Card Number</th>
              <th>Source</th>
              <th>Status</th>
              <th>Created</th>
              <th style="width:140px;" class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% if mappings %}
              {% for m in mappings %}
              <tr>
                <td>{{ loop.index }}</td>
                <td>
                  {% if m.employee %}
                    <strong>{{ m.employee.employee_code }}</strong> – {{ m.employee.full_name }}
                  {% else %}
                    <span class="text-muted">[Employee deleted]</span>
                  {% endif %}
                </td>
                <td>{{ m.external_code }}</td>
                <td>{{ m.source_name }}</td>
                <td>
                  {% if m.is_active %}
                    <span class="badge bg-success">Active</span>
                  {% else %}
                    <span class="badge bg-secondary">Inactive</span>
                  {% endif %}
                </td>
                <td class="small text-muted">{{ m.created_at }}</td>
                <td class="text-end">
                  <a href="{{ url_for('biometric.biometric_mapping', edit_id=m.id) }}"
                     class="btn btn-sm btn-outline-primary">
                    <i class="bi bi-pencil-square"></i>
                  </a>
                  <form method="post"
                        action="{{ url_for('biometric.biometric_mapping_delete', mapping_id=m.id) }}"
                        style="display:inline-block"
                        onsubmit="return confirm('Delete this mapping?');">
                    <button class="btn btn-sm btn-outline-danger">
                      <i class="bi bi-trash"></i>
                    </button>
                  </form>
                </td>
              </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="7" class="text-center text-muted py-3">
                  No mappings defined yet. Use the form above to create one.
                </td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}