{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block coltype %}colM{% endblock %}
{% block bodyclass %}{{ block.super }} dashboard haegl-dash-body{% endblock %}
{% block content_title %}{% endblock %}
{% block nav-breadcrumbs %}
<nav class="haegl-breadcrumbs-container" aria-label="Breadcrumbs">
  <div class="haegl-breadcrumbs-track">
    <span style="color: var(--haegl-muted, #64748b); font-size: 13px;">Dashboard Overview</span>
  </div>
</nav>
{% endblock %}
{% block nav-sidebar %}{% endblock %}

{% block content %}
<style>
  /* ==========================================================================
     ADMINISTRATOR DASHBOARD STYLES (HAEGL DCET Website Brand Palette)
     ========================================================================== */
  .haegl-dashboard-page {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
  }

  /* Top Dashboard Header */
  .haegl-dash-top-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: 8px !important;
  }
  .haegl-dash-main-title {
    font-family: var(--haegl-font-head) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--haegl-ink) !important;
    margin: 0 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
  }
  .haegl-dash-subtitle {
    font-size: 13.5px !important;
    color: var(--haegl-muted) !important;
    margin: 4px 0 0 0 !important;
  }
  .haegl-dash-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .haegl-btn-action-primary {
    background: var(--haegl-grad-primary) !important;
    color: #ffffff !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--haegl-font-head) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(196, 30, 58, 0.35) !important;
    transition: all 0.2s ease !important;
  }
  .haegl-btn-action-primary:hover {
    background: linear-gradient(135deg, #9a1629 0%, #c41e3a 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(196, 30, 58, 0.45) !important;
  }
  .haegl-btn-action-secondary {
    background: #ffffff !important;
    border: 1.5px solid var(--haegl-border) !important;
    color: var(--haegl-ink) !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--haegl-font-head) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }
  .haegl-btn-action-secondary:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: var(--haegl-ink) !important;
  }

  /* Real-time Enrolment Alert Strip */
  .haegl-alert-card {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: var(--haegl-red-soft) !important;
    border: 1px solid var(--haegl-red-border) !important;
    border-left: 5px solid var(--haegl-red) !important;
    padding: 14px 20px !important;
    border-radius: 12px !important;
  }
  .haegl-alert-icon {
    color: var(--haegl-red) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .haegl-alert-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .haegl-alert-info strong {
    font-size: 14px !important;
    color: var(--haegl-red-dark) !important;
    font-family: var(--haegl-font-head) !important;
  }
  .haegl-alert-info span {
    font-size: 12.5px !important;
    color: #881337 !important;
  }
  .haegl-alert-cta {
    background: var(--haegl-red) !important;
    color: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
  }
  .haegl-alert-cta:hover {
    background: var(--haegl-red-dark) !important;
  }

  /* Metric KPI Cards (Top 2 Big White Cards) */
  .haegl-metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  .haegl-stat-card {
    background: #ffffff !important;
    border: 1px solid var(--haegl-border) !important;
    border-radius: 16px !important;
    padding: 24px 28px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
  }
  .haegl-stat-card:hover {
    box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.1) !important;
  }
  .haegl-stat-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }
  .haegl-stat-label {
    font-family: var(--haegl-font-head) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: var(--haegl-muted) !important;
    display: block !important;
  }
  .haegl-stat-caption {
    font-size: 13px !important;
    color: #94a3b8 !important;
    margin-top: 3px !important;
    display: block !important;
  }
  .haegl-stat-icon-box {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .haegl-icon-rose {
    background: var(--haegl-red-soft) !important;
    color: var(--haegl-red) !important;
    border: 1px solid var(--haegl-red-border) !important;
  }
  .haegl-icon-navy {
    background: #f1f5f9 !important;
    color: var(--haegl-navy) !important;
    border: 1px solid var(--haegl-border) !important;
  }
  .haegl-stat-number {
    font-family: var(--haegl-font-head) !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    color: var(--haegl-ink) !important;
    margin: 16px 0 !important;
    line-height: 1 !important;
    letter-spacing: -1.5px !important;
  }
  .haegl-stat-card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 10px !important;
  }
  .haegl-live-indicator {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--haegl-muted) !important;
  }
  .haegl-green-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
  }
  .haegl-pill-btn {
    border-radius: 9999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
  }
  .haegl-pill-crimson {
    background: var(--haegl-grad-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3) !important;
  }
  .haegl-pill-crimson:hover {
    background: linear-gradient(135deg, #9a1629 0%, #c41e3a 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(196, 30, 58, 0.4) !important;
  }
  .haegl-pill-navy {
    background: var(--haegl-navy) !important;
    border: 1px solid var(--haegl-navy-card) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2) !important;
  }
  .haegl-pill-navy:hover {
    background: var(--haegl-navy-card) !important;
    transform: translateY(-1px) !important;
  }

  /* Secondary Overview Row */
  .haegl-submetric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  .haegl-substat-box {
    background: #ffffff !important;
    border: 1px solid var(--haegl-border) !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .haegl-substat-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .haegl-substat-tag {
    font-family: var(--haegl-font-head) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: var(--haegl-muted) !important;
    text-transform: uppercase !important;
  }
  .haegl-substat-num {
    font-family: var(--haegl-font-head) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--haegl-ink) !important;
  }
  .haegl-substat-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .haegl-badge-pill-new {
    background: var(--haegl-red-soft) !important;
    color: var(--haegl-red) !important;
    border: 1px solid var(--haegl-red-border) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 9999px !important;
  }
  .haegl-badge-pill-ok {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 9999px !important;
  }
  .haegl-badge-pill-neutral {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid var(--haegl-border) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 9999px !important;
  }
  .haegl-substat-link {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--haegl-red) !important;
    text-decoration: none !important;
  }
  .haegl-substat-link:hover {
    text-decoration: underline !important;
  }

  /* Content Split Row (Bottom 2 Cards) */
  .haegl-split-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  .haegl-content-card {
    background: #ffffff !important;
    border: 1px solid var(--haegl-border) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  .haegl-content-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 20px !important;
  }
  .haegl-card-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .haegl-title-icon-inline {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .haegl-inline-rose {
    background: var(--haegl-red-soft) !important;
    color: var(--haegl-red) !important;
    border: 1px solid var(--haegl-red-border) !important;
  }
  .haegl-inline-navy {
    background: #f1f5f9 !important;
    color: var(--haegl-navy) !important;
    border: 1px solid var(--haegl-border) !important;
  }
  .haegl-card-title {
    font-family: var(--haegl-font-head) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--haegl-ink) !important;
    margin: 0 !important;
  }
  .haegl-card-sub {
    font-size: 12.5px !important;
    color: var(--haegl-muted) !important;
    margin: 2px 0 0 0 !important;
  }
  .haegl-card-action-link {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--haegl-red) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  .haegl-card-action-link:hover {
    text-decoration: underline !important;
  }

  /* Gallery 5-Photo Strip */
  .haegl-gallery-strip {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  .haegl-gallery-thumb {
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
    border: 2px solid var(--haegl-border) !important;
    position: relative !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
    transition: border-color 0.2s, transform 0.2s !important;
  }
  .haegl-gallery-thumb:hover {
    border-color: var(--haegl-red) !important;
    transform: translateY(-2px) !important;
  }
  .haegl-gallery-thumb a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
  }
  .haegl-gallery-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
  }
  .haegl-gallery-thumb:hover img {
    transform: scale(1.08) !important;
  }
  .haegl-gallery-caption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(transparent, rgba(15, 23, 42, 0.9)) !important;
    color: #ffffff !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    padding: 14px 6px 6px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Recent Enquiries Mini Table inside Left Card */
  .haegl-enquiries-feed-box {
    background: #f8fafc !important;
    border: 1px solid var(--haegl-border) !important;
    border-radius: 12px !important;
    padding: 14px !important;
  }
  .haegl-enquiries-feed-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
  }
  .haegl-enquiries-feed-header h3 {
    font-family: var(--haegl-font-head) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--haegl-ink) !important;
    margin: 0 !important;
  }
  .haegl-enquiries-feed-header a {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--haegl-red) !important;
    text-decoration: none !important;
  }
  .haegl-enquiries-table-wrap {
    overflow-x: auto !important;
  }
  .haegl-mini-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 12px !important;
  }
  .haegl-mini-table th {
    text-align: left !important;
    padding: 6px 8px !important;
    color: var(--haegl-muted) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--haegl-border) !important;
  }
  .haegl-mini-table td {
    padding: 8px 8px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: var(--haegl-ink) !important;
  }
  .haegl-enq-name {
    font-weight: 600 !important;
    color: var(--haegl-ink) !important;
  }
  .haegl-enq-date {
    font-size: 10.5px !important;
    color: #94a3b8 !important;
  }
  .haegl-branch-pill {
    background: #f1f5f9 !important;
    color: var(--haegl-ink) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
  }
  .haegl-status-pill {
    padding: 2px 7px !important;
    border-radius: 9999px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
  }
  .haegl-st-new {
    background: var(--haegl-red-soft) !important;
    color: var(--haegl-red) !important;
    border: 1px solid var(--haegl-red-border) !important;
  }
  .haegl-st-contacted {
    background: #e0f2fe !important;
    color: #0369a1 !important;
  }
  .haegl-st-other {
    background: #f1f5f9 !important;
    color: #475569 !important;
  }
  .haegl-mini-btn {
    background: #ffffff !important;
    border: 1px solid var(--haegl-border) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--haegl-ink) !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
  }
  .haegl-mini-btn:hover {
    border-color: var(--haegl-red) !important;
    color: var(--haegl-red) !important;
  }

  /* Faculty Directory List in Dashboard */
  .haegl-faculty-card-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .haegl-faculty-card-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 10px !important;
    transition: all 0.15s ease !important;
    background: #ffffff !important;
  }
  .haegl-faculty-card-row:hover {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
  }
  .haegl-faculty-card-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  .haegl-faculty-card-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--haegl-red) !important;
    box-shadow: 0 2px 6px rgba(196, 30, 58, 0.18) !important;
    flex-shrink: 0 !important;
  }
  .haegl-faculty-card-avatar-empty {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: var(--haegl-red-soft) !important;
    color: var(--haegl-red) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border: 1.5px dashed var(--haegl-red-border) !important;
    flex-shrink: 0 !important;
  }
  .haegl-faculty-card-meta {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .haegl-faculty-card-name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--haegl-ink) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .haegl-faculty-card-details {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11.5px !important;
    color: var(--haegl-muted) !important;
  }
  .haegl-faculty-card-badge {
    background: var(--haegl-red-soft) !important;
    color: var(--haegl-red) !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
  }

  /* Document List (HAEGL Red PDF Badges & Clean Layout) */
  .haegl-document-list {
    display: flex !important;
    flex-direction: column !important;
  }
  .haegl-document-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background-color 0.15s ease !important;
    border-radius: 8px !important;
  }
  .haegl-document-row:hover {
    background-color: #f8fafc !important;
  }
  .haegl-doc-meta-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  .haegl-doc-pdf-badge {
    background: var(--haegl-red-soft) !important;
    color: var(--haegl-red) !important;
    border: 1px solid var(--haegl-red-border) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 7px !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
  }
  .haegl-doc-filesize {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--haegl-muted) !important;
    flex-shrink: 0 !important;
  }
  .haegl-doc-title-link {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--haegl-ink) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-left: 4px !important;
  }
  .haegl-doc-title-link:hover {
    color: var(--haegl-red) !important;
    text-decoration: underline !important;
  }
  .haegl-doc-external-link {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
  }
  .haegl-doc-external-link:hover {
    background: var(--haegl-red-soft) !important;
    color: var(--haegl-red) !important;
  }
  .haegl-doc-quick-shortcuts {
    margin-top: 18px !important;
    padding-top: 14px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .haegl-doc-shortcut-label {
    font-family: var(--haegl-font-head) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--haegl-muted) !important;
  }
  .haegl-doc-shortcut-chip {
    background: #f8fafc !important;
    border: 1px solid var(--haegl-border) !important;
    color: var(--haegl-ink) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
  }
  .haegl-doc-shortcut-chip:hover {
    background: var(--haegl-red-soft) !important;
    color: var(--haegl-red) !important;
    border-color: var(--haegl-red-border) !important;
  }

  @media (max-width: 1024px) {
    .haegl-metric-grid { grid-template-columns: 1fr !important; }
    .haegl-submetric-grid { grid-template-columns: 1fr !important; }
    .haegl-split-grid { grid-template-columns: 1fr !important; }
  }
</style>

<div class="haegl-dashboard-page">

  <!-- TOP HEADER (HAEGL DCET Website Theme) -->
  <div class="haegl-dash-top-header">
    <div class="haegl-dash-header-left">
      <h1 class="haegl-dash-main-title">Administrator Dashboard</h1>
      <p class="haegl-dash-subtitle">Overview of faculty mentors, student admissions, achievers, and announcements</p>
    </div>
    <div class="haegl-dash-header-actions">
      <!-- Add Faculty Button in HAEGL Crimson -->
      <a href="{% url 'admin:academics_faculty_add' %}" class="haegl-btn-action-primary">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
          <circle cx="9" cy="7" r="4"></circle>
          <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
          <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
        </svg>
        <span>+ Add Faculty</span>
      </a>

      <!-- View Enquiries Button -->
      <a href="{% url 'admin:enquiries_admissionenquiry_changelist' %}" class="haegl-btn-action-secondary">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
          <polyline points="22,6 12,13 2,6"></polyline>
        </svg>
        <span>View Enquiries</span>
      </a>
    </div>
  </div>

  <!-- Real-time Enrolment Alert Strip if any new inquiries exist -->
  {% if new_enquiries_count > 0 %}
  <div class="haegl-alert-card" id="haeglEnquiryAlert">
    <div class="haegl-alert-icon">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
        <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
      </svg>
    </div>
    <div class="haegl-alert-info">
      <strong>{{ new_enquiries_count }} New Student Enquir{{ new_enquiries_count|pluralize:"y,ies" }} Received</strong>
      <span>Prospective diploma engineers have registered for upcoming DCET coaching batches.</span>
    </div>
    <div style="display: flex; align-items: center; gap: 8px;">
      <a href="{% url 'admin:enquiries_admissionenquiry_changelist' %}" class="haegl-alert-cta">
        Review Enquiries &rarr;
      </a>
      <button type="button" onclick="document.getElementById('haeglEnquiryAlert').style.display='none'" style="background: none; border: none; font-size: 20px; color: #94a3b8; cursor: pointer; padding: 4px 8px; border-radius: 4px; line-height: 1;" title="Dismiss">&times;</button>
    </div>
  </div>
  {% endif %}

  <!-- METRIC KPI CARDS ROW (Matching HAEGL Brand Tokens) -->
  <div class="haegl-metric-grid">
    
    <!-- CARD 1: FACULTY MENTORS -->
    <div class="haegl-stat-card">
      <div class="haegl-stat-card-header">
        <div class="haegl-stat-label-group">
          <span class="haegl-stat-label">FACULTY MENTORS</span>
          <span class="haegl-stat-caption">Active instructors and technical coaching mentors</span>
        </div>
        <div class="haegl-stat-icon-box haegl-icon-rose">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
            <circle cx="9" cy="7" r="4"></circle>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
          </svg>
        </div>
      </div>
      <div class="haegl-stat-number">{{ faculty_count|default:3 }}</div>
      <div class="haegl-stat-card-footer">
        <div class="haegl-live-indicator">
          <span class="haegl-green-dot"></span>
          <span>Live on public website</span>
        </div>
        <a href="{% url 'admin:academics_faculty_changelist' %}" class="haegl-pill-btn haegl-pill-crimson">
          Manage Faculty ↗
        </a>
      </div>
    </div>

    <!-- CARD 2: STUDENT ENQUIRIES -->
    <div class="haegl-stat-card">
      <div class="haegl-stat-card-header">
        <div class="haegl-stat-label-group">
          <span class="haegl-stat-label">STUDENT ENQUIRIES</span>
          <span class="haegl-stat-caption">Admission applications &amp; student leads</span>
        </div>
        <div class="haegl-stat-icon-box haegl-icon-navy">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
            <polyline points="22,6 12,13 2,6"></polyline>
          </svg>
        </div>
      </div>
      <div class="haegl-stat-number">{{ total_enquiries|default:0 }}</div>
      <div class="haegl-stat-card-footer">
        <div class="haegl-live-indicator">
          {% if new_enquiries_count > 0 %}
          <span class="haegl-amber-dot"></span>
          <span><strong>{{ new_enquiries_count }}</strong> New enquiries</span>
          {% else %}
          <span class="haegl-green-dot"></span>
          <span>All enquiries addressed</span>
          {% endif %}
        </div>
        <a href="{% url 'admin:enquiries_admissionenquiry_changelist' %}" class="haegl-pill-btn haegl-pill-navy">
          Manage Enquiries ↗
        </a>
      </div>
    </div>

  </div>

  <!-- SECONDARY OVERVIEW ROW (Enquiries & Alumni Achievers Quick Overview) -->
  <div class="haegl-submetric-grid">
    <div class="haegl-substat-box">
      <div class="haegl-substat-left">
        <span class="haegl-substat-tag">STUDENT ADMISSIONS</span>
        <strong class="haegl-substat-num">{{ total_enquiries|default:0 }} Enquiries</strong>
      </div>
      <div class="haegl-substat-right">
        {% if new_enquiries_count > 0 %}
        <span class="haegl-badge-pill-new">{{ new_enquiries_count }} Pending</span>
        {% else %}
        <span class="haegl-badge-pill-ok">Up to date</span>
        {% endif %}
        <a href="{% url 'admin:enquiries_admissionenquiry_changelist' %}" class="haegl-substat-link">View Leads &rarr;</a>
      </div>
    </div>

    <div class="haegl-substat-box">
      <div class="haegl-substat-left">
        <span class="haegl-substat-tag">ALUMNI &amp; ACHIEVERS</span>
        <strong class="haegl-substat-num">{{ alumni_count|default:0 }} Rankers</strong>
      </div>
      <div class="haegl-substat-right">
        <span class="haegl-badge-pill-neutral">Public Spotlight</span>
        <a href="{% url 'admin:academics_achievement_changelist' %}" class="haegl-substat-link">View Achievers &rarr;</a>
      </div>
    </div>
  </div>

  <!-- CONTENT PANELS SPLIT ROW (HAEGL Brand Elements) -->
  <div class="haegl-split-grid">
    
    <!-- LEFT CARD: FACULTY MENTORS -->
    <div class="haegl-content-card">
      <div class="haegl-content-card-header">
        <div class="haegl-card-title-wrap">
          <div class="haegl-title-icon-inline haegl-inline-rose">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
            </svg>
          </div>
          <div>
            <h2 class="haegl-card-title">Faculty Mentors</h2>
            <p class="haegl-card-sub">Active instructors and technical coaching educators</p>
          </div>
        </div>
        <a href="{% url 'admin:academics_faculty_changelist' %}" class="haegl-card-action-link">
          Manage All &rarr;
        </a>
      </div>

      <div class="haegl-content-card-body">
        <div class="haegl-faculty-card-list">
          {% for fac in recent_faculty_members %}
          <div class="haegl-faculty-card-row">
            <div class="haegl-faculty-card-left">
              {% if fac.photo_url %}
              <img src="{{ fac.photo_url }}" alt="{{ fac.name }}" class="haegl-faculty-card-avatar">
              {% else %}
              <div class="haegl-faculty-card-avatar-empty">
                {{ fac.name|make_list|first|upper }}
              </div>
              {% endif %}
              <div class="haegl-faculty-card-meta">
                <span class="haegl-faculty-card-name">{{ fac.name }}</span>
                <div class="haegl-faculty-card-details">
                  {% if fac.education %}
                  <span class="haegl-faculty-card-badge">{{ fac.education }}</span>
                  {% elif fac.subject_taught %}
                  <span class="haegl-faculty-card-badge">{{ fac.subject_taught }}</span>
                  {% else %}
                  <span>{{ fac.designation }}</span>
                  {% endif %}
                </div>
              </div>
            </div>
            <a href="{{ fac.admin_url }}" class="haegl-mini-btn">Edit</a>
          </div>
          {% empty %}
          <div style="text-align: center; padding: 24px 12px; color: var(--haegl-muted);">
            <p style="margin: 0 0 12px 0;">No faculty mentors registered yet.</p>
            <a href="{% url 'admin:academics_faculty_add' %}" class="haegl-pill-btn haegl-pill-crimson">+ Add First Faculty</a>
          </div>
          {% endfor %}
        </div>
        
        <div style="margin-top: 14px; padding-top: 12px; border-top: 1px solid #f1f5f9; display: flex; justify-content: flex-end;">
          <a href="{% url 'admin:academics_faculty_add' %}" class="haegl-mini-btn" style="color: var(--haegl-red); border-color: var(--haegl-red-border); background: var(--haegl-red-soft);">+ Add New Faculty</a>
        </div>
      </div>
    </div>

    <!-- RIGHT CARD: RECENT STUDENT ENQUIRIES -->
    <div class="haegl-content-card">
      <div class="haegl-content-card-header">
        <div class="haegl-card-title-wrap">
          <div class="haegl-title-icon-inline haegl-inline-navy">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
              <polyline points="22,6 12,13 2,6"></polyline>
            </svg>
          </div>
          <div>
            <h2 class="haegl-card-title">Recent Student Enquiries</h2>
            <p class="haegl-card-sub">Prospective diploma engineers seeking DCET coaching guidance</p>
          </div>
        </div>
        <a href="{% url 'admin:enquiries_admissionenquiry_changelist' %}" class="haegl-card-action-link">
          View All ({{ total_enquiries|default:0 }}) &rarr;
        </a>
      </div>

      <div class="haegl-content-card-body">
        <div class="haegl-enquiries-table-wrap">
          <table class="haegl-mini-table">
            <thead>
              <tr>
                <th>Student</th>
                <th>Mobile</th>
                <th>Branch</th>
                <th>Status</th>
                <th class="text-right">Action</th>
              </tr>
            </thead>
            <tbody>
              {% for enq in recent_enrolments %}
              <tr>
                <td>
                  <strong class="haegl-enq-name">{{ enq.name }}</strong>
                  <div class="haegl-enq-date">{{ enq.created_at|date:"d M, H:i" }}</div>
                </td>
                <td>{{ enq.mobile }}</td>
                <td><span class="haegl-branch-pill">{{ enq.get_branch_display }}</span></td>
                <td>
                  {% if enq.status == 'new' %}
                  <span class="haegl-status-pill haegl-st-new">New</span>
                  {% elif enq.status == 'contacted' %}
                  <span class="haegl-status-pill haegl-st-contacted">Contacted</span>
                  {% else %}
                  <span class="haegl-status-pill haegl-st-other">{{ enq.get_status_display }}</span>
                  {% endif %}
                </td>
                <td class="text-right">
                  <a href="{% url 'admin:enquiries_admissionenquiry_change' enq.id %}" class="haegl-mini-btn">Review</a>
                </td>
              </tr>
              {% empty %}
              <tr>
                <td colspan="5" class="haegl-table-empty" style="text-align: center; padding: 24px; color: var(--haegl-muted);">
                  No student enquiries recorded yet.
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>

</div>
{% endblock %}

{% block sidebar %}{% endblock %}