{{- if .IsFollowed == true && LoggedIn }}
  <button
    type="button"
    class="custom-btn-secondary text-nowrap me-2 js-required"
    hx-post="/self/unfollowUser/{{ .ID }}"
    hx-target="body"
    hx-swap="innerHTML"
    hx-indicator="#follow-spinner"
    hx-push-url="true"
  >
    <div class="d-flex">
      <div><i class="bi bi-person-fill me-2"></i>Following</div>
      <div class="follow-spinner ms-2" id="follow-spinner">
        <div class="spinner-border spinner-border-sm" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
      </div>
    </div>
  </button>
  <noscript>
    <form action="/self/unfollowUser/{{ .ID }}" method="post">
      <button
        type="submit"
        class="custom-btn-secondary text-nowrap me-2"
      >
        <div class="d-flex">
          <div><i class="bi bi-person-fill me-2"></i>Following</div>
          <div class="follow-spinner ms-2" id="follow-spinner">
            <div class="spinner-border spinner-border-sm" role="status">
              <span class="visually-hidden">Loading...</span>
            </div>
          </div>
        </div>
      </button>
    </form>
  </noscript>
  {{- else }}
  {* NOTE: bootstrap doesnt have custom hover states so the dropdown stays as a separate button *}
  <div class="btn-group justify-content-center">
    <button
      type="button"
      class="custom-btn-secondary text-nowrap me-2 js-required"
      class="dropdown-item"
      href="#"
      hx-post="/self/followUser/{{ .ID }}"
      hx-target="body"
      hx-swap="innerHTML"
      hx-indicator="#follow-spinner"
      hx-push-url="true"
      hx-vals='{"private": true}'
    >
      <div class="d-flex">
        <div><i class="bi bi-person-plus me-2"></i>Follow</div>
        <div class="follow-spinner ms-2" id="follow-spinner">
          <div class="spinner-border spinner-border-sm" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
        </div>
      </div>
    </button>

    <noscript>
      <form action="/self/followUser/{{ .ID }}" method="post">
        <input type="hidden" name="private" value="false"/>
        <button
          type="submit"
          class="custom-btn-secondary text-nowrap me-2"
        >
          <div class="d-flex">
            <div><i class="bi bi-person-plus me-2"></i>Follow</div>
            <div class="follow-spinner ms-2" id="follow-spinner">
              <div class="spinner-border spinner-border-sm" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
            </div>
          </div>
        </button>
      </form>
    </noscript>
    <button
      type="button"
      class="custom-btn-secondary dropdown-toggle dropdown-toggle-split js-required"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu dropdown-menu-end shadow-md">
      <li>
        <a
          class="dropdown-item"
          href="#"
          hx-post="/self/followUser/{{ .ID }}"
          hx-target="body"
          hx-swap="innerHTML"
          hx-indicator="#follow-spinner"
          hx-push-url="true"
          hx-vals='{"private": true}'
        >
          Follow privately
        </a>
      </li>
    </ul>
    <noscript>
      <form action="/self/followUser/{{ .ID }}" method="post">
        <input type="hidden" name="private" value="true" />
        <button
          type="submit"
          class="custom-btn-secondary text-nowrap me-2"
        >
          <div class="d-flex">
            <div><i class="bi bi-person-lock me-2"></i>Follow privately</div>
            <div class="follow-spinner ms-2" id="follow-spinner">
              <div class="spinner-border spinner-border-sm" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
            </div>
          </div>
        </button>
      </form>
    </noscript>
  </div>
{{- end }}