<%- include('partials/head') %>
<div id="doctors-app">
  <p v-if="error" class="banner error">{{ error }}</p>

  <section v-if="searching">
    <h1>Search: “{{ q }}”</h1>
    <p><a href="/doctors">← all doctors</a></p>
    <p v-if="!loaded">Searching…</p>
    <div v-for="g in groupList" :key="g.name" class="group">
      <h2>{{ g.label }} <small>({{ g.total }})</small></h2>
      <p v-if="!g.items.length" class="muted">No match</p>
      <ul class="hits">
        <li v-for="h in g.items" :key="h.id">
          <template v-if="g.name === 'doctors' || g.name === 'profiles'">
            <img v-if="h.image_file_name" class="thumb" :src="imageUrl(h.image_file_name)" alt="">
            <span v-else class="thumb empty"></span>
          </template>
          <a :href="'/doctors/' + h.doctor_id"><b>{{ h.title }}</b></a>
          <span class="muted">{{ h.subtitle }}</span>
          <code class="muted">{{ h.id }}</code>
        </li>
      </ul>
      <p v-if="g.total > g.items.length" class="muted">Showing {{ g.items.length }} of {{ g.total }}. <button class="btn" @click="more(g)">Show more</button></p>
    </div>
  </section>

  <section v-else>
    <div class="head-row">
      <h1>Doctors <small>({{ total }})</small></h1>
      <button class="btn primary" @click="showNew = !showNew">+ New doctor</button>
    </div>
    <form v-if="showNew" class="card" @submit.prevent="create">
      <label>Full name <input v-model="draft.full_name" required></label>
      <label>BMDC number <input v-model="draft.bmdc_number"></label>
      <label>Specialty (text) <input v-model="draft.specialty"></label>
      <button class="btn primary">Create</button>
    </form>
    <div class="filters">
      <label>Profiles
        <select v-model="fProfiles" @change="filter">
          <option value="">any</option><option value="none">none</option><option value="has">has some</option><option value="one">exactly 1</option><option value="many">2 or more</option>
        </select>
      </label>
      <label>Chambers
        <select v-model="fChambers" @change="filter">
          <option value="">any</option><option value="none">none</option><option value="has">has some</option><option value="one">exactly 1</option><option value="many">2 or more</option>
        </select>
      </label>
      <label>Data gap
        <select v-model="fIssue" @change="filter">
          <option value="">none</option><option value="no_specialty">no specialty</option><option value="no_bmdc">no BMDC number</option>
          <option value="no_image">no image</option><option value="no_chamber">no chamber</option>
        </select>
      </label>
      <span v-if="fSpecialty" class="pill chip">one specialty only <a href="#" @click.prevent="fSpecialty = ''; filter()">✕</a></span>
      <button v-if="fProfiles || fChambers || fIssue || fSpecialty" class="btn" @click="clearFilters">Clear filters</button>
    </div>
    <table class="table">
      <thead><tr><th></th><th>Name</th><th>BMDC</th><th>Specialty</th><th>Profiles</th><th>Chambers</th></tr></thead>
      <tbody>
        <tr v-for="d in items" :key="d.doctor_id">
          <td><img v-if="d.image_file_name" class="thumb" :src="imageUrl(d.image_file_name)" alt=""><span v-else class="thumb empty"></span></td>
          <td><a :href="'/doctors/' + d.doctor_id">{{ d.full_name }}</a></td>
          <td>{{ d.bmdc_number }}</td>
          <td>{{ d.specialty_name || d.specialty }}</td>
          <td>{{ d.profile_count }}</td>
          <td>{{ d.chamber_count }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pager">
      <button class="btn" :disabled="page <= 1" @click="go(page - 1)">‹ Prev</button>
      <span>Page {{ page }} of {{ pages }}</span>
      <button class="btn" :disabled="page >= pages" @click="go(page + 1)">Next ›</button>
    </div>
  </section>
</div>
<%- include('partials/foot') %>
<script src="/static/doctors.js"></script>
</body></html>
