<!-- Social Share Button HTML -->
<div class="social-links">
  <ul class="social-icons">
    <!-- Twitter -->
    {{ with .Site.Params.social.links.twitter }}
    <li>
      <a href="https://twitter.com/{{ . }}" target="_blank" rel="noopener" aria-label="Visit Twitter profile" class="social-btn twitter">
        {{ partial "svg/twitter.svg" }}
      </a>
    </li>
    {{ end }}

    <!-- Mastodon -->
    {{ if .Site.Params.social.links.mastodon_user }}
    <li>
      <a href="https://{{ with .Site.Params.social.links.mastodon_server }}{{ . }}{{ else }}mastodon.social{{ end }}/@{{ with .Site.Params.social.links.mastodon_user }}{{ . }}{{ end }}" target="_blank" rel="me noopener" aria-label="Visit Mastodon profile" class="social-btn mastodon">
        {{ partial "svg/mastodon.svg" }}
      </a>
    </li>
    {{ end }}

    <!-- Github -->
    {{ with .Site.Params.social.links.github }}
    <li>
      <a href="https://github.com/{{ . }}" target="_blank" rel="noopener" aria-label="Visit Github profile" class="social-btn github">
        {{ partial "svg/github.svg" }}
      </a>
    </li>
    {{ end }}

    <!-- Stack Overflow -->
    {{ with .Site.Params.social.links.stack_overflow }}
    <li>
      <a href="https://stackoverflow.com/users/{{ . }}" target="_blank" rel="noopener" aria-label="Visit Stack Overflow profile" class="social-btn stack-overflow">
        {{ partial "svg/stack-overflow.svg" }}
      </a>
    </li>
    {{ end }}

    <!-- LinkedIn -->
    {{ with .Site.Params.social.links.linkedin }}
    <li>
      <a href="https://www.linkedin.com/in/{{ . }}" target="_blank" rel="noopener" aria-label="Visit LinkedIn profile" class="social-btn linkedin">
        {{ partial "svg/linkedin.svg" }}
        </a>
    </li>
    {{ end }}

    <!-- Email -->
    {{ with .Site.Params.social.links.email }}
    <li>
      <a href="mailto:?to={{ . }}" target="_blank" class="social-btn email">
        {{ partial "svg/email.svg" }}
      </a>
    </li>
    {{ end }}
  </ul>
</div>
