{% extends 'base.html' %}
{% block title %}Employees{% endblock %}

{% block content %}
<div class="space-y-4">
  <div class="flex flex-wrap items-center justify-between gap-2">
    <h1 class="text-2xl font-bold">Employees</h1>
    <a href="{% url 'accounts:employee_create' %}" class="btn btn-primary btn-sm">Create Employee</a>
  </div>

  <form method="get" class="flex gap-2">
    <input
      type="text"
      name="q"
      value="{{ query }}"
      class="input input-bordered w-full max-w-md"
      placeholder="Search by code, name, email or phone"
    />
    <button class="btn btn-primary">Search</button>
    {% if query %}
      <a href="{% url 'accounts:employee_list' %}" class="btn btn-ghost">Clear</a>
    {% endif %}
  </form>

  <div class="card border border-base-300 bg-base-100">
    <div class="overflow-x-auto">
      <table class="table table-zebra">
        <thead>
          <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Role</th>
            <th>Contact</th>
            <th>Status</th>
            <th>User Account</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for employee in employees %}
          <tr>
            <td class="font-medium">{{ employee.code }}</td>
            <td>{{ employee.full_name }}</td>
            <td><span class="badge badge-outline">{{ employee.get_role_display }}</span></td>
            <td>{{ employee.phone|default:"—" }}</td>
            <td>
              {% if employee.is_active %}
                <span class="badge badge-success badge-sm">Active</span>
              {% else %}
                <span class="badge badge-ghost badge-sm">Inactive</span>
              {% endif %}
            </td>
            <td>
              {% if employee.user %}
                <span class="badge badge-info badge-sm">{{ employee.user.username }}</span>
              {% else %}
                <a href="{% url 'accounts:user_create' %}?employee={{ employee.id }}" class="btn btn-ghost btn-xs">
                  Create Account
                </a>
              {% endif %}
            </td>
            <td>
              <a href="{% url 'accounts:employee_edit' employee.pk %}" class="btn btn-ghost btn-xs">Edit</a>
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="7" class="text-center opacity-70">No employees found.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}