---
import BaseLayout from "../layouts/BaseLayout.astro";
import SiteHeader from "../components/SiteHeader.astro";
import SiteFooter from "../components/SiteFooter.astro";
import { navigationItems } from "../lib/navigation";

const facebookPageUrl =
    "https://www.facebook.com/people/Highland-Group-RDA/100064729054822/";

const pageSeo = {
    title: "Facebook",
    description:
        "Follow Highland Group RDA on Facebook to see the latest updates, photos, events, and stories from our riders, volunteers, and community.",
    keywords:
        "Highland Group RDA Facebook, RDA social media, Highland RDA updates, RDA events Facebook, therapeutic riding community",
    canonicalPath: "/facebook",
};

const posts = [
    {
        id: 1,
        date: "3 days ago",
        body: "What a glorious morning at Sandycroft! All four ponies were out, the sun was shining, and our riders had a brilliant session. Huge thanks to our amazing volunteer team who make every Tuesday possible. 🐴☀️",
        img: "/Samantha-and-Connolly-1280.webp",
        imgPos: "50% 38%",
        likes: 47,
        comments: 6,
        shares: 3,
    },
    {
        id: 2,
        date: "1 week ago",
        body: "We are thrilled to announce that three of our team have just completed their RDA Coach training! Welcome to the qualified ranks — and thank you for the hours of study, practice, and dedication. The Highlands are lucky to have you. 🎉",
        img: "/Vols5-2880w-1024x768.avif",
        imgPos: "50% 28%",
        likes: 132,
        comments: 24,
        shares: 11,
    },
    {
        id: 3,
        date: "2 weeks ago",
        body: "MEET THE PONIES — Today we'd like to introduce you to Breagh, one of our most willing and independent ponies. Breagh has been a firm favourite with our riders for years. She loves a good back-scratch. 💚",
        img: "/Breagh-bc8e70e8-2880w.webp",
        imgPos: "50% 45%",
        likes: 218,
        comments: 41,
        shares: 15,
    },
    {
        id: 4,
        date: "3 weeks ago",
        body: "Open Day reminder — Sunday 10 May, 11am to 3pm at Sandycroft. Come and meet the ponies, chat to our coaches, and find out how you can get involved. Tea, coffee, and home baking on offer! All welcome.",
        img: "/about-960.webp",
        imgPos: "50% 35%",
        likes: 89,
        comments: 18,
        shares: 27,
    },
    {
        id: 5,
        date: "1 month ago",
        body: "Incredible news — our sponsored ride raised over £1,200! 🙏 That's enough to cover hoof trimming and hay for the whole summer. To everyone who donated, sponsored, walked, or cheered us on: thank you. You make this work possible.",
        img: null,
        imgPos: "",
        likes: 165,
        comments: 32,
        shares: 9,
    },
];

const photosGrid = [
    { src: "/Samantha-and-Connolly-1280.webp", pos: "50% 38%" },
    { src: "/alineofponies-1920w.webp",         pos: "50% 50%" },
    { src: "/Vols5-2880w-1024x768.avif",        pos: "50% 28%" },
    { src: "/about-960.webp",                   pos: "50% 42%" },
    { src: "/contact-960.webp",                 pos: "50% 40%" },
    { src: "/Breagh-bc8e70e8-2880w.webp",       pos: "50% 50%" },
    { src: "/Harley-6ece9eca-2880w.webp",       pos: "50% 50%" },
    { src: "/puzzle-5de6e325-2880w.webp",       pos: "50% 50%" },
    { src: "/Wispa-2880w.webp",                 pos: "50% 20%" },
];
---

<BaseLayout {...pageSeo}>
    <style>
        #site-nav {
            transition: background 0.4s ease, backdrop-filter 0.4s ease;
        }
        #site-nav.scrolled {
            background: rgba(0,0,0,0.82);
            backdrop-filter: blur(8px);
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(18px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .anim-fade-up { animation: fadeUp 0.9s ease both; }

        .fb-card {
            background: #fff;
            border-radius: 8px;
            border: 1px solid rgba(0,0,0,0.08);
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
            overflow: hidden;
        }
        .fb-action {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex: 1;
            padding: 10px 0;
            cursor: pointer;
            border-radius: 6px;
            transition: background 0.15s;
            color: #65676b;
            font-family: 'Public Sans', sans-serif;
            font-weight: 600;
            font-size: 14px;
            border: none;
            background: transparent;
            text-decoration: none;
        }
        .fb-action:hover { background: #f2f2f2; }
        .fb-action[data-liked="true"] { color: #1877F2; font-weight: 700; }

        .feed-grid {
            display: grid;
            grid-template-columns: 1fr 320px;
            gap: 32px;
            align-items: flex-start;
        }
        .sidebar { position: sticky; top: 88px; }

        @media (max-width: 900px) {
            .feed-grid { grid-template-columns: 1fr; }
            .sidebar { position: static; }
        }
        @media (max-width: 767px) {
            .page-header-info { flex-wrap: wrap; }
            .page-header-buttons { padding-top: 12px !important; }
        }
    </style>

    <!-- Fixed nav -->
    <div id="site-nav" class="fixed top-0 left-0 right-0 z-50 px-4 sm:px-10">
        <SiteHeader navigationItems={navigationItems} theme="dark" />
    </div>

    <div class="flex flex-col min-h-screen bg-[#e2e2e2]">
        <main class="w-full">

            <!-- ── HERO ── -->
            <section class="relative w-full overflow-hidden" style="min-height: 48vh;">
                <img
                    class="absolute inset-0 w-full h-full object-cover"
                    style="object-position: 50% 30%;"
                    src="/Vols5-2880w-1024x768.avif"
                    alt=""
                    loading="eager"
                    fetchpriority="high"
                    decoding="async"
                />
                <div
                    class="absolute inset-0"
                    style="background: linear-gradient(160deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.5) 100%);"
                />
                <div
                    class="relative flex flex-col justify-end"
                    style="min-height: 48vh; padding: 100px clamp(24px, 5vw, 72px) 60px;"
                >
                    <div class="anim-fade-up" style="max-width: 680px;">
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 14px;">
                            Social
                        </p>
                        <div style="width: 48px; height: 2px; background: #7DA371; margin-bottom: 20px;" />
                        <h1 style="font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(32px, 4.5vw, 52px); color: #F6F1E8; line-height: 1.1; margin-bottom: 18px;">
                            Follow us on Facebook.
                        </h1>
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: clamp(15px, 1.5vw, 18px); color: rgba(246,241,232,0.82); line-height: 1.65;">
                            The latest from Sandycroft — meet the ponies, see our riders in action, and follow our sessions, events, and fundraising.
                        </p>
                    </div>
                </div>
            </section>

            <!-- ── PAGE HEADER CARD ── -->
            <section style="background: #e2e2e2; padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 72px) 0;">
                <div style="max-width: 1100px; margin: 0 auto;">
                    <div class="fb-card">
                        <!-- Cover photo -->
                        <div style="position: relative; height: 200px; overflow: hidden;">
                            <img
                                src="/Samantha-and-Connolly-1280.webp"
                                alt=""
                                style="width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;"
                                loading="lazy"
                            />
                        </div>
                        <!-- Info row -->
                        <div class="page-header-info" style="padding: 0 32px 28px; display: flex; align-items: flex-end; gap: 24px; margin-top: -50px; flex-wrap: wrap;">
                            <div style="width: 120px; height: 120px; border-radius: 9999px; background: #fff; padding: 5px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
                                <div style="width: 100%; height: 100%; border-radius: 9999px; background: #1e2e1a; display: flex; align-items: center; justify-content: center;">
                                    <img src="/figmaAssets/rdalogo-1.svg" alt="" style="height: 64px; filter: brightness(0) invert(1);" />
                                </div>
                            </div>
                            <div style="flex: 1; padding-top: 50px; min-width: 200px;">
                                <h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.2vw, 28px); color: #000; line-height: 1.2;">
                                    Highland Group RDA
                                </h2>
                                <p style="margin-top: 6px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: #65676b;">
                                    Nonprofit organisation · Riding for the Disabled
                                </p>
                            </div>
                            <div class="page-header-buttons" style="display: flex; gap: 10px; padding-top: 50px; flex-wrap: wrap;">
                                <a
                                    href={facebookPageUrl}
                                    target="_blank"
                                    rel="noreferrer"
                                    style="display: inline-flex; align-items: center; gap: 8px; background: #1877F2; color: #fff; border-radius: 6px; padding: 10px 20px; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 14px; text-decoration: none;"
                                >
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
                                    Follow
                                </a>
                                <a
                                    href={facebookPageUrl}
                                    target="_blank"
                                    rel="noreferrer"
                                    style="display: inline-flex; align-items: center; gap: 8px; background: #e4e6eb; color: #000; border-radius: 6px; padding: 10px 20px; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 14px; text-decoration: none;"
                                >
                                    Visit page
                                    <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3h7v7M13 3L4 12"/></svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- ── FEED + SIDEBAR ── -->
            <section style="background: #e2e2e2; padding: clamp(24px, 4vw, 40px) clamp(24px, 5vw, 72px) clamp(56px, 8vw, 88px);">
                <div style="max-width: 1100px; margin: 0 auto;" class="feed-grid">

                    <!-- Feed column -->
                    <div style="display: flex; flex-direction: column; gap: 16px;">
                        <div style="display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; gap: 12px; flex-wrap: wrap;">
                            <h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.2vw, 28px); color: #000;">Recent posts</h2>
                            <a
                                href={facebookPageUrl}
                                target="_blank"
                                rel="noreferrer"
                                style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: #7DA371; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: underline;"
                            >
                                See all on Facebook
                            </a>
                        </div>

                        {posts.map((post) => (
                            <div class="fb-card" data-post-id={post.id}>
                                <div style="padding: 14px 16px; display: flex; align-items: center; gap: 12px;">
                                    <div style="width: 40px; height: 40px; border-radius: 9999px; background: #1e2e1a; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                        <img src="/figmaAssets/rdalogo-1.svg" alt="" style="height: 24px; filter: brightness(0) invert(1);" />
                                    </div>
                                    <div>
                                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 14px; color: #000;">Highland Group RDA</p>
                                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 500; font-size: 12px; color: #65676b;">
                                            {post.date} · 🌍
                                        </p>
                                    </div>
                                </div>
                                <div style="padding: 0 16px 14px;">
                                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 500; font-size: 15px; color: #000; line-height: 1.55; white-space: pre-line;">
                                        {post.body}
                                    </p>
                                </div>
                                {post.img && (
                                    <div style="position: relative; width: 100%; max-height: 520px; overflow: hidden; background: #f0f2f5;">
                                        <img
                                            src={post.img}
                                            alt=""
                                            style={`width: 100%; max-height: 520px; object-fit: cover; object-position: ${post.imgPos}; display: block;`}
                                            loading="lazy"
                                            decoding="async"
                                        />
                                    </div>
                                )}
                                <div style="padding: 10px 16px 6px; display: flex; align-items: center; justify-content: space-between; font-family: 'Public Sans', sans-serif; font-weight: 500; font-size: 13px; color: #65676b;">
                                    <div style="display: flex; align-items: center; gap: 6px;">
                                        <div style="display: flex;">
                                            <span style="width: 18px; height: 18px; border-radius: 9999px; background: #1877F2; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; position: relative; z-index: 2;">
                                                <svg width="9" height="9" viewBox="0 0 24 24" fill="white" aria-hidden="true"><path d="M2 21h4V9H2zm20-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13.17 1 7.58 6.59C7.22 6.95 7 7.45 7 8v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73z"/></svg>
                                            </span>
                                            <span style="width: 18px; height: 18px; border-radius: 9999px; background: #f33e58; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; margin-left: -5px; position: relative; z-index: 1;">
                                                <svg width="9" height="9" viewBox="0 0 24 24" fill="white" aria-hidden="true"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
                                            </span>
                                        </div>
                                        <span data-like-count={post.likes}>{post.likes}</span>
                                    </div>
                                    <div style="display: flex; gap: 14px;">
                                        <span>{post.comments} comments</span>
                                        <span>{post.shares} shares</span>
                                    </div>
                                </div>
                                <div style="margin: 0 12px; border-top: 1px solid rgba(0,0,0,0.1); padding: 4px 0; display: flex;">
                                    <button class="fb-action" data-like-btn aria-label="Like" aria-pressed="false">
                                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <path d="M7 11v9H3v-9zm14-1l-2 9c-.2.8-.9 1-1.5 1H10c-.6 0-1-.4-1-1V10c0-.2.1-.5.3-.7L15 4l1 1c.3.3.4.7.3 1.1L15 10h5c.6 0 1.1.4 1 1z"/>
                                        </svg>
                                        Like
                                    </button>
                                    <a href={facebookPageUrl} target="_blank" rel="noreferrer" class="fb-action">
                                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8z"/>
                                        </svg>
                                        Comment
                                    </a>
                                    <a href={facebookPageUrl} target="_blank" rel="noreferrer" class="fb-action">
                                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13"/>
                                        </svg>
                                        Share
                                    </a>
                                </div>
                            </div>
                        ))}

                        <div style="text-align: center; margin-top: 8px;">
                            <a
                                href={facebookPageUrl}
                                target="_blank"
                                rel="noreferrer"
                                style="display: inline-flex; align-items: center; gap: 10px; background: #1877F2; color: #fff; border-radius: 9999px; padding: 14px 32px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;"
                            >
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
                                See more on Facebook
                            </a>
                        </div>
                    </div>

                    <!-- Sidebar -->
                    <aside class="sidebar" style="display: flex; flex-direction: column; gap: 16px;">
                        <!-- About card -->
                        <div class="fb-card" style="padding: 20px 22px;">
                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 12px; color: #65676b; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px;">About</p>
                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 500; font-size: 14px; color: #000; line-height: 1.6; margin-bottom: 18px;">
                                Highland Group RDA provides therapeutic riding for people with disabilities in the Highlands. Based at Sandycroft, Reelig, Kirkhill.
                            </p>
                            <div style="display: flex; flex-direction: column; gap: 10px; font-family: 'Public Sans', sans-serif; font-size: 13px; color: #65676b;">
                                <div style="display: flex; gap: 10px; align-items: flex-start;">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0; margin-top: 2px;" aria-hidden="true">
                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
                                    </svg>
                                    <span>Sandycroft, Reelig, Kirkhill IV5 7PP</span>
                                </div>
                                <div style="display: flex; gap: 10px; align-items: center;">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;" aria-hidden="true">
                                        <rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 6l-10 7L2 6"/>
                                    </svg>
                                    <a href="mailto:info@highlandgrouprda.org.uk" style="color: #65676b;">info@highlandgrouprda.org.uk</a>
                                </div>
                                <div style="display: flex; gap: 10px; align-items: center;">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;" aria-hidden="true">
                                        <circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
                                    </svg>
                                    <span>Tue – Fri mornings</span>
                                </div>
                            </div>
                        </div>

                        <!-- Photos grid -->
                        <div class="fb-card" style="padding: 20px 22px;">
                            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;">
                                <p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 12px; color: #65676b; letter-spacing: 0.08em; text-transform: uppercase;">Photos</p>
                                <a href={facebookPageUrl} target="_blank" rel="noreferrer" style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; color: #1877F2; text-decoration: none;">See all</a>
                            </div>
                            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;">
                                {photosGrid.map((photo) => (
                                    <div style="aspect-ratio: 1/1; overflow: hidden; border-radius: 4px;">
                                        <img
                                            src={photo.src}
                                            alt=""
                                            style={`width: 100%; height: 100%; object-fit: cover; object-position: ${photo.pos};`}
                                            loading="lazy"
                                            decoding="async"
                                        />
                                    </div>
                                ))}
                            </div>
                        </div>

                        <!-- Donate CTA -->
                        <div class="fb-card" style="padding: 22px; background: #1e2e1a;">
                            <p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 18px; color: #F6F1E8; line-height: 1.3; margin-bottom: 8px;">
                                Like what you see?
                            </p>
                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 500; font-size: 14px; color: rgba(246,241,232,0.7); line-height: 1.6; margin-bottom: 18px;">
                                Donate today to help us keep going.
                            </p>
                            <a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer">
                                <img src="/Button.webp" alt="Donate via JustGiving" style="height: 44px; object-fit: contain; display: block;" loading="lazy" />
                            </a>
                        </div>
                    </aside>
                </div>
            </section>

            <!-- ── EMBED NOTE ── -->
            <section style="background: #d6d6d6; padding: 24px clamp(24px, 5vw, 72px); border-top: 1px solid rgba(0,0,0,0.1);">
                <div style="max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
                    <div style="flex-shrink: 0; width: 32px; height: 32px; border-radius: 9999px; background: rgba(125,163,113,0.15); display: flex; align-items: center; justify-content: center;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7DA371" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>
                        </svg>
                    </div>
                    <p style="flex: 1; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(0,0,0,0.6); line-height: 1.6; min-width: 200px;">
                        The posts above are a curated preview of our Facebook activity. For the full feed, visit us directly on <a href={facebookPageUrl} target="_blank" rel="noreferrer" style="color: #1877F2; text-decoration: underline;">Facebook</a>.
                    </p>
                </div>
            </section>

        </main>
        <SiteFooter fullBleedOnMobile />
    </div>

    <script>
        const nav = document.getElementById("site-nav");
        if (nav) {
            window.addEventListener("scroll", () => {
                nav.classList.toggle("scrolled", window.scrollY > 40);
            }, { passive: true });
        }

        document.querySelectorAll("[data-like-btn]").forEach((btn) => {
            btn.addEventListener("click", () => {
                const card = btn.closest("[data-post-id]");
                if (!card) return;
                const liked = btn.getAttribute("data-liked") === "true";
                const countEl = card.querySelector("[data-like-count]");
                if (countEl) {
                    const base = parseInt(countEl.getAttribute("data-like-count") ?? "0", 10);
                    countEl.textContent = String(base + (liked ? 0 : 1));
                }
                btn.setAttribute("data-liked", liked ? "false" : "true");
                btn.setAttribute("aria-pressed", liked ? "false" : "true");
            });
        });
    </script>
</BaseLayout>
