{% extends 'base.html' %}
{% block title %}Posts{% endblock %}
{% block page_title %}Posts{% endblock %}
{% block topbar_actions %}
  <a href="{{ url_for('posts.create') }}" class="btn btn-primary btn-sm">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    New Post
  </a>
{% endblock %}

{% block content %}
<!-- Filters -->
<div class="filters-bar">
  <form method="GET" style="display:flex;gap:10px;flex-wrap:wrap">
    <select name="status" class="filter-select" onchange="this.form.submit()">
      <option value="all" {% if status_filter == 'all' %}selected{% endif %}>All Statuses</option>
      <option value="draft"     {% if status_filter == 'draft' %}selected{% endif %}>Draft</option>
      <option value="scheduled" {% if status_filter == 'scheduled' %}selected{% endif %}>Scheduled</option>
      <option value="published" {% if status_filter == 'published' %}selected{% endif %}>Published</option>
      <option value="failed"    {% if status_filter == 'failed' %}selected{% endif %}>Failed</option>
    </select>
    <select name="page_id" class="filter-select" onchange="this.form.submit()">
      <option value="all" {% if page_filter == 'all' %}selected{% endif %}>All Pages</option>
      {% for p in pages %}
      <option value="{{ p.id }}" {% if page_filter|string == p.id|string %}selected{% endif %}>{{ p.page_name }}</option>
      {% endfor %}
    </select>
    <button type="submit" class="btn btn-secondary btn-sm">Filter</button>
  </form>
  <span style="margin-left:auto;font-size:0.8rem;color:var(--text-muted)">{{ posts|length }} post(s)</span>
</div>

{% if posts %}
<div style="display:flex;flex-direction:column;gap:12px">
  {% for post in posts %}
  <div class="post-card">
    <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px">
      <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
        {% if post.title %}
          <span style="font-weight:700;font-size:0.95rem;color:var(--text-primary)">{{ post.title }}</span>
        {% endif %}
        <span class="badge badge-{% if post.status == 'published' %}success{% elif post.status == 'failed' %}danger{% elif post.status == 'scheduled' %}warning{% else %}muted{% endif %}">
          {{ post.status }}
        </span>
        {% if post.media_type and post.media_type != 'none' %}
          <span class="badge badge-info">{{ post.media_type }}</span>
        {% endif %}
      </div>
      <span style="font-size:0.76rem;color:var(--text-muted);white-space:nowrap">{{ post.created_at.strftime('%b %d, %Y') }}</span>
    </div>

    <div class="post-content-preview">{{ post.content }}</div>

    {% if post.schedules %}
    <div class="post-meta">
      {% for s in post.schedules %}
        <span>📅 {{ s.schedule_type }} · {{ s.page.page_name }} · next: {{ s.next_run_at.strftime('%b %d %H:%M') if s.next_run_at else 'N/A' }}
          <span class="badge badge-{% if s.is_active %}success{% else %}muted{% endif %}" style="margin-left:4px">{% if s.is_active %}active{% else %}paused{% endif %}</span>
        </span>
      {% endfor %}
    </div>
    {% endif %}

    <div class="post-actions">
      <a href="{{ url_for('posts.edit', post_id=post.id) }}" class="btn btn-secondary btn-sm">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
        Edit
      </a>
      <form method="POST" action="{{ url_for('posts.publish_now', post_id=post.id) }}" style="display:inline">
        <button type="submit" class="btn btn-primary btn-sm" data-confirm="Publish this post immediately to all scheduled pages?">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
          Publish Now
        </button>
      </form>
      <form method="POST" action="{{ url_for('posts.delete', post_id=post.id) }}" style="display:inline">
        <button type="submit" class="btn btn-danger btn-sm" data-confirm="Delete this post permanently?">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
          Delete
        </button>
      </form>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="empty-state">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
  <h3>No posts yet</h3>
  <p>Create your first post and schedule it to publish on your Facebook Pages.</p>
  <a href="{{ url_for('posts.create') }}" class="btn btn-primary">Create Your First Post</a>
</div>
{% endif %}
{% endblock %}