{% extends "base.html" %}

{% block title %}Admin Dashboard - EngLang AI{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}">
{% endblock %}

{% block body %}
<div class="drawer lg:drawer-open">
  <input id="admin-drawer" type="checkbox" class="drawer-toggle" />
  
  <div class="drawer-content flex flex-col">
    <!-- Navbar -->
    <div class="w-full navbar bg-base-100 shadow-sm">
      <div class="flex-none lg:hidden">
        <label for="admin-drawer" class="btn btn-square btn-ghost">
          <i class="fas fa-bars"></i>
        </label>
      </div>
      <div class="flex-1 px-2 mx-2 font-semibold">Admin Dashboard</div>
      <div class="flex-none hidden lg:block">
        <span class="text-sm text-gray-600 mr-4">{{ current_user.email }}</span>
        <a href="{{ url_for('auth.logout') }}" class="btn btn-sm">
          <i class="fas fa-sign-out-alt mr-2"></i> Logout
        </a>
      </div>
    </div>
    
    <!-- Page content -->
    <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gray-50">
      {% block content %}{% endblock %}
    </div>
  </div>
  
  <!-- Sidebar -->
  <div class="drawer-side">
    <label for="admin-drawer" class="drawer-overlay"></label>
    <aside class="flex flex-col w-72 bg-base-200 text-base-content h-screen">
      <div class="px-8 py-6 flex items-center border-b border-gray-200 bg-primary text-white">
        <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-3">
          <i class="fas fa-graduation-cap text-lg"></i>
        </div>
        <div>
          <h2 class="font-bold text-xl">EngLang AI</h2>
          <p class="text-xs opacity-75">Admin Portal</p>
        </div>
      </div>
      
      <div class="px-4 py-6 flex-grow">
        <ul class="menu space-y-1 p-0">
          <li>
            <a href="{{ url_for('admin.dashboard') }}" class="{{ 'active' if request.endpoint == 'admin.dashboard' else '' }}">
              <i class="fas fa-th-large w-5"></i> Dashboard
            </a>
          </li>
          <li>
            <a href="{{ url_for('admin.topics') }}" class="{{ 'active' if request.endpoint == 'admin.topics' else '' }}">
              <i class="fas fa-book w-5"></i> Topics
            </a>
          </li>
          <li>
            <a href="{{ url_for('admin.manage_teachers') }}" class="{{ 'active' if request.endpoint == 'admin.manage_teachers' else '' }}">
              <i class="fas fa-chalkboard-teacher w-5"></i> Teachers
            </a>
          </li>
          <li>
            <a href="{{ url_for('admin.manage_students') }}" class="{{ 'active' if request.endpoint == 'admin.manage_students' else '' }}">
              <i class="fas fa-user-graduate w-5"></i> Students
            </a>
          </li>
          <li>
            <a href="{{ url_for('admin.approvals') }}" class="{{ 'active' if request.endpoint == 'admin.approvals' else '' }}">
              <div class="indicator w-full">
                <span class="indicator-item badge badge-sm badge-accent">
                  {{ stats.pending_approvals if stats is defined and stats.pending_approvals else '' }}
                </span>
                <span><i class="fas fa-user-check w-5"></i> Approvals</span>
              </div>
            </a>
          </li>
        </ul>
      </div>
      
      <!-- Admin profile section -->
      <div class="border-t border-gray-200 p-4">
        <div class="flex items-center gap-3">
          <div class="avatar">
            <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center">
              <i class="fas fa-user text-primary"></i>
            </div>
          </div>
          <div>
            <div class="font-medium">{{ current_user.username }}</div>
            <div class="text-xs text-gray-500">Administrator</div>
          </div>
        </div>
        <a href="{{ url_for('auth.logout') }}" class="btn btn-outline btn-block btn-sm mt-4">
          <i class="fas fa-sign-out-alt mr-2"></i> Logout
        </a>
      </div>
    </aside>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Set active menu item based on current URL
    const currentPath = window.location.pathname;
    const menuItems = document.querySelectorAll('.menu a');
    
    menuItems.forEach(item => {
      const href = item.getAttribute('href');
      if (href && currentPath.includes(href) && href !== '/admin/') {
        item.classList.add('active');
      }
    });
  });
</script>
{% endblock %}