feat: integrate elite social post prompt skill into AI remixer and dashboard UI

ai-content.js

@@ -1,4 +1,10 @@
 const apiCaller = require('./skills/api_caller');
+const fs = require('fs');
+const path = require('path');
+
+// Load the social post skill (best practice prompts & frameworks)
+const SKILL_PATH = path.join(__dirname, 'prompts', 'social_post_skill.md');
+const SOCIAL_SKILL = fs.existsSync(SKILL_PATH) ? fs.readFileSync(SKILL_PATH, 'utf-8') : '';
 
 class AIContentRemixer {
     async remix(scrapedData) {
@@ -6,61 +12,128 @@ class AIContentRemixer {
             return { success: false, error: 'Input post data invalid' };
         }
 
-        const prompt = `You are a social media growth expert. Below is an original post from ${scrapedData.platform}.
-Your mission is to REMIX this into 3 high-performance content variants for multiple platforms.
+        const prompt = `You are an elite social media content strategist and copywriter for the Indonesian creator/B2B market.
+You have mastered the following best practices and frameworks. Apply them rigorously:
 
-Original Content:
-"${scrapedData.text}"
+=== SOCIAL POST SKILL (MASTER KNOWLEDGE) ===
+${SOCIAL_SKILL.substring(0, 4000)}
+=== END SKILL ===
 
-Brand Voice: Authoritative yet accessible, professional but engaging.
-Language: Provide each variant in BOTH English and Bahasa Indonesia.
+---
 
-PLATFORM CONSTRAINTS:
-1. Instagram (IG): Max 2200 characters. Hook-focused.
-2. Threads: STRICT MAX 500 characters.
-3. LinkedIn: Professional tone. Max 3000 chars.
-4. X (Twitter): STRICT MAX 280 characters.
-5. Facebook: Informative. No strict limit.
-6. Pinterest: Visual & Keyword focused. Max 500 chars for description.
+YOUR TASK: Remix the source content below into 3 high-performance social media post variants.
+Apply the 4E framework (Emotion, Edge, Ease, Exposure) to ALL variants.
+Use HOOK FORMULAS from the skill library above (Curiosity, Bold Claim, Problem-Solution, etc.)
 
-VARIANT 1: THE HOOK-DRIVEN LITE (Single Post)
-- Focus: Highly shareable, concise, bold statement.
+SOURCE CONTENT (from ${scrapedData.platform || 'web'}):
+"${scrapedData.text.substring(0, 1500)}"
+${scrapedData.engagement ? `Engagement signals: ${JSON.stringify(scrapedData.engagement)}` : ''}
 
-VARIANT 2: THE CAROUSEL VALUE BOMB (Carousel)
-- Focus: 3-5 Slide Breakdown.
-- Each slide needs its own text and visual prompt.
+BRAND VOICE: Authoritative yet accessible. Professional but genuinely human.
+LANGUAGES: Generate BOTH English (EN) and Bahasa Indonesia (ID) for every platform.
+NICHE CONTEXT: AI tools, productivity, business growth, creator economy.
 
-VARIANT 3: THE STORY-TELLING ADAPTATION (Single Post)
-- Focus: Reframe it as a personal or professional observation.
+---
 
-OUTPUT FORMAT: JSON ONLY.
-Structure:
-{
-    "variant_1": { ... },
-    "variant_2": {
-        "title": "...",
-        "slides": [
-            { "text_en": "...", "text_id": "...", "visual_prompt": "..." },
-            ...
-        ],
-        "ig_en": "...", "ig_id": "...", // Summary for caption
-        ...
-    },
-    ...
-}
+PLATFORM CHARACTER LIMITS (STRICT — do NOT exceed):
+- Instagram (ig): Max 2,200 chars. First 125 chars = visible hook. End with save/tag CTA.
+- Threads: STRICT MAX 480 chars. Conversational. End with a question.
+- LinkedIn: Max 3,000 chars. First 2 lines must force 'see more' click. Short paragraphs.
+- X / Twitter (x): STRICT MAX 270 chars. Sharp. Opinionated. 1 idea only.
+- Facebook (fb): Max 250 chars recommended. Warm. Community-focused. Ask a question.
+- Pinterest: Max 500 chars. Keyword-rich. Aspirational. Tells them what they'll GET.
+
+---
+
+VARIANT 1: HOOK-DRIVEN SINGLE POST
+Use a BOLD CLAIM or CURIOSITY hook formula. Punchy, highly shareable.
+Add: 8-10 niche hashtags, content pillar type (educate/inspire/entertain/engage/convert)
 
-IMPORTANT: Ensure "threads_..." fields are < 480 chars and "x_..." fields are < 270 chars.`;
+VARIANT 2: CAROUSEL VALUE BOMB (Educational Multi-Slide)
+Generate 5-7 slides. Structure:
+- Slide 1: Bold hook headline (makes them swipe within 2 seconds)
+- Slides 2-5: One value point per slide (numbered, max 25 words each)  
+- Slide 6: Summary/TL;DR
+- Slide 7: CTA slide ("Save this 🔖" or "Comment your answer 👇")
+Each slide needs: text_en, text_id, visual_prompt (specify if text/face → use Nano Banana routing)
+
+VARIANT 3: PERSONAL STORY / CONTRARIAN TAKE
+Use a STORYTELLING or CONTRARIAN hook. Build narrative arc: situation → insight → result.
+End with an engaging discussion question.
+
+---
+
+OUTPUT: JSON ONLY. No markdown. No commentary. Valid parseable JSON.
+
+{
+  "variant_1": {
+    "title": "Post title for internal reference",
+    "pillar": "educate|inspire|entertain|engage|convert",
+    "ig_en": "...", "ig_id": "...",
+    "threads_en": "...", "threads_id": "...",
+    "linkedin_en": "...", "linkedin_id": "...",
+    "x_en": "...", "x_id": "...",
+    "fb_en": "...", "fb_id": "...",
+    "pinterest_en": "...", "pinterest_id": "...",
+    "visual_prompt": "Detailed image generation prompt. Mention if text/face needed.",
+    "hashtags": ["#tag1", "#tag2"],
+    "best_time_to_post": "e.g. Tuesday 19:00 WIB",
+    "engagement_notes": "Why this will drive engagement"
+  },
+  "variant_2": {
+    "title": "...",
+    "pillar": "educate",
+    "slides": [
+      { "slide": 1, "text_en": "...", "text_id": "...", "visual_prompt": "..." },
+      { "slide": 2, "text_en": "...", "text_id": "...", "visual_prompt": "..." },
+      { "slide": 3, "text_en": "...", "text_id": "...", "visual_prompt": "..." },
+      { "slide": 4, "text_en": "...", "text_id": "...", "visual_prompt": "..." },
+      { "slide": 5, "text_en": "...", "text_id": "...", "visual_prompt": "..." }
+    ],
+    "ig_en": "Carousel caption summary for Instagram (with hook + swipe CTA)",
+    "ig_id": "...",
+    "threads_en": "...", "threads_id": "...",
+    "linkedin_en": "Document post caption for LinkedIn",
+    "linkedin_id": "...",
+    "x_en": "...", "x_id": "...",
+    "hashtags": ["..."],
+    "visual_prompt": "Cover slide visual prompt",
+    "best_time_to_post": "...",
+    "engagement_notes": "..."
+  },
+  "variant_3": {
+    "title": "...",
+    "pillar": "inspire|engage",
+    "ig_en": "...", "ig_id": "...",
+    "threads_en": "...", "threads_id": "...",
+    "linkedin_en": "...", "linkedin_id": "...",
+    "x_en": "...", "x_id": "...",
+    "fb_en": "...", "fb_id": "...",
+    "pinterest_en": "...", "pinterest_id": "...",
+    "visual_prompt": "...",
+    "hashtags": ["..."],
+    "best_time_to_post": "...",
+    "engagement_notes": "..."
+  }
+}`;
 
-        console.log(`[AI Remix] Generating variants...`);
+        console.log(`[AI Remix] Generating variants with Social Post Skill...`);
         const result = await apiCaller.callOpenRouter([{ role: 'user', content: prompt }]);
 
         if (result.success) {
             try {
-                // Strip markdown wrappers
                 const cleanJson = result.data.replace(/```json|```/g, '').trim();
                 const data = JSON.parse(cleanJson);
                 return { success: true, data };
             } catch (error) {
+                // Try to extract JSON from response if mixed with text
+                const jsonMatch = result.data.match(/\{[\s\S]*\}/);
+                if (jsonMatch) {
+                    try {
+                        const data = JSON.parse(jsonMatch[0]);
+                        return { success: true, data };
+                    } catch(e2) {}
+                }
                 console.error('[AI Remix] JSON parse error:', error.message);
                 return { success: false, error: 'Failed to parse AI response' };
             }

prompts/social_post_skill.md

@@ -0,0 +1,308 @@
+# 🎯 Social Post Creation Skill
+# VinOS Social Autopilot — Master Prompt Library
+# Based on best practices from Hootsuite, Buffer, Sprinklr, SocialInsider (2025)
+
+---
+
+## THE CORE FRAMEWORK: 4E Model
+
+Every great social post must satisfy at least 3 of these 4:
+- **Emotion** — makes someone feel something (awe, surprise, relief, pride, FOMO)
+- **Edge** — bold opinion, contrarian take, or unexpected angle
+- **Ease** — scannable in 3 seconds, clear visual hierarchy
+- **Exposure** — repurposable across platforms with minor adaptation
+
+---
+
+## HOOK FORMULAS (First 1-3 Lines Are Everything)
+
+### Category A: Curiosity / Open Loop
+- "Nobody talks about this, but [INSIGHT]..."
+- "I was told NOT to share this. Here it is anyway:"
+- "What [experts/gurus] won't tell you about [TOPIC]:"
+- "The craziest thing happened when I tried [ACTION]..."
+- "Here's what I wish I knew before [COMMON MISTAKE]:"
+- "I did [EXPERIMENT] for [X] days. Here's what actually happened:"
+
+### Category B: Bold Claim / Pattern Interrupt
+- "Stop [COMMON ACTION]. It's costing you [RESULT]."
+- "[NUMBER] things that separate [WINNERS] from [LOSERS]:"
+- "Hot take: [CONTRARIAN OPINION]."
+- "This changed how I think about [TOPIC] forever:"
+- "Most [AUDIENCE] are doing [THING] wrong. Here's why:"
+
+### Category C: Problem-Solution
+- "The #1 mistake every [IDEAL AUDIENCE] makes is..."
+- "Struggling with [PROBLEM]? This [SOLUTION] fixed it in [TIMEFRAME]:"
+- "If [COMMON PAIN POINT] keeps happening to you, read this:"
+- "Why your [METRIC] isn't growing (and the simple fix):"
+
+### Category D: FOMO / Urgency
+- "Everyone in [NICHE] is switching to [THING]. Here's why:"
+- "Before you [ACTION], you need to know this:"
+- "This is what [SUCCESSFUL PEOPLE] do on [DAY/TIME]:"
+
+### Category E: Storytelling / Personal
+- "Two years ago, I had [PROBLEM]. Today, [TRANSFORMATION]."
+- "I almost quit [THING]. Then I tried [SOLUTION]."
+- "Real talk: [HONEST CONFESSION RELATED TO NICHE]."
+
+---
+
+## PLATFORM-SPECIFIC WRITING RULES
+
+### 📸 Instagram (Max 2,200 chars — Aim for 125-150 visible)
+- **Hook**: First 125 chars must stand alone (shown before "more")
+- **Structure**: Hook → Value (3-5 points or story) → CTA
+- **Emojis**: Use 2-4 max, placed at natural pauses
+- **Hashtags**: 5-10 niche-specific, placed at end or in first comment
+- **Best post types**: Carousels (highest saves), Reels (highest reach), Quote graphics
+- **Best CTAs**: "Save this for later 🔖", "Drop a ❤️ if this resonates", "Tag someone who needs to see this"
+- **Avoid**: Posting links in caption (use "link in bio" instead)
+
+### 🧵 Threads (Max 500 chars per post)
+- **Tone**: Conversational, real, unpolished is better
+- **Structure**: 1 powerful idea per thread. No fluff.
+- **Best format**: Short punchy take + follow-up explaining it
+- **Engagement trigger**: End with an open question or hot take
+- **Best CTAs**: "What's your take?", "Agree or disagree?", "Repost if this helped 🔁"
+- **Avoid**: Corporate-speak, over-formatted bullet lists
+
+### 💼 LinkedIn (Max 3,000 chars — Aim for 500-1,200)
+- **Hook**: First 2 lines must force a "see more" click
+- **Structure**: Personal story/bold claim → Breakdown (numbered or short paras) → Takeaway → CTA
+- **Formatting**: Short sentences (max 15 words), single-sentence paragraphs, wide white space
+- **Emojis**: Use sparingly — 1-3 for section breaks only
+- **Best post types**: Personal stories, frameworks, "I did X" experiments, industry hot takes
+- **Best CTAs**: "What would you add?", "Repost if this was useful ♻️", "Follow for daily insights on [TOPIC]"
+- **Avoid**: Pure promotional content without storytelling; walls of text
+
+### 🐦 X / Twitter (Max 280 chars)
+- **Hook**: The entire post IS the hook
+- **Structure**: 1 sharp idea. If more, use a thread (1/ 2/ 3/)
+- **Tone**: Direct, opinionated, witty
+- **Best format**: "Unpopular opinion:", numbered lists in threads, quote format
+- **Best CTAs**: "RT if you agree", "What am I missing?", "Thread 🧵 below:"
+- **Avoid**: Filler words, passive voice, hedging
+
+### 📘 Facebook (Max 63,206 — Aim for 80-250 for organic)
+- **Tone**: Community-oriented, warm, relatable
+- **Best format**: Short story + question, polls, "agree if..." posts
+- **Best CTAs**: "Comment below 👇", "Share with someone who needs this", "Tag a friend"
+- **Avoid**: Overly promotional, hard-sell language
+
+### 📌 Pinterest (Max 500 chars description)
+- **Tone**: Aspirational, keyword-rich, instructional
+- **Structure**: What it is → Why it matters → What to do
+- **SEO**: Include 3-5 searchable keywords naturally in description
+- **Visual prompt**: Bright, clean, vertical (2:3 ratio), text overlay optional
+- **Best CTAs**: "Save for later 📌", "Click for the full guide"
+- **Avoid**: Vague descriptions; always tell them what they'll GET
+
+---
+
+## CAROUSEL POST BLUEPRINT (Instagram / LinkedIn)
+
+### Slide Structure (5-8 slides is optimal)
+```
+SLIDE 1 — THE HOOK (2-second audition)
+- Bold headline that teases the value
+- Visual: Eye-catching, contrasting colors, minimal text
+- Example: "5 AI Tools That Replaced My $500/month Software Stack"
+
+SLIDE 2 — THE PROMISE / SETUP
+- Brief context: Who this is for, what problem it solves
+- Arrow/swipe CTA: "Swipe to see all 5 →"
+
+SLIDES 3-6 — THE VALUE (1 point per slide)
+- Each slide = 1 tip / 1 tool / 1 step
+- Format: [NUMBER]. [TOOL NAME] → [What it does] + [Why it's better]
+- Visual: Icon or screenshot + max 15 words
+
+SLIDE 7 — THE SUMMARY / RECAP
+- "TL;DR:" or "In Summary:" + 3 bullet points
+- Reinforces the key takeaways
+
+SLIDE 8 — THE CTA SLIDE
+- "Which one will you try first? Comment below 👇"
+- Or: "Save this post 🔖 — you'll thank yourself later"
+- Include your handle / watermark
+```
+
+### Carousel Visual Prompts (for image gen)
+- Slide 1: Bold text overlay on gradient or blurred background, high contrast
+- Value slides: Clean white/dark background, icon + short bold text, brand colors
+- Always include: Slide number indicator (3/8), consistent font, consistent color palette
+
+---
+
+## CONTENT PILLAR SYSTEM (What Topics to Post)
+
+Rotate across these 5 pillars each week:
+
+| Pillar | Purpose | Example |
+|--------|---------|---------|
+| **Educate** | Teach something useful (40%) | "How to write a hook in 3 steps" |
+| **Inspire** | Motivate + build emotional connection (20%) | "I grew from 0 to 10K in 6 months. Here's how:" |
+| **Entertain** | Relatable, meme, behind-scenes (15%) | "POV: Me at 11pm generating AI posts 😅" |
+| **Engage** | Polls, questions, debates (15%) | "Hot take: Carousels beat Reels for growth. Agree?" |
+| **Convert** | Promote offers with storytelling (10%) | "This is the exact system I used to get my first client:" |
+
+---
+
+## ENGAGEMENT TRIGGERS (Add to Any Post)
+
+### Comments
+- Ask ONE specific question (not "what do you think?")
+- Give them a binary choice: "Are you Team A or Team B?"
+- "Drop your answer in 3 words or less 👇"
+
+### Saves/Bookmarks
+- "Bookmark this. You'll need it later."
+- "Save this before you [common action]"
+- Lists and frameworks always get saved
+
+### Reshares/Reposts
+- "Tag someone who needs to hear this"
+- "Repost if you agree ♻️"
+- Content that validates an identity ("If you're a [type of person]...")
+
+### Follows
+- "Follow for daily posts on [topic]"
+- "I post [cadence] about [topic]. Follow if that's your thing."
+
+---
+
+## AI CONTENT GENERATION PROMPT TEMPLATE
+
+Use this as the master prompt for VinOS AI remixing:
+
+```
+You are an expert social media content strategist and copywriter for the Indonesian B2B/creator market.
+
+PERSONA: [BRAND NAME] — [ONE LINE BRAND DESCRIPTION]
+NICHE: [AI tools / productivity / marketing / etc.]
+TONE: [professional-casual / inspirational / direct / witty]
+LANGUAGE: Generate both English (EN) and Indonesian (ID) versions.
+
+SOURCE CONTENT: [SCRAPED TEXT / TOPIC TO WRITE ABOUT]
+
+YOUR TASK: Generate 3 post variants following the 4E framework:
+
+VARIANT 1 — HOOK-DRIVEN SINGLE POST
+- Format: Hook (1-2 lines) + Value (3-5 bullet points) + CTA
+- Use one of the CURIOSITY or BOLD CLAIM hook formulas
+- Keep it punchy. No filler.
+
+VARIANT 2 — CAROUSEL VALUE BOMB (Educational)  
+- Generate a 5-7 slide carousel
+- Each slide: [slide number, headline text (max 10 words), body text (max 25 words), visual_prompt]
+- Slide 1 = hook. Final slide = CTA.
+
+VARIANT 3 — PERSONAL STORY / CONTRARIAN TAKE
+- Open with a personal observation or hot take
+- Build a narrative arc: situation → challenge → insight → result
+- End with an engaging question
+
+FOR EACH VARIANT OUTPUT:
+{
+  "title": "...",
+  "ig_en": "...", // Max 2,200 chars, hook in first 125
+  "ig_id": "...",
+  "threads_en": "...", // Max 480 chars
+  "threads_id": "...",
+  "linkedin_en": "...", // Max 3,000 chars, professional
+  "linkedin_id": "...",
+  "x_en": "...", // Max 270 chars (leave room for hashtags)
+  "x_id": "...",
+  "fb_en": "...", // Max 250 chars recommended
+  "fb_id": "...",
+  "pinterest_en": "...", // Max 500 chars, keyword-rich
+  "pinterest_id": "...",
+  "visual_prompt": "...", // Detailed image gen prompt, specify if text/face needed
+  "hashtags": ["...", "..."], // 8-10 niche hashtags
+  "pillar": "educate|inspire|entertain|engage|convert",
+  "best_time_to_post": "...", // Recommendation
+  "engagement_notes": "..." // What makes this post likely to convert
+}
+```
+
+---
+
+## VISUAL CONTENT PROMPT FORMULAS
+
+### For Standard Social Visuals (→ Hive AI / NVIDIA)
+```
+[STYLE], [SUBJECT], [MOOD], [COMPOSITION], [LIGHTING], [COLOR PALETTE]
+
+Example: "Cinematic flat lay, sleek laptop and coffee on minimal marble desk, 
+focused morning productivity mood, top-down composition, soft warm morning light, 
+neutral whites and warm gold tones, high resolution"
+```
+
+### For Text-Heavy / Typography Images (→ Nano Banana / Gemini 3.1)
+```
+"Clean [dark/light] background, bold [FONT STYLE] typography displaying: 
+'[EXACT TEXT]', [BRAND COLORS], modern minimal design, high contrast, 
+perfectly legible text, social media post format 1:1 ratio"
+```
+
+### For Carousel Slide Covers
+```
+"Bold social media carousel cover slide, '[HEADLINE]' text centered in 
+[BRAND COLOR] background, [ACCENT SHAPE] geometric elements, clean sans-serif 
+font, high contrast, professional design, 1:1 ratio"
+```
+
+### For Person/Face Posts (→ Nano Banana)
+```
+"Professional portrait, [DESCRIPTION OF PERSON], [ENVIRONMENT/SETTING], 
+[LIGHTING STYLE], authentic expression, lifestyle photography feel, 
+[COLOR GRADING], high detail"
+```
+
+---
+
+## POSTING SCHEDULE (Best Practice 2025)
+
+| Platform | Frequency | Best Days | Best Times (WIB) |
+|----------|-----------|-----------|-------------------|
+| Instagram | 4-5x/week | Tue, Wed, Thu | 08:00, 12:00, 19:00 |
+| Threads | 1-2x/day | Mon-Fri | 07:00, 12:00, 21:00 |
+| LinkedIn | 3-4x/week | Tue, Wed, Thu | 08:00, 12:00, 17:00 |
+| X (Twitter) | 2-3x/day | Mon-Fri | 07:00, 13:00, 21:00 |
+| Facebook | 3-4x/week | Wed, Thu, Fri | 13:00, 15:00 |
+| Pinterest | 5-10 pins/week | Any | 20:00-23:00 |
+
+---
+
+## ENGAGEMENT RESPONSE SYSTEM
+
+When responding to comments (automation-ready):
+
+### To Questions:
+"Great question! [1-sentence answer]. Curious — [follow-up question to them]?"
+
+### To Positive Comments:
+"Thank you! 🙏 [personalized acknowledge]. [Related insight or teaser for next post]."
+
+### To Disagreements:
+"Love the pushback! You make a fair point. [Validate + counter perspective]. What's your experience been?"
+
+### To Spam/Generic Comments:
+[No response — saves engagement budget for real interactions]
+
+---
+
+## QUALITY CHECKLIST (Before Confirming Any Draft)
+
+Before hitting CONFIRM on any post, verify:
+
+- [ ] **Hook**: Would I stop scrolling? Does the first line create curiosity or add immediate value?
+- [ ] **Character limits**: All platform versions within limits?
+- [ ] **CTA**: Is there exactly ONE clear action requested?
+- [ ] **Authenticity**: Does this sound like a real person, not a press release?
+- [ ] **Visual match**: Does the image reinforce (not just repeat) the caption?
+- [ ] **Bilingual**: Both EN and ID versions accurate?
+- [ ] **Pillar**: Does this fit the content mix (not 3x promotes in a row)?
+- [ ] **Hashtags**: 8-10 niche-specific (avoid banned/overused tags)?

public/social-dashboard.html

@@ -303,7 +303,28 @@
                                 <div style="font-size: 11px; opacity: 0.7; margin-bottom: 8px;">
                                     <span style="color: ${srcInfo.color};">${srcInfo.icon} ${srcInfo.label}</span>${costLabel}
                                 </div>
-                                <p style="font-size: 0.8rem; opacity: 0.5;">Target Platform: All 6 Active</p>
+
+                                ${v1.pillar ? `
+                                <div style="margin-bottom: 8px;">
+                                    <span style="background: rgba(99,102,241,0.2); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.3); border-radius: 20px; padding: 2px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px;">
+                                        📌 ${v1.pillar}
+                                    </span>
+                                </div>` : ''}
+
+                                ${v1.best_time_to_post ? `
+                                <p style="font-size: 10px; opacity: 0.6; margin: 4px 0;">
+                                    ⏰ Best time: ${v1.best_time_to_post}
+                                </p>` : ''}
+
+                                ${v1.hashtags && v1.hashtags.length > 0 ? `
+                                <p style="font-size: 10px; color: #3b82f6; margin: 4px 0; word-break: break-word;">
+                                    ${v1.hashtags.slice(0, 5).join(' ')}
+                                </p>` : ''}
+
+                                ${v1.engagement_notes ? `
+                                <p style="font-size: 10px; opacity: 0.5; font-style: italic; margin: 6px 0 0; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 6px;">
+                                    💡 ${v1.engagement_notes}
+                                </p>` : ''}
                                 
                                 <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 20px;">
                                     <button class="btn-primary" onclick="confirmPost('${post.id}')" ${isApproved ? 'disabled' : ''}>