{% extends "portal_base.html" %}
{% block title %}Post · Portal{% endblock %}
{% block topbar_title %}Social post{% endblock %}
{% block portal_content %}
<div class="toolbar">
  <span class="badge badge-{{ post.status }}">{{ post.get_status_display }}</span>
  <a class="btn btn-sm btn-ghost" href="{% url 'social:post_list' %}">← All posts</a>
</div>
<div class="split">
  <div class="panel">
    <div class="panel-h"><h2>Caption</h2></div>
    <div class="panel-b">
      {% if post.media %}
      <div style="display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px">
        {% for item in post.media %}
          {% if item.type == "video" %}
          <video src="{{ item.url }}" controls playsinline style="max-width:100%;max-height:280px;border-radius:8px"></video>
          {% else %}
          <img src="{{ item.url }}" alt="{{ item.filename|default:'Image' }}" style="max-width:100%;max-height:280px;border-radius:8px;object-fit:contain">
          {% endif %}
        {% endfor %}
      </div>
      {% endif %}
      <div class="preview-pane" style="white-space:pre-wrap">{{ post.body }}</div>
      {% if post.scheduled_for %}
      <p class="hint-block">Scheduled {{ post.scheduled_for|date:"M j, Y g:i A" }}</p>
      {% endif %}
      {% if post.ollama_prompt %}
      <p class="hint-block">AI prompt: {{ post.ollama_prompt }}</p>
      {% endif %}
    </div>
  </div>
  <div class="panel">
    <div class="panel-h"><h2>Targets</h2></div>
    <div class="panel-b" style="padding:0">
      <table class="table">
        <thead><tr><th>Account</th><th>Platform</th><th>Status</th></tr></thead>
        <tbody>
          {% for target in post.targets.all %}
          <tr>
            <td>{{ target.account.label }}</td>
            <td>{{ target.get_platform_display }}</td>
            <td><span class="badge badge-{{ target.status }}">{{ target.get_status_display }}</span></td>
          </tr>
          {% empty %}
          <tr><td colspan="3" class="empty-state">No targets attached.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}