{{template "base.html" .}}

{{define "nav"}}
  <div class="flex items-center gap-4">
    <a href="/dashboard" class="nav-link">Dashboard</a>
    <a href="/" class="nav-link">Home</a>
    <form action="/logout" method="POST" class="flex items-center">
      <button class="btn btn-danger btn-sm" type="submit">Logout</button>
    </form>
  </div>
{{end}}

{{define "content"}}

<div class="page-header">
  <div class="flex flex-col">
    <h1 class="page-title">Patient Directory</h1>
    <p class="page-subtitle">Showing all patients synced from <strong class="text-main font-medium">{{.Session.EHRURL}}</strong></p>
  </div>
</div>

<div class="panel p-0 overflow-hidden">
  <div class="directory-toolbar">
    <div class="search-wrapper w-full max-w-[500px]">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="search-icon"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
      <input type="text" id="patientSearch" 
        class="input-base search-input"
        placeholder="Search by name, MRN, or FHIR ID..." 
        onkeyup="filterPatients()">
    </div>
    <div class="badge badge-neutral text-xs font-semibold uppercase tracking-wider px-3 py-1">
      {{len .Patients}} Patients
    </div>
  </div>

  {{if .Patients}}
  <div class="table-wrapper">
    <table>
      <thead>
        <tr>
          <th>Patient Name</th>
          <th>MRN</th>
          <th>DOB (Age)</th>
          <th>Gender</th>
          <th class="text-right" >Actions</th>
        </tr>
      </thead>
      <tbody>
        {{range .Patients}}
        <tr class="patient-row" 
            data-name="{{.FirstName}} {{.LastName}}" 
            data-fhir-id="{{.FHIRID}}" 
            data-mrn="{{.MRN}}">
          <td>
            <div class="flex items-center gap-3">
              <div class="avatar avatar-sm">
                {{if .FirstName}}{{slice .FirstName 0 1}}{{end}}{{if .LastName}}{{slice .LastName 0 1}}{{end}}
              </div>
              <div class="flex flex-col">
                <span class="font-semibold text-main">{{.LastName}}, {{.FirstName}} {{.MiddleName}}</span>
                <span class="text-xs text-muted">FHIR ID: {{.FHIRID}}</span>
              </div>
            </div>
          </td>
          <td><span class="mrn-badge">{{orDash .MRN}}</span></td>
          <td>
            <div class="flex flex-col">
              <span>{{formatDate .DOB}}</span>
              <span class="text-xs text-muted">{{calculateAge .DOB}} years old</span>
            </div>
          </td>
          <td>{{titleCase .Gender}}</td>
          <td class="text-right align-middle">
            <a href="/dashboard?patient_id={{.FHIRID}}" class="btn btn-primary btn-sm btn-icon">
              View Chart
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </a>
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
  {{else}}
  <div class="empty-state flex flex-col items-center justify-center py-16">
    <div class="text-faint mb-4">
      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
    </div>
    <h3 class="text-lg font-semibold text-main mb-2">No Patients Found</h3>
    <p class="text-sm text-muted">Try syncing a patient from the EHR or check your connection.</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();
    var mrn = (rows[i].getAttribute("data-mrn") || "").toLowerCase();

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