<%- include('partials/head') %>
<div id="refine-confirm-app">
  <p v-if="error" class="banner error">{{ error }}</p>
  <div v-if="result" class="banner" :class="result.skipped.length ? 'warn-banner' : 'ok'">
    <b>{{ result.headline }}.</b>
    <ul v-if="result.skipped.length" class="tight">
      <li v-for="s in result.skipped" :key="s.doctor_id"><a :href="'/doctors/' + s.doctor_id">{{ s.name }}</a> {{ s.text }}</li>
    </ul>
  </div>

  <div class="head-row">
    <h1>Confirm doctors <small>({{ total }})</small></h1>
    <a href="/refine">← Refine home</a>
  </div>
  <p class="muted">These doctors have no duplicate. Confirming one puts a clean copy in the refined data; the raw data stays as it is.
    A BMDC number is not required: a doctor who has one gets a "BMDC verified" badge.</p>

  <div class="filters">
    <label>Queue
      <select v-model="queue" @change="reload">
        <option value="ready">Ready (specialty, chamber and phone present)</option>
        <option value="single_missing">Something missing</option>
        <option value="all">All single doctors</option>
      </select>
    </label>
    <label>Name <input v-model="q" placeholder="Search by name" @keyup.enter="reload"></label>
    <button class="btn" @click="reload">Search</button>
  </div>

  <div v-if="items.length" class="filters">
    <button class="btn" @click="selectPage">Select all {{ confirmable.length }} on this page</button>
    <button class="btn" :disabled="!selected.length" @click="selected = []">Clear</button>
    <button class="btn primary" :disabled="!selected.length || busy" @click="confirmSelected">✓ Confirm selected ({{ selected.length }})</button>
  </div>

  <p v-if="loaded && !items.length" class="muted">Nobody here.</p>
  <table v-if="items.length" class="table">
    <thead><tr><th style="width:36px"></th><th style="width:50px"></th><th>Name</th><th>BMDC</th><th>Specialty</th><th>Chambers</th><th>Checklist</th><th style="width:210px"></th></tr></thead>
    <tbody>
      <tr v-for="d in items" :key="d.doctor_id">
        <td><input type="checkbox" :value="d.doctor_id" v-model="selected" :disabled="d.missing.length > 0"></td>
        <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" target="_blank" rel="noopener">{{ d.full_name }}</a></td>
        <td><span v-if="d.has_bmdc" class="badge-s likely_same">✓ {{ d.bmdc_number }}</span><span v-else class="muted">none</span></td>
        <td>{{ d.specialty || '' }}</td>
        <td>{{ d.chamber_count }}</td>
        <td>
          <span :class="['ev-chip', d.has_specialty ? 'good' : 'bad']">specialty</span>
          <span :class="['ev-chip', d.has_chamber ? 'good' : 'bad']">chamber</span>
          <span :class="['ev-chip', d.has_phone ? 'good' : 'bad']">phone</span>
        </td>
        <td>
          <button v-if="d.missing.length" class="btn" :disabled="busy" @click="confirmAnyway(d)">Confirm anyway</button>
          <button v-else class="btn" :disabled="busy" @click="confirmOne(d)">✓ Confirm</button>
        </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>
</div>
<%- include('partials/foot') %>
<script src="/static/confirm-helpers.js"></script>
<script src="/static/refine-confirm.js"></script>
</body></html>
