{{ $itemClasses := "font-mono" }}
{{ $itemLinkClasses := "inline-flex items-center gap-2 hover:no-underline opactiy-50" }}

<section id="interaction"
    class="flex gap-1 justify-between">
    <div id="interaction-like" class="{{ $itemClasses }}">
        {{ partial "posts/like" . }}
    </div>
    <div class="flex gap-2 items-center">
        <p class="text-secondary text-xs m-0">
            {{ T "interact.replyVia" }}
        </p>
        <div id="interaction-email" class="{{ $itemClasses }}"> 
            <a href="{{ printf "mailto:hi@eltr.ac?subject=%s" 
                               (printf (T "interact.mailSubject") .Title)}}"
               class="{{ $itemLinkClasses }}">
                <img src="/icons/mail.svg" class="dark:invert" width="16" height="16"> Email
            </a>
        </div>
        <div id="interaction-fedi" class="{{ $itemClasses }}">
            {{ $fedipost := or .Params.toot .Params.fedi }}
            {{ with $fedipost }}
            <a href="{{ . }}" target="_blank"
               class="{{ $itemLinkClasses }}">
                <span class="xerox font-sans">⁂</span> Fediverse
            </a>
            {{ end }}
        </div>
    </div>
</section>