<%- include('partials/head') %>
<div id="refined-doctor-app" data-id="<%= id %>">
  <p v-if="error" class="banner error">{{ error }}</p>
  <p v-if="notice" class="banner ok">{{ notice }}</p>
  <p v-if="!doctor && !error">Loading…</p>

  <section v-if="doctor">
    <p><a href="/refined">← Refined doctors</a></p>
    <div class="hero">
      <img v-if="doctor.image_file_name" class="portrait" :src="imageUrl(doctor.image_file_name)" alt="">
      <span v-else class="portrait empty"></span>
      <div class="hero-main">
        <h1>{{ doctor.full_name }}
          <span v-if="doctor.bmdc_verified" class="badge">BMDC verified · {{ doctor.bmdc_number }}</span>
          <span v-else class="pill">no BMDC number</span>
          <span v-if="doctor.needs_review" class="pill update">needs review</span>
        </h1>
        <p class="lead">{{ doctor.specialty_name || doctor.specialty || 'No specialty' }}<span v-if="doctor.department_name" class="muted"> · {{ doctor.department_name }}</span></p>
        <p v-if="doctor.designation">{{ doctor.designation }}</p>
        <p v-if="doctor.workplace" class="muted">{{ doctor.workplace }}</p>
        <p v-if="doctor.qualifications" class="muted">{{ doctor.qualifications }}</p>
        <code class="muted">{{ doctor.refined_id }}</code>
        <p class="muted small">Confirmed by {{ doctor.confirmed_by }} on {{ (doctor.confirmed_at || '').slice(0, 10) }}</p>
      </div>
      <div class="hero-actions">
        <button class="btn primary" @click="showEdit = !showEdit">{{ showEdit ? 'Close edit' : '✏ Edit' }}</button>
        <button class="btn" :disabled="busy" @click="toggleReview">{{ doctor.needs_review ? 'Clear review flag' : 'Mark needs review' }}</button>
        <button class="btn danger" :disabled="busy" @click="unmerge">Unmerge</button>
      </div>
    </div>

    <div v-if="showEdit" class="card">
      <h3>Edit details</h3>
      <row-editor :row="doctor" :fields="fields" @save="save"></row-editor>
      <div class="pickers">
        <lookup-picker label="Specialty" path="specialties" :id="doctor.specialty_id" :name="doctor.specialty_name" @pick="pickLookup('specialty_id', $event)"></lookup-picker>
        <lookup-picker label="Department" path="departments" :id="doctor.department_id" :name="doctor.department_name" @pick="pickLookup('department_id', $event)"></lookup-picker>
      </div>
      <div v-if="photos.length" class="photos">
        <p class="muted">Photo: click the one to show</p>
        <img v-for="p in photos" :key="p" :src="imageUrl(p)" :class="['thumb', 'big', 'choice', { picked: p === doctor.image_file_name }]" alt="" @click="save({ image_file_name: p })">
      </div>
    </div>

    <div class="section-head"><h2>Chambers <small>({{ doctor.chambers.length }})</small></h2></div>
    <p v-if="!doctor.chambers.length" class="muted">No chambers.</p>
    <div class="chamber-grid">
      <article v-for="c in doctor.chambers" :key="c.refined_chamber_id" class="chamber-card">
        <h3>{{ c.chamber_name || '(no name)' }}</h3>
        <p class="muted">{{ [c.address, c.district].filter(Boolean).join(' · ') || 'No address' }}</p>
        <div class="days"><span v-for="d in daysOf(c)" :key="d.name" :class="['day', d.state]" :title="d.state">{{ d.name }}</span></div>
        <p>🕒 <span v-if="timesOf(c)">{{ timesOf(c) }}</span><span v-else class="muted">time not set</span></p>
        <p>💰 <span :class="{ missing: feeOf(c) === 'not set' }">{{ feeOf(c) }}</span> &nbsp; 📞 <span v-if="phonesOf(c)">{{ phonesOf(c) }}</span><span v-else class="missing">missing</span></p>
        <p v-if="c.visiting_hours" class="muted small">As written: {{ c.visiting_hours }}</p>
        <p v-if="c.consultation_fee_raw" class="muted small">Fee as written: {{ c.consultation_fee_raw }}</p>
      </article>
    </div>

    <details class="section" open>
      <summary>Where this came from <small>({{ doctor.sources.doctors.length }} raw doctors, {{ doctor.sources.profiles.length }} profiles)</small></summary>
      <table class="table">
        <thead><tr><th>Raw doctor</th><th>BMDC</th><th>Pages</th></tr></thead>
        <tbody>
          <tr v-for="d in doctor.sources.doctors" :key="d.doctor_id">
            <td><a :href="'/doctors/' + d.doctor_id">{{ d.full_name }}</a></td>
            <td>{{ d.bmdc_number || '' }}</td>
            <td><span v-for="p in profilesOf(d.doctor_id)" :key="p.source_profile_id" class="source-link">
              <a v-if="safe(p.source_url)" :href="safe(p.source_url)" target="_blank" rel="noopener noreferrer">{{ p.source_site }} ↗</a><span v-else>{{ p.source_site }}</span></span></td>
          </tr>
        </tbody>
      </table>
      <p class="muted small">The raw doctors were never changed. Unmerge gives them back to the review.</p>
    </details>

    <details class="section">
      <summary>Decisions</summary>
      <ul class="hits"><li v-for="(d, i) in doctor.decisions" :key="i"><span class="pill">{{ d.decision }}</span> by {{ d.username }} <span class="muted">{{ (d.created_at || '').slice(0, 16).replace('T', ' ') }}</span> <span v-if="d.note" class="muted">· {{ d.note }}</span></li></ul>
    </details>

    <details class="section" @toggle="onToggle">
      <summary>History of edits</summary>
      <p v-if="historyLoaded && !history.length">No edits yet.</p>
      <table v-if="history.length" class="table">
        <thead><tr><th>When</th><th>Who</th><th>What</th><th>Table</th></tr></thead>
        <tbody><tr v-for="h in history" :key="h.id"><td>{{ h.created_at }}</td><td>{{ h.username }}</td><td><span :class="['pill', h.action]">{{ h.action }}</span></td><td>{{ h.table_name }}</td></tr></tbody>
      </table>
    </details>
  </section>
</div>
<%- include('partials/foot') %>
<script src="/static/doctor-summary.js"></script>
<script src="/static/refined-doctor.js"></script>
</body></html>
