func Components.Subscribe(tytd,id)
{
    var bell = tytd.GetSubscriptionBell(id);
    var subscribed= bell != null;

    var bellLogo = "notifications_off";
    switch(bell)
    {
        case SubscriptionBell.DownloadLow:
        case SubscriptionBell.DownloadHigh:
            bellLogo = "download";
            break;
        case SubscriptionBell.Bell:
        case SubscriptionBell.BellLow:
        case SubscriptionBell.BellHigh:
            bellLogo="notifications_active";
            break;
    }

    <return>
        <div id="subscribe-btn">
            <if(subscribed)>
                <true>
                    <div class="row">
                        <div class="min">
                            <button hx-post="./subscribe" hx-swap="outerHTML" hx-target="#subscribe-btn" hx-vals={Json.Encode({id,type="unsubscribe"})}>Unsubscribe</button>
                        </div>
                        <div class="min">
                            <button class="circle">
                                <i>{bellLogo}</i>
                                <menu class="left no-wrap">
                                    <each(var b : SubscriptionBell.Bells)>
                                        <li hx-post="./subscribe" hx-swap="outerHTML" hx-target="#subscribe-btn" hx-vals={Json.Encode({id,type="bell",bell=b.value})}>{b.name}</li>
                                    </each>
                                </menu>
                            </button>
                        </div>
                    </div>  
                </true>
                <false>
                <button hx-post="./subscribe" hx-swap="outerHTML" hx-target="#subscribe-btn" hx-vals={Json.Encode({id,type="subscribe"})}>Subscribe</button>
                </false>
            </if>
        </div>
    </return>
}