{% extends "base.html" %}

{% block title %}Custom page: {{ heading }} - Makenotwork{% endblock %}

{% block head %}
<style>
  .cp-editor { max-width: 1200px; margin: 0 auto; padding: 1rem; }
  .cp-editor-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
  .cp-editor-actions { display: flex; gap: 1rem; }
  .cp-intro { color: var(--muted, #666); margin: .25rem 0 1rem; }
  .cp-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
  .cp-editor-form { display: flex; flex-direction: column; gap: .35rem; }
  .cp-code { width: 100%; min-height: 220px; font-family: var(--font-mono, ui-monospace, monospace); font-size: .85rem; line-height: 1.4; resize: vertical; }
  .cp-editor-buttons { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
  .cp-preview-pane { border: 1px solid var(--detail, #ccc); border-radius: 4px; overflow: hidden; }
  .cp-preview-bar { font-size: .8rem; padding: .3rem .6rem; background: var(--light-background, #f2f2f2); border-bottom: 1px solid var(--detail, #ccc); }
  .cp-preview { width: 100%; height: 520px; border: 0; background: #fff; display: block; }
  .cp-blocked { margin-top: 1.25rem; }
  .cp-blocked-title { font-weight: 600; margin-bottom: .5rem; }
  .cp-blocked-empty { color: var(--muted, #666); }
  .cp-blocked-list { list-style: none; padding: 0; margin: 0; }
  .cp-blocked-list li { padding: .4rem 0; border-bottom: 1px solid var(--detail, #eee); font-size: .85rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
  .cp-blocked-kind { font-weight: 600; }
  .cp-blocked-loc { color: var(--muted, #666); }
  .cp-blocked-val { background: var(--light-background, #f2f2f2); padding: 0 .25rem; }
  .cp-status.cp-ok { color: var(--success, #2a7); }
  .cp-status.cp-err { color: var(--warning, #b00); }
  .cp-reset { margin-top: 1.5rem; }
  .cp-locked-banner { margin: .5rem 0 1rem; padding: .75rem 1rem; border: 1px solid var(--warning, #b00); border-radius: 4px; background: var(--light-background, #fbeaea); }
  @media (max-width: 800px) { .cp-editor-grid { grid-template-columns: 1fr; } }
</style>
{% endblock %}

{% block content %}
<div class="cp-editor">
  <header class="cp-editor-head">
    <h1>Custom page: {{ heading }}</h1>
    <nav class="cp-editor-actions">
      <a href="{{ live_url }}" target="_blank" rel="noopener">View live</a>
      <a href="/docs/custom-pages" target="_blank" rel="noopener">Guide</a>
    </nav>
  </header>
  <p class="cp-intro">
    Write your own HTML and CSS. No JavaScript, and every link must point to
    makenot.work. Anything off-platform is listed below and stripped on save.
  </p>

  {% if locked %}
  <div class="cp-locked-banner">
    Your custom pages are locked by moderation. Editing is disabled and your
    pages currently show the platform default. Contact info@makenot.work.
  </div>
  {% endif %}

  <div class="cp-editor-grid">
    <form class="cp-editor-form" hx-post="{{ base_path }}" hx-target="#cp-status" hx-swap="innerHTML">
      {% if let Some(token) = csrf_token %}<input type="hidden" name="_csrf" value="{{ token }}">{% endif %}

      <label for="cp-html">HTML</label>
      <textarea id="cp-html" name="custom_html" class="cp-code" spellcheck="false"
                {% if locked %}disabled{% endif %}
                hx-post="{{ base_path }}/draft" hx-trigger="keyup changed delay:1s"
                hx-include="closest form" hx-target="#cp-blocked" hx-swap="outerHTML">{{ html_value }}</textarea>

      <label for="cp-css">CSS</label>
      <textarea id="cp-css" name="custom_css" class="cp-code" spellcheck="false"
                {% if locked %}disabled{% endif %}
                hx-post="{{ base_path }}/draft" hx-trigger="keyup changed delay:1s"
                hx-include="closest form" hx-target="#cp-blocked" hx-swap="outerHTML">{{ css_value }}</textarea>

      <div class="cp-editor-buttons">
        <button type="submit" class="btn-primary"{% if locked %} disabled{% endif %}>Save and publish</button>
        <span id="cp-status" class="cp-status"></span>
      </div>
    </form>

    <div class="cp-preview-pane">
      <div class="cp-preview-bar">Preview (updates as you type)</div>
      <iframe id="cp-preview" class="cp-preview" title="Live preview" src="{{ preview_url }}"></iframe>
    </div>
  </div>

  <section class="cp-blocked-section">
    <h2 class="subsection-title">Blocked references</h2>
    {% include "partials/custom_page_blocked.html" %}
  </section>

  <form class="cp-reset" method="post" action="{{ base_path }}/reset"
        onsubmit="return confirm('Reset this page to the platform default? This clears your custom HTML and CSS.');">
    {% if let Some(token) = csrf_token %}<input type="hidden" name="_csrf" value="{{ token }}">{% endif %}
    <button type="submit" class="btn-danger">Reset to default</button>
  </form>
</div>
{% endblock %}