{% extends "base.html" %}
{% block title %}{% if post %}Edit Post{% else %}New Post{% endif %} — ArtNode{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/trix@2.0.8/dist/trix.css">
<script src="https://unpkg.com/trix@2.0.8/dist/trix.umd.min.js"></script>
<style>
  trix-toolbar { border: 1px solid var(--border); border-bottom: none; background: var(--surface); padding: 6px 8px; }
  trix-editor { display: block; min-height: 400px; border: 1px solid var(--border); padding: 16px; background: #fff; font-size: 0.88rem; line-height: 1.8; outline: none; }
  trix-editor:focus { border-color: var(--text); }
</style>
{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <a href="{{ url_for('blog.index') }}" style="font-size:0.75rem;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;">&larr; Blog</a>
    <div class="page-title" style="margin-top:4px;">{% if post %}Edit Post{% else %}New Post{% endif %}</div>
  </div>
</div>
<div class="page-body">
  <form method="POST" action="">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="translation_group_id" value="{{ group_id or '' }}">
    <div style="max-width:720px;">
      <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-xl);margin-bottom:var(--space-lg);">
        <div style="display:grid;grid-template-columns:1fr auto;gap:var(--space-md);margin-bottom:var(--space-md);">
          <div class="form-group" style="margin:0;">
            <label class="form-label">Title *</label>
            <input type="text" name="title" class="form-control" value="{{ post.title if post else '' }}" required>
          </div>
          <div class="form-group" style="margin:0;">
            <label class="form-label">Language</label>
            <select name="language" class="form-control">
              {% for lang in ["de","fr","it","en"] %}
              <option value="{{ lang }}" {% if (post and post.language == lang) or (not post and default_lang == lang) %}selected{% endif %}>{{ lang|upper }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="form-group" style="position:relative;z-index:1;">
          <label class="form-label">Body *</label>
          <input type="hidden" name="body" id="bodyInput">
          <div style="position:relative;z-index:1;">
            <trix-editor input="bodyInput"></trix-editor>
          </div>
        </div>
        <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.88rem;">
          <input type="checkbox" name="is_published" style="width:16px;height:16px;"
                 {% if post and post.is_published %}checked{% endif %}>
          Published (visible on public site)
        </label>
      </div>
      <div style="display:flex;gap:var(--space-md);justify-content:flex-end;">
        <a href="{{ url_for('blog.index') }}" class="btn btn-secondary">Cancel</a>
        <button type="submit" class="btn btn-primary">{% if post %}Save Changes{% else %}Create Post{% endif %}</button>
      </div>
    </div>
  </form>
</div>
{% endblock %}
{% block extra_js %}
<script>
  document.addEventListener("trix-initialize", function() {
    {% if post and post.body %}
    const editor = document.querySelector("trix-editor");
    editor.editor.loadHTML({{ post.body|tojson }});
    {% endif %}
  });
  document.querySelector("form").addEventListener("submit", function() {
    const editor = document.querySelector("trix-editor");
    document.getElementById("bodyInput").value = editor.innerHTML;
  });
</script>
{% endblock %}