{% extends "base.html" %}

{% block title %}Admin{% endblock %}

{% block content %}

<section class="py-20 bg-gradient-to-br from-red-800 to-orange-400 text-white text-center">
  <h1 class="text-5xl font-extrabold mb-4">Admin Dashboard</h1>
  <p class="text-xl">Manage your blog posts and projects here.</p>
</section>

<div class="max-w-6xl mx-auto py-12 px-4 space-y-16">

  <!-- Projects Section -->
  <div>
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-3xl font-bold text-orange-600">Project Options</h2>
      <a href="{{ url_for('new_project') }}"
         class="bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700 transition shadow">+ New Project</a>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full table-auto border border-gray-300 bg-white rounded-lg shadow">
        <thead class="bg-gray-100">
          <tr class="text-left text-gray-700 uppercase text-sm">
            <th class="px-4 py-3">Title</th>
            <th class="px-4 py-3">Category</th>
            <th class="px-4 py-3">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for projectpost in projectpost %}
          <tr class="border-t border-gray-200">
            <td class="text-black px-4 py-3 font-medium">{{ projectpost.title }}</td>
            <td class="text-black px-4 py-3">{{ projectpost.category }}</td>
            <td class="px-4 py-3 space-x-2">
              <a href="{{ url_for('view_project', slug=projectpost.slug) }}"
                 class="inline-block bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600">View</a>
              <a href="{{ url_for('edit_project', slug=projectpost.slug) }}"
                 class="inline-block bg-yellow-500 text-white px-3 py-1 rounded hover:bg-yellow-600">Edit</a>
              <form action="{{ url_for('delete_project', slug=projectpost.slug) }}" method="POST" class="inline">
                <button type="submit"
                        onclick="return confirm('Delete this Project?');"
                        class="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600">
                  Delete
                </button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Blog Section -->
  <div>
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-3xl font-bold text-orange-600">Blog Options</h2>
      <a href="{{ url_for('new_blog') }}"
         class="bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700 transition shadow">+ New Blog Post</a>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full table-auto border border-gray-300 bg-white rounded-lg shadow">
        <thead class="bg-gray-100">
          <tr class="text-left text-gray-700 uppercase text-sm">
            <th class="px-4 py-3">Title</th>
            <th class="px-4 py-3">Category</th>
            <th class="px-4 py-3">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for blogpost in blogpost %}
          <tr class="border-t border-gray-200">
            <td class="text-black px-4 py-3 font-medium">{{ blogpost.title }}</td>
            <td class="text-black px-4 py-3">{{ blogpost.category }}</td>
            <td class="px-4 py-3 space-x-2">
              <a href="{{ url_for('view_blog', slug=blogpost.slug) }}"
                 class="inline-block bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600">View</a>
              <a href="{{ url_for('edit_blog', slug=blogpost.slug) }}"
                 class="inline-block bg-yellow-500 text-white px-3 py-1 rounded hover:bg-yellow-600">Edit</a>
              <form action="{{ url_for('delete_blog', slug=blogpost.slug) }}" method="POST" class="inline">
                <button type="submit"
                        onclick="return confirm('Delete this post?');"
                        class="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600">
                  Delete
                </button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>

{% endblock %}