{% extends "admin/base_admin.html" %}
{% block page_title %}Blog{% endblock %}

{% block admin_content %}
<div class="admin-card">
  <h2>New Blog Post</h2>
  <form class="admin-form" method="POST" enctype="multipart/form-data">

    <h3 style="margin-bottom:14px;">Post Topic</h3>
    <div class="form-grid">
      <div class="field"><label>Post Title <span style="color:#c9302c;">*</span></label><input type="text" name="title" required></div>
      <div class="field"><label>Author</label><input type="text" name="author" value="Pashupati Legal Team"></div>
    </div>
    <div class="field"><label>Short Description <span style="color:#c9302c;">*</span></label><textarea name="short_description" rows="3" required></textarea></div>

    <h3 style="margin:22px 0 14px;">Feature Photo or Video</h3>
    <div class="form-grid">
      <div class="field">
        <label>Feature Picture</label>
        <img class="preview-thumb" id="feature-preview" style="display:none">
        <input type="file" name="feature_picture" accept="image/*" data-preview="#feature-preview">
      </div>
      <div class="field">
        <label>Feature Video</label>
        <input type="url" name="feature_video_url" placeholder="YouTube / Vimeo link (or upload below)">
        <input type="file" name="feature_video_file" accept="video/*" style="margin-top:10px;">
        <p class="help-text">Use either a video link or an uploaded file — not required. A link takes priority if both are given.</p>
      </div>
    </div>

    <h3 style="margin:22px 0 14px;">About This Blog</h3>
    <div class="form-grid">
      <div class="field"><label>About Blog Description</label><textarea name="about_description" rows="4"></textarea></div>
      <div class="field">
        <label>About Photo</label>
        <img class="preview-thumb" id="about-blog-preview" style="display:none">
        <input type="file" name="about_photo" accept="image/*" data-preview="#about-blog-preview">
      </div>
    </div>

    <div class="card-head-row" style="margin-top:22px;">
      <h3 style="margin:0;">Subtopics (add as many as you like)</h3>
      <button type="button" class="add-row-btn" id="add-subtopic-btn">+ Add Subtopic</button>
    </div>
    <p class="help-text" style="margin-bottom:14px;">Write about a point, then attach a photo for it — shown side by side on the blog page.</p>
    <div id="subtopics-wrap"></div>

    <div class="checkbox-field" style="margin-top:22px;">
      <input type="checkbox" name="is_published" id="is_published" checked>
      <label for="is_published">Published (visible on the site)</label>
    </div>

    <div style="display:flex; gap:12px;">
      <button type="submit" class="btn btn-primary">Publish Post</button>
      <a href="{{ url_for('admin.publications') }}" class="btn btn-outline" style="border-color:var(--border); color:var(--navy);">Cancel</a>
    </div>
  </form>
</div>

<div class="admin-card">
  <h2>All Blog Posts</h2>
  <div class="blog-search-bar" style="margin-bottom:0;">
    <form class="blog-search-form" method="GET" action="{{ url_for('main.publications') }}" target="_blank">
      <input type="text" name="q" placeholder="Preview the public search…">
      <button type="submit">Search</button>
    </form>
  </div>
  <table class="admin-table" style="margin-top:18px;">
    <thead><tr><th>Cover</th><th>Title</th><th>Author</th><th>Status</th><th>Date</th><th></th></tr></thead>
    <tbody>
      {% for p in items %}
      <tr>
        <td>{% if p.cover_image_path %}<img class="thumb" src="{{ url_for('static', filename=p.cover_image_path) }}">{% else %}—{% endif %}</td>
        <td>{{ p.topic }}</td>
        <td>{{ p.author or "—" }}</td>
        <td><span class="badge {{ 'badge-read' if p.is_published else 'badge-unread' }}">{{ 'Published' if p.is_published else 'Draft' }}</span></td>
        <td>{{ p.created_at.strftime('%d %b %Y') }}</td>
        <td>
          <form method="POST" action="{{ url_for('admin.delete_publication', pub_id=p.id) }}" onsubmit="return confirm('Delete this post?')">
            <button class="btn btn-sm btn-danger" type="submit">Delete</button>
          </form>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="6">No blog posts yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}