{% extends "base.html" %}
{% block title %}Admin Dashboard{% endblock %}

{% block content %}
<!-- Hero -->
<section class="py-20 bg-gradient-to-br from-orange-600 to-red-800 text-white text-center shadow-inner">
  <h1 class="text-5xl font-extrabold tracking-tight mb-4">Admin Dashboard</h1>
  <p class="text-lg opacity-90">Manage your posts and projects with ease.</p>
</section>

<!-- Main Admin Content -->
<div class="container-page py-16 space-y-16">
  <!-- Project Management -->
  <div class="card">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8">
      <h2 class="text-3xl font-bold text-[rgb(var(--accent))] mb-4 sm:mb-0">Projects</h2>
      <a href="{{ url_for('new_project') }}" 
         class="btn btn-primary shadow-glass">
         <i class="fa fa-plus mr-2"></i> New Project
      </a>
    </div>

    <div class="overflow-x-auto rounded-xl border border-[rgb(var(--border))]">
      <table class="min-w-full text-sm text-left">
        <thead class="bg-[rgb(var(--card))] border-b border-[rgb(var(--border))]">
          <tr class="text-[rgb(var(--muted))] uppercase text-xs tracking-wider">
            <th class="px-5 py-3 font-semibold">Title</th>
            <th class="px-5 py-3 font-semibold">Category</th>
            <th class="px-5 py-3 font-semibold">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for projectpost in projectpost %}
          <tr class="border-b border-[rgb(var(--border))] hover:bg-[rgb(var(--card))]/60 transition">
            <td class="px-5 py-3 text-[rgb(var(--fg))] font-medium">{{ projectpost.title }}</td>
            <td class="px-5 py-3 text-[rgb(var(--muted))]">{{ projectpost.category }}</td>
            <td class="px-5 py-3 flex flex-wrap gap-2">
              <a href="{{ url_for('view_project', slug=projectpost.slug) }}" class="btn btn-ghost border-none bg-blue-600 hover:bg-blue-700 text-white">View</a>
              <a href="{{ url_for('edit_project', slug=projectpost.slug) }}" class="btn btn-ghost border-none bg-yellow-500 hover:bg-yellow-600 text-white">Edit</a>
              <form action="{{ url_for('delete_project', slug=projectpost.slug) }}" method="POST" onsubmit="return confirm('Delete this project?');">
                <button type="submit" class="btn btn-ghost border-none bg-red-600 hover:bg-red-700 text-white">Delete</button>
              </form>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="3" class="px-5 py-4 text-center text-[rgb(var(--muted))] italic">No projects found.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Blog Management -->
  <div class="card">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8">
      <h2 class="text-3xl font-bold text-[rgb(var(--accent))] mb-4 sm:mb-0">Blog Posts</h2>
      <a href="{{ url_for('new_blog') }}" 
         class="btn btn-primary shadow-glass">
         <i class="fa fa-plus mr-2"></i> New Blog Post
      </a>
    </div>

    <div class="overflow-x-auto rounded-xl border border-[rgb(var(--border))]">
      <table class="min-w-full text-sm text-left">
        <thead class="bg-[rgb(var(--card))] border-b border-[rgb(var(--border))]">
          <tr class="text-[rgb(var(--muted))] uppercase text-xs tracking-wider">
            <th class="px-5 py-3 font-semibold">Title</th>
            <th class="px-5 py-3 font-semibold">Category</th>
            <th class="px-5 py-3 font-semibold">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for blogpost in blogpost %}
          <tr class="border-b border-[rgb(var(--border))] hover:bg-[rgb(var(--card))]/60 transition">
            <td class="px-5 py-3 text-[rgb(var(--fg))] font-medium">{{ blogpost.title }}</td>
            <td class="px-5 py-3 text-[rgb(var(--muted))]">{{ blogpost.category }}</td>
            <td class="px-5 py-3 flex flex-wrap gap-2">
              <a href="{{ url_for('view_blog', slug=blogpost.slug) }}" class="btn btn-ghost border-none bg-blue-600 hover:bg-blue-700 text-white">View</a>
              <a href="{{ url_for('edit_blog', slug=blogpost.slug) }}" class="btn btn-ghost border-none bg-yellow-500 hover:bg-yellow-600 text-white">Edit</a>
              <form action="{{ url_for('delete_blog', slug=blogpost.slug) }}" method="POST" onsubmit="return confirm('Delete this post?');">
                <button type="submit" class="btn btn-ghost border-none bg-red-600 hover:bg-red-700 text-white">Delete</button>
              </form>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="3" class="px-5 py-4 text-center text-[rgb(var(--muted))] italic">No blog posts found.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}