<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:#FF0000;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <span style="color:#fff;font-size:0.7rem;font-weight:700;">YT</span>
        </div>
        <div style="flex:1;">
            <div style="font-size:0.8125rem;font-weight:700;color:var(--title);">YouTube Community</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:#eff6ff;color:#1d4ed8;">Scheduled</span>
    </div>

    <div style="padding:12px 14px;">
        <p style="font-size:0.8125rem;color:var(--title);margin:0 0 10px;line-height:1.5;">New video dropping tomorrow! We&#x27;re diving into the biggest mistakes YouTubers make in their first year — and how to avoid them. Drop a 🔥 if you want early access!</p>
        <div style="display:flex;align-items:center;justify-content:space-between;">
            <span style="font-size:0.75rem;color:var(--paragraph);">Fri 4 Apr 2026, 10:00am</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": "YouTube Community",
  "platformInitial": "YT",
  "platformColor": "#FF0000",
  "accountHandle": null,
  "status": "Scheduled",
  "statusBg": "#eff6ff",
  "statusColor": "#1d4ed8",
  "content": "New video dropping tomorrow! We're diving into the biggest mistakes YouTubers make in their first year — and how to avoid them. Drop a 🔥 if you want early access!",
  "thumbnail": null,
  "scheduledDate": "Fri 4 Apr 2026, 10:00am"
}

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.