{% extends "base.html" %}

{% block title %}New Project Post{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
{% endblock %}

{% block content %}

<!-- Hero Section -->
<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-2">Create a New Project Post</h1>
  <p class="text-lg">Share your projects with the world.</p>
</section>

<!-- Form Section -->
<section class="py-16 bg-black text-white">
  <div class="max-w-3xl mx-auto px-6">
    <form action="{{ url_for('new_project') }}" method="post" enctype="multipart/form-data" class="space-y-6">

      <!-- Title -->
      <div>
        <label for="title" class="block font-semibold mb-1">Post Title</label>
        <input type="text" id="title" name="title" required
               class="text-black bg-white w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
      </div>

      <!-- Content -->
      <div>
        <label for="content" class="block font-semibold mb-1">Post Content</label>
        <textarea id="content" name="content"
          class="text-black bg-white w-full border border-gray-300 rounded px-4 py-2 leading-relaxed text-base focus:ring-2 focus:ring-orange-400 focus:outline-none resize-none overflow-hidden"
          rows="1"></textarea>
      </div>

      <!-- Category -->
      <div>
        <label for="category" class="block font-semibold mb-1">Category</label>
        <input type="text" id="category" name="category" placeholder="What's This Post About?"
               class="text-black bg-white w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
      </div>

      <!-- Tags -->
      <div>
        <label for="tags" class="block font-semibold mb-1">Tags (comma-separated)</label>
        <input type="text" id="tags" name="tags" placeholder="e.g., Flask, SQLite, API"
               class="text-black bg-white w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-orange-400 focus:outline-none">
      </div>

      <!-- Image Upload -->
      <div>
        <label for="images" class="block font-semibold mb-1">Upload Images</label>
        <input type="file" name="images" id="images" multiple
               class="text-black w-full border border-gray-300 rounded px-3 py-2 text-gray-700 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:bg-orange-600 file:text-white hover:file:bg-orange-700">
      </div>

      <!-- Submit -->
      <div class="pt-4 flex gap-3">
        <button type="submit" name="action" value="draft"
                class="bg-gray-600 text-white px-6 py-2 rounded hover:bg-gray-500 transition">
          Save as Draft
        </button>
        <button type="submit" name="action" value="publish"
                class="bg-orange-600 text-white px-6 py-2 rounded hover:bg-orange-700 transition">
          Publish Post
        </button>
      </div>
    </form>

    <div class="mt-8 text-center">
      <a href="{{ url_for('blog') }}" class="text-blue-600 hover:underline">← Back to Blog</a>
    </div>
  </div>
</section>

<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
<script>
  const easyMDE = new EasyMDE({
    element: document.getElementById('content'),
    spellChecker: false,
    autosave: { enabled: true, uniqueId: 'new_project' },
    toolbar: ['bold','italic','heading','|','quote','unordered-list','ordered-list','|','link','image','|','preview','side-by-side','fullscreen','|','guide'],
  });
  document.querySelector('form').addEventListener('submit', function() {
    easyMDE.codemirror.save();
  });
</script>

{% endblock %}

