<div class="external-logins-manager-element">
  <div class="manager-header" header-title="External Logins"></div>

  <div class="section-description-header">
    The external logins panel lists all supported external login providers, which can be used for one-click OAuth-based login to <span class="registry-name"></span>. Accounts can be attached or detached by clicking the associated button below.
  </div>

  <table class="co-table">
    <thead>
      <td>Provider</td>
      <td>Account Status</td>
      <td>Attach/Detach</td>
    </thead>

    <!-- GitHub Login -->
    <tr class="external-auth-provider" ng-show="Features.GITHUB_LOGIN">
      <td>
        <i class="fa fa-github"></i> GitHub <span ng-if="KeyService.isEnterprise('github')">Enterprise</span>
      </td>
      <td>
        <span ng-if="hasGithubLogin">
          Attached to GitHub <span ng-if="KeyService.isEnterprise('github')">Enterprise</span> account <b><a href="{{githubEndpoint}}{{githubLogin}}" target="_blank">{{githubLogin}}</a></b>
        </span>

        <span class="empty" ng-if="!hasGithubLogin">
          (Not attached to GitHub<span ng-if="KeyService.isEnterprise('github')"> Enterprise</span>)
        </span>
      </td>

      <td>
        <span class="external-login-button" provider="github" action="attach" is-link="true"
              ng-if="!hasGithubLogin"></span>
        <a href="javascript:void(0)" ng-if="hasGithubLogin"
           ng-click="detachExternalLogin('github')">Detach Account</a>
      </td>
    </tr>

    <!-- Google Login -->
    <tr class="external-auth-provider" ng-show="Features.GOOGLE_LOGIN">
      <td>
        <i class="fa fa-google"></i> Google Account
      </td>
      <td>
        <span ng-if="hasGoogleLogin">
          Attached to Google account <b>{{ googleLogin }}</b>
        </span>

        <span class="empty" ng-if="!hasGoogleLogin">
          (Not attached to a Google account)
        </span>
      </td>

      <td>
        <span class="external-login-button" provider="google" action="attach" is-link="true"
              ng-if="!hasGoogleLogin"></span>
        <a href="javascript:void(0)" ng-if="hasGoogleLogin"
           ng-click="detachExternalLogin('google')">Detach Account</a>
      </td>
    </tr>
  </table>
</div>