{% 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;
  }
  input[type=email] {
    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; }
  .post-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-top: 1.5rem; }
</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" id="edit-form">
  <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>

  <button type="submit" class="btn">Save draft</button>
</form>

<div class="post-actions">
  {% if post and not post.published_at %}
    <form method="post" action="{{ url_for('quillet.publish_post', newsletter_slug=newsletter.slug, post_slug=post.slug) }}">
      <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) }}"
          onsubmit="return confirm('Send this post to all confirmed subscribers?')">
      <button type="submit" class="btn" style="background:#0077aa;">Send newsletter</button>
    </form>
  {% endif %}

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

{% if post %}
<div style="margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid #eee;">
  <form method="post" action="{{ url_for('quillet.send_test_post', newsletter_slug=newsletter.slug, post_slug=post.slug) }}">
    <label for="test_email" style="font-weight:600;display:block;margin-bottom:0.4rem;">Send test email to</label>
    <div style="display:flex;gap:0.5rem;align-items:center;">
      <input type="email" id="test_email" name="test_email"
             value="{{ newsletter.reply_to or newsletter.from_email }}"
             style="flex:1;">
      <button type="submit" class="btn">Send test</button>
    </div>
    {% if request.args.get('test_sent') %}
      <p class="hint" style="color:#1a7f37;margin-top:0.4rem;">Test email sent.</p>
    {% endif %}
  </form>
</div>
{% endif %}

<script>
  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 %}