{% extends "quillet/base.html" %}

{% block title %}
  {% if post %}Edit: {{ post.title }}{% else %}New post{% endif %} — {{ newsletter.name }}
{% endblock %}

{% block head %}
<style>
  .form-group { margin-bottom: 1.25rem; }
  label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
  input[type=text], textarea {
    width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;
    font-family: inherit; font-size: 1em;
  }
  textarea { font-family: monospace; font-size: 0.9em; min-height: 400px; resize: vertical; }
  .hint { font-size: 0.85em; color: #666; margin-top: 0.2rem; }
  .error { color: #cc0000; padding: 0.75rem; background: #fff0f0; border-radius: 4px; margin-bottom: 1rem; }
  .post-meta { background: #f5f5f5; padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1.5rem; font-size: 0.9em; }
</style>
{% endblock %}

{% block content %}
<p class="muted">
  <a href="{{ url_for('quillet.dashboard', newsletter_slug=newsletter.slug) }}">← Dashboard</a>
</p>

<h1>{% if post %}Edit post{% else %}New post{% endif %}</h1>

{% if post %}
<div class="post-meta">
  {% if post.published_at %}
    Published {{ post.published_at.strftime('%b %d, %Y') }}
    {% if post.sent_at %} · Sent {{ post.sent_at.strftime('%b %d, %Y') }}{% endif %}
  {% else %}
    <span class="badge badge-draft">Draft</span>
  {% endif %}
</div>
{% endif %}

{% if error %}
  <p class="error">{{ error }}</p>
{% endif %}

<form method="post">
  <div class="form-group">
    <label for="title">Title</label>
    <input type="text" id="title" name="title" value="{{ post.title if post else '' }}" required autofocus>
  </div>

  <div class="form-group">
    <label for="slug">Slug</label>
    <input type="text" id="slug" name="slug" value="{{ post.slug if post else '' }}"
           placeholder="auto-generated from title if left blank">
    <p class="hint">URL: /{{ newsletter.slug }}/posts/<strong>slug</strong></p>
  </div>

  <div class="form-group">
    <label for="body_md">Body (Markdown)</label>
    <textarea id="body_md" name="body_md">{{ post.body_md if post else '' }}</textarea>
  </div>

  <div style="display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center;">
    <button type="submit" class="btn">Save draft</button>

    {% if post and not post.published_at %}
      <form method="post" action="{{ url_for('quillet.publish_post', newsletter_slug=newsletter.slug, post_slug=post.slug) }}"
            style="display:inline;">
        <button type="submit" class="btn" style="background:#28a745;">Publish</button>
      </form>
    {% endif %}

    {% if post and post.published_at and not post.sent_at %}
      <form method="post" action="{{ url_for('quillet.send_post', newsletter_slug=newsletter.slug, post_slug=post.slug) }}"
            style="display:inline;"
            onsubmit="return confirm('Send this post to all confirmed subscribers?')">
        <button type="submit" class="btn" style="background:#0077aa;">Send newsletter</button>
      </form>
    {% endif %}

    <a href="{{ url_for('quillet.post_detail', newsletter_slug=newsletter.slug, post_slug=post.slug) }}"
       class="muted" target="_blank" {% if not post %}style="display:none"{% endif %}>
      View post ↗
    </a>
  </div>
</form>

<script>
  // Auto-fill slug from title if slug is empty
  const titleInput = document.getElementById('title');
  const slugInput = document.getElementById('slug');
  titleInput.addEventListener('input', () => {
    if (slugInput.value) return;
    slugInput.placeholder = titleInput.value
      .toLowerCase().trim()
      .replace(/[^\w\s-]/g, '')
      .replace(/[\s_-]+/g, '-');
  });
</script>
{% endblock %}