Social Post Card: Published

<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>