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

<div class="row align-items-center mb-4">
  <div class="col-md-8">
    <h2 class="fw-bold text-primary mb-1"><i class="bi bi-activity me-2"></i>Medical Dashboard</h2>
    <p class="text-muted">Manage your patient schedule, shift timings, and active appointments.</p>
  </div>
  <div class="col-md-4 text-md-end text-center mt-3 mt-md-0">
    <span class="badge bg-info-subtle text-info border border-info px-3 py-2 rounded-pill fs-6"><i class="bi bi-shield-plus me-1"></i> Doctor Access</span>
  </div>
</div>

<div class="card border-0 mb-5">
  <div class="card-header d-flex justify-content-between align-items-center bg-transparent border-0 pb-0">
    <h4 class="fw-bold text-primary m-0"><i class="bi bi-person-workspace text-warning me-2"></i>Quick Actions</h4>
  </div>
  <div class="card-body py-4">
    <div class="row g-4 justify-content-center text-center">
      
      <div class="col-sm-6 col-lg-5">
        <a href="{{ url_for('appointments_list') }}" class="text-decoration-none">
          <div class="p-4 border rounded-4 bg-white shadow-sm hover-elevate transition-all h-100">
            <div class="fs-1 text-success mb-2"><i class="bi bi-list-check"></i></div>
            <h5 class="fw-bold mb-1 text-dark">My Active Appointments</h5>
            <p class="small text-muted mb-0">View scheduled sessions and patient details.</p>
          </div>
        </a>
      </div>

      <!-- Note: We are using a static placeholder for their own doctor_id schedule -->
      <div class="col-sm-6 col-lg-5">
        <a href="{{ url_for('doctor_schedule', doctor_id=session.get('linked_id', 0)) }}" class="text-decoration-none">
          <div class="p-4 border rounded-4 bg-white shadow-sm hover-elevate transition-all h-100">
            <div class="fs-1 text-primary mb-2"><i class="bi bi-calendar-range"></i></div>
            <h5 class="fw-bold mb-1 text-dark">Manage Shift Timings</h5>
            <p class="small text-muted mb-0">Configure your working hours and availability.</p>
          </div>
        </a>
      </div>

    </div>
  </div>
</div>

<div class="row text-center mt-5">
  <div class="col-12">
    <img src="{{ url_for('static', filename='img/doctor.jpg') }}" alt="Medical Staff" class="img-fluid rounded-4 shadow-lg mb-3" style="max-height: 250px; object-fit: cover; width: 100%;">
  </div>
</div>

<style>
.hover-elevate:hover {
  transform: translateY(-5px);
  border-color: var(--primary-light) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
  background: linear-gradient(to top, rgba(2, 142, 155, 0.05), transparent);
}
.transition-all {
  transition: all 0.3s ease;
}
</style>

{% endblock %}