<div class="card" style="font-family:'Satoshi',sans-serif;overflow:hidden;">
<div style="display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--primary-light);">
<div style="width:28px;height:28px;border-radius:50%;background:#000000;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<span style="color:#fff;font-size:0.7rem;font-weight:700;">X</span>
</div>
<div style="flex:1;">
<div style="font-size:0.8125rem;font-weight:700;color:var(--title);">Twitter / X</div>
<div style="font-size:0.7rem;color:var(--paragraph);"></div>
</div>
<span style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;padding:3px 8px;border-radius:10px;background:#fef2f2;color:#b91c1c;">Failed</span>
</div>
<div style="padding:12px 14px;">
<p style="font-size:0.8125rem;color:var(--title);margin:0 0 10px;line-height:1.5;">Just published a new video — link in bio!</p>
<div style="display:flex;align-items:center;justify-content:space-between;">
<span style="font-size:0.75rem;color:var(--paragraph);">Wed 2 Apr 2026, 2:00pm</span>
<div style="display:flex;gap:10px;">
<a href="#" style="font-size:0.75rem;font-weight:700;color:var(--primary-color);text-decoration:none;">Edit</a>
<a href="#" style="font-size:0.75rem;font-weight:700;color:var(--paragraph);text-decoration:none;">Delete</a>
</div>
</div>
</div>
</div>
<div class="card" style="font-family:'Satoshi',sans-serif;overflow:hidden;">
{{! Platform header }}
<div style="display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--primary-light);">
<div style="width:28px;height:28px;border-radius:50%;background:{{platformColor}};display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<span style="color:#fff;font-size:0.7rem;font-weight:700;">{{platformInitial}}</span>
</div>
<div style="flex:1;">
<div style="font-size:0.8125rem;font-weight:700;color:var(--title);">{{platform}}</div>
<div style="font-size:0.7rem;color:var(--paragraph);">{{accountHandle}}</div>
</div>
<span style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;padding:3px 8px;border-radius:10px;background:{{statusBg}};color:{{statusColor}};">{{status}}</span>
</div>
{{! Post content }}
<div style="padding:12px 14px;">
{{#if thumbnail}}
<div style="border-radius:6px;overflow:hidden;margin-bottom:10px;aspect-ratio:16/9;background:var(--primary-light);">
<img src="{{thumbnail}}" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
</div>
{{/if}}
<p style="font-size:0.8125rem;color:var(--title);margin:0 0 10px;line-height:1.5;">{{content}}</p>
<div style="display:flex;align-items:center;justify-content:space-between;">
<span style="font-size:0.75rem;color:var(--paragraph);">{{scheduledDate}}</span>
<div style="display:flex;gap:10px;">
<a href="#" style="font-size:0.75rem;font-weight:700;color:var(--primary-color);text-decoration:none;">Edit</a>
<a href="#" style="font-size:0.75rem;font-weight:700;color:var(--paragraph);text-decoration:none;">Delete</a>
</div>
</div>
</div>
</div>
{
"platform": "Twitter / X",
"platformInitial": "X",
"platformColor": "#000000",
"accountHandle": null,
"status": "Failed",
"statusBg": "#fef2f2",
"statusColor": "#b91c1c",
"content": "Just published a new video — link in bio!",
"thumbnail": null,
"scheduledDate": "Wed 2 Apr 2026, 2:00pm"
}
Represents a scheduled or published social media post in the Social Media Planner. Appears in: Social Media Planner calendar and list view, Dashboard scheduled posts block.