{{template "base.html" .}}

{{define "nav"}}
  <a href="/dashboard" class="nav-link">Dashboard</a>
  <form action="/logout" method="POST" style="display:inline">
    <button class="btn btn-danger" type="submit">Logout</button>
  </form>
{{end}}

{{define "content"}}

<div class="flex items-center justify-between mb-4">
  <h1 class="text-2xl font-bold">Patient Directory</h1>
  <div class="text-sm text-muted">
    EHR: <code class="code-block inline-block">{{.Session.EHRURL}}</code>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Synced Patients <span class="badge badge-neutral ml-2">{{len .Patients}}</span></h3>
    <div class="card-subtitle mt-2">
      Patients synced from the EHR during this or previous sessions.
    </div>
  </div>

  <div class="mb-4">
    <div class="relative">
      <input type="text" id="patientSearch" 
        placeholder="Search by name or FHIR ID..." 
        class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        style="width: 100%; padding: 0.5rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius);"
        onkeyup="filterPatients()">
    </div>
  </div>

  {{if .Patients}}
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Date of Birth</th>
          <th>Gender</th>
          <th>FHIR ID</th>
          <th class="text-right">Actions</th>
        </tr>
      </thead>
      <tbody>
        {{range .Patients}}
        <tr class="patient-row" data-name="{{.FirstName}} {{.LastName}}" data-fhir-id="{{.FHIRID}}">
          <td class="font-medium">
            <div class="flex items-center gap-2">
              <div class="avatar avatar-patient" style="width: 32px; height: 32px; font-size: 0.875rem;">
                {{if .FirstName}}{{slice .FirstName 0 1}}{{end}}{{if .LastName}}{{slice .LastName 0 1}}{{end}}
              </div>
              <div>
                {{if .FirstName}}{{.FirstName}} {{end}}
                {{if .LastName}}{{.LastName}}{{end}}
              </div>
            </div>
          </td>
          <td>{{formatDate .DOB}}</td>
          <td>{{titleCase .Gender}}</td>
          <td class="text-muted font-mono text-xs">{{.FHIRID}}</td>
          <td class="text-right">
            <a href="/dashboard?patient_id={{.FHIRID}}" class="btn btn-primary btn-sm" style="padding: 4px 12px; font-size: 0.75rem;">
              View Dashboard
            </a>
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
  {{else}}
  <div class="text-center py-12 text-muted bg-gray-50 rounded-lg">
    <p>No patients have been synced yet.</p>
  </div>
  {{end}}
</div>

{{end}}

{{define "scripts"}}
<script>
function filterPatients() {
  var input = document.getElementById("patientSearch");
  var filter = input.value.toLowerCase();
  var rows = document.getElementsByClassName("patient-row");

  for (var i = 0; i < rows.length; i++) {
    var name = rows[i].getAttribute("data-name").toLowerCase();
    var fhirId = rows[i].getAttribute("data-fhir-id").toLowerCase();

    if (name.includes(filter) || fhirId.includes(filter)) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }
}
</script>
{{end}}