{{ define "timeline/fragments/announcements" }}
  <div>
    <h3 class="text-xl font-bold dark:text-white hidden md:flex items-center gap-4 px-4 pb-4">
      {{ i "megaphone" "size-5 flex-shrink-0" }}
      Announcements
    </h3>
    <div class="flex flex-col gap-3">
      {{ template "vouchAnnouncement" . }}
    </div>
  </div>
{{ end }}

{{ define "vouchAnnouncement" }}
  <div class="relative overflow-hidden border border-teal-300 dark:border-teal-600 bg-gradient-to-b from-teal-50 to-teal-100 dark:from-teal-900 dark:to-teal-800 rounded-sm p-6">
    <div class="relative z-10">
      <p class="font-semibold text-teal-800 dark:text-teal-300 mb-1">Build a web of trust</p>
      <p class="text-teal-700 dark:text-teal-400">
        Vouch for trustworthy users that make open-source a better place. Visit a user's
        profile to vouch for them.
      </p>

      <div class="mt-3 flex items-center justify-between">
        <a class="mt-3 no-underline inline-flex items-center gap-1 text-sm font-medium text-teal-700 dark:text-teal-300 hover:text-teal-900 dark:hover:text-teal-100 hover:underline" href="/vouching">
          Read more
        </a>
        {{ if and .LoggedInUser .VouchSuggestions }}
          <a class="md:hidden mt-3 no-underline inline-flex items-center gap-1 text-sm font-medium text-teal-700 dark:text-teal-300 hover:text-teal-900 dark:hover:text-teal-100 hover:underline" href="/{{ .LoggedInUser.Did }}?tab=vouches">
            View suggestions {{ i "arrow-right" "size-3.5" }}
          </a>
        {{ end }}
      </div>

    </div>

    <div class="pointer-events-none absolute -bottom-8 -right-16 text-teal-200 dark:text-teal-700 opacity-60">
      {{ i "shield-plus" "size-48" }}
    </div>
  </div>
{{ end }}
