{% extends "base.html" %}
{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">
  <h2 class="fw-bold text-primary mb-0"><i class="bi bi-person-badge me-2"></i>Doctor Directory</h2>
  <a href="{{ url_for('add_doctor') }}" class="btn btn-primary shadow-sm fw-bold">
    <i class="bi bi-plus-lg me-1"></i> Add Doctor
  </a>
</div>

<div class="card stat-card shadow-lg border-0 rounded-4">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="bg-primary text-white">
          <tr>
            <th class="py-3 px-4"># ID</th>
            <th class="py-3">Name</th>
            <th class="py-3">Department</th>
            <th class="py-3">Specialization</th>
            <th class="py-3">Contact</th>
            <th class="py-3">Consultation Fee</th>
            <th class="py-3 text-center">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for doc in doctors %}
          <tr>
            <td class="px-4 fw-bold text-muted">DOC-{{ "%03d" | format(doc.doctor_id) }}</td>
            <td class="fw-semibold text-dark">
              <div class="d-flex align-items-center">
                <div class="bg-primary-subtle text-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                  <i class="bi bi-person-fill fs-5"></i>
                </div>
                Dr. {{ doc.name }}
              </div>
            </td>
            <td><span class="badge bg-info text-dark rounded-pill px-3">{{ doc.dept_name }}</span></td>
            <td>{{ doc.specialization[:30] + '...' if doc.specialization|length > 30 else doc.specialization }}</td>
            <td><i class="bi bi-telephone text-muted me-1"></i> {{ doc.contact_no }}</td>
            <td class="fw-bold text-success">₹{{ doc.fees }}</td>
            <td class="text-center">
              <a href="{{ url_for('doctor_schedule', doctor_id=doc.doctor_id) }}" class="btn btn-sm btn-outline-primary border-2 rounded-pill px-3 fw-semibold transition-all">
                <i class="bi bi-calendar3 me-1"></i> Schedule
              </a>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="7" class="text-center py-5 text-muted">
              <i class="bi bi-inbox fs-1 d-block mb-3"></i>
              <h5 class="fw-semibold mb-1">No Doctors Found</h5>
              <p class="mb-0">Please add doctors to populate the directory.</p>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{% endblock %}