{% extends "portal_base.html" %}
{% block title %}Postcard designer · Portal{% endblock %}
{% block topbar_title %}Postcard designer{% endblock %}
{% block portal_content %}
{% if api_error %}
<ul class="portal-flash" style="margin:0 0 16px">
  <li class="error">{{ api_error }}</li>
</ul>
{% endif %}

<div class="designer-layout pcm-designer">
  <div class="designer-controls">
    <div class="panel">
      <div class="panel-h"><h2>New design</h2></div>
      <div class="panel-b">
        <form method="post" action="{% url 'messaging:postcard_design_create' %}" class="form-grid">
          {% csrf_token %}
          <div class="field">
            <label for="id_design_name">Name</label>
            <input id="id_design_name" name="name" type="text" required
                   placeholder="March just-listed" value="{{ new_name }}">
          </div>
          <div class="field">
            <label for="id_design_size">Size</label>
            <select id="id_design_size" name="size" required>
              {% for code, label in size_choices %}
              <option value="{{ code }}"{% if code == new_size %} selected{% endif %}>{{ label }} ({{ code }})</option>
              {% endfor %}
            </select>
          </div>
          <button class="btn btn-primary" type="submit">Create in PCM designer</button>
        </form>
        <p class="library-hint" style="margin-top:12px">
          Opens PCM Integrations editor in the frame. Artwork stays on their side;
          we store the design id for campaigns.
        </p>
      </div>
    </div>

    <div class="panel">
      <div class="panel-h"><h2>Your designs</h2></div>
      <div class="panel-b" style="padding:0">
        <table class="table">
          <thead>
            <tr>
              <th>Name</th>
              <th>ID</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for d in designs %}
            <tr{% if d.design_id == active_design_id %} class="is-active"{% endif %}>
              <td>{{ d.name }}</td>
              <td class="muted">{{ d.design_id }}</td>
              <td>
                <a href="{% url 'messaging:postcard_designer' %}?design_id={{ d.design_id }}">Edit</a>
              </td>
            </tr>
            {% empty %}
            <tr><td colspan="3" class="empty-state">No designs yet — create one above.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    {% if active_design_id %}
    <div class="panel">
      <div class="panel-h"><h2>Save for campaigns</h2></div>
      <div class="panel-b">
        <form method="post" action="{% url 'messaging:postcard_design_save' %}" class="form-grid">
          {% csrf_token %}
          <input type="hidden" name="design_id" value="{{ active_design_id }}">
          <input type="hidden" name="size" value="{{ active_size }}">
          <div class="field">
            <label for="id_template_name">Template name</label>
            <input id="id_template_name" name="template_name" type="text" required
                   value="{{ active_name }}">
          </div>
          <button class="btn btn-primary" type="submit">Save as postcard template</button>
        </form>
        <p class="library-hint" style="margin-top:12px">
          Saved templates appear when composing a postcard campaign.
        </p>
      </div>
    </div>
    {% endif %}

    {% if saved_templates %}
    <div class="panel">
      <div class="panel-h"><h2>Saved templates</h2></div>
      <div class="panel-b" style="padding:0">
        <table class="table">
          <thead>
            <tr><th>Name</th><th>Design</th><th></th></tr>
          </thead>
          <tbody>
            {% for t in saved_templates %}
            <tr>
              <td>{{ t.name }}</td>
              <td class="muted">{{ t.postcard_front.design_id }}</td>
              <td>
                <a href="{% url 'messaging:postcard_designer' %}?design_id={{ t.postcard_front.design_id }}">Open</a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% endif %}
  </div>

  <div class="designer-preview-col panel">
    <div class="panel-h">
      <h2>{% if active_design_id %}PCM editor · design {{ active_design_id }}{% else %}Editor{% endif %}</h2>
    </div>
    <div class="panel-b pcm-iframe-wrap">
      {% if embed_url %}
      <iframe
        title="PCM postcard designer"
        src="{{ embed_url }}"
        allow="clipboard-write"
      ></iframe>
      {% else %}
      <div class="empty-state" style="padding:48px 24px;text-align:center">
        Create a design or pick one from the list to open the PCM editor here.
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}