112 lines
4.5 KiB
HTML
112 lines
4.5 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Edit — {{ blogpost.title }}{% endblock %}
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- Hero -->
|
|
<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">Edit Blog Post</h1>
|
|
<p class="text-lg opacity-90">{{ blogpost.title }}</p>
|
|
</section>
|
|
|
|
<!-- Form -->
|
|
<section class="py-16 bg-black text-white">
|
|
<div class="max-w-3xl mx-auto px-6">
|
|
<form 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" value="{{ blogpost.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" required
|
|
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">{{ blogpost.content|replace('<br>', '\n') }}</textarea>
|
|
</div>
|
|
|
|
<!-- Category -->
|
|
<div>
|
|
<label for="category" class="block font-semibold mb-1">Category</label>
|
|
<input type="text" id="category" name="category" value="{{ blogpost.category or '' }}"
|
|
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" value="{{ blogpost.tags or '' }}"
|
|
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>
|
|
|
|
<!-- Pinned -->
|
|
<div class="flex items-center gap-2">
|
|
<input type="checkbox" id="pinned" name="pinned" {% if blogpost.pinned %}checked{% endif %}
|
|
class="w-4 h-4 accent-orange-500">
|
|
<label for="pinned" class="font-semibold">Pin this post</label>
|
|
</div>
|
|
|
|
<!-- Existing Images -->
|
|
{% if blogpost.images %}
|
|
{% set imgs = blogpost.images|from_json %}
|
|
{% if imgs %}
|
|
<div>
|
|
<p class="font-semibold mb-2">Current Images</p>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
|
{% for img in imgs %}
|
|
<div class="overflow-hidden rounded-lg border border-gray-700">
|
|
<img src="{{ url_for('static', filename='uploads/' + img) }}"
|
|
alt="{{ img }}" class="w-full h-32 object-cover">
|
|
<p class="text-xs text-gray-400 truncate px-2 py-1">{{ img }}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
<!-- Upload New Images -->
|
|
<div>
|
|
<label for="images" class="block font-semibold mb-1">Upload New 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">
|
|
<p class="text-xs text-gray-400 mt-1">New images are added alongside existing ones.</p>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="pt-4 flex flex-wrap gap-3">
|
|
<button type="submit"
|
|
class="bg-orange-600 text-white px-6 py-2 rounded hover:bg-orange-700 transition">
|
|
Save Changes
|
|
</button>
|
|
<a href="{{ url_for('view_blog', slug=blogpost.slug) }}"
|
|
class="bg-gray-700 text-white px-6 py-2 rounded hover:bg-gray-600 transition">
|
|
Cancel
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
|
|
<script>
|
|
new EasyMDE({
|
|
element: document.getElementById('content'),
|
|
spellChecker: false,
|
|
toolbar: ['bold','italic','heading','|','quote','unordered-list','ordered-list','|','link','image','|','preview','side-by-side','fullscreen','|','guide'],
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|