<div class="resource-view user-view"
     resource="userResource"
     error-message="'User not found'">
  <div class="page-content">
    <div class="cor-title">
      <span class="cor-title-link"></span>
      <span class="cor-title-content">
        <span class="avatar" size="32" data="context.viewuser.avatar"></span>
        <span class="user-name">{{ context.viewuser.username }}</span>
      </span>
      <span class="cor-title-action" ng-if="context.viewuser.is_me">
        <a href="/new/?namespace={{ context.viewuser.username }}">
            <i class="fa fa-plus" data-title="Create new repository"></i>
            Create New Repository
        </a>
      </span>
    </div>

    <div class="co-main-content-panel user-repo-list" ng-if="!context.viewuser.is_me">
      <div class="repo-list-view padded" namespaces="[context.viewuser]">&nbsp;</div>
    </div>

    <div class="cor-tab-panel" ng-if="context.viewuser.is_me">
      <div class="cor-tabs" quay-show="context.viewuser.is_me">
        <span class="cor-tab" tab-active="true" tab-title="Repositories" tab-target="#repos">
          <i class="fa fa-hdd-o"></i>
        </span>
        <span class="cor-tab" tab-title="Robot Accounts" tab-init="showRobots()" tab-target="#robots">
          <i class="fa ci-robot"></i>
        </span>
        <span class="cor-tab" tab-title="External Logins And Applications" tab-target="#external"
              tab-init="showApplications()">
          <i class="fa fa-external-link-square"></i>
        </span>
        <span class="cor-tab" tab-title="Usage Logs" tab-target="#logs" tab-init="showLogs()"
              quay-show="Features.USER_LOG_ACCESS">
          <i class="fa fa-bar-chart"></i>
        </span>
        <span class="cor-tab" tab-title="User Settings" tab-target="#settings" tab-init="showBilling()">
          <i class="fa fa-gears"></i>
        </span>
      </div> <!-- /cor-tabs -->

      <div class="cor-tab-content">
        <!-- Repositories -->
        <div id="repos" class="tab-pane active">
          <div class="repo-list-view" namespaces="[context.viewuser]"><h3>Repositories</h3></div>
        </div>

        <!-- Robot Accounts -->
        <div id="robots" class="tab-pane">
          <div class="robots-manager" user="viewuser" is-enabled="showRobotsCounter"></div>
        </div>

        <!-- Usage Logs -->
        <div id="logs" class="tab-pane">
          <div class="logs-view" user="viewuser" makevisible="showLogsCounter"></div>
        </div>

        <!-- External Logins And Applications -->
        <div id="external" class="tab-pane" quay-show="!hasSingleSignin">
          <div class="external-logins-manager" user="viewuser"
               quay-show="!hasSingleSignin"></div>
          <div style="margin: 50px" quay-show="!hasSingleSignin">
          </div>
          <div class="authorized-apps-manager" user="viewuser" is-enabled="showAppsCounter"></div>
        </div>

        <!-- Settings -->
        <div id="settings" class="tab-pane">
          <!-- Encrypted Password -->
          <div class="settings-section">
            <h3>Docker CLI Password</h3>
            <div ng-if="!Features.REQUIRE_ENCRYPTED_BASIC_AUTH">
              The Docker CLI stores passwords entered on the command line in <strong>plaintext</strong>. It is therefore highly recommended to generate an an encrypted version of your password to use for <code>docker login</code>.
            </div>

            <div ng-if="Features.REQUIRE_ENCRYPTED_BASIC_AUTH">
              This installation is set to <strong>require</strong> encrypted passwords when
              using the Docker command line interface.
            </div>

            <table class="co-list-table" style="margin-top: 10px;">
              <tr>
                <td>CLI Password:</td>
                <td>
                  <a ng-click="generateClientToken()">Generate Encrypted Password</a>
                </td>
              </tr>
            </table>
          </div>

          <!-- User Settings -->
          <div class="settings-section">
            <h3>User Settings</h3>
            <table class="co-list-table">
              <tr>
                <td>Username:</td>
                <td>
                  {{ context.viewuser.username }}
                  <div class="help-text">Usernames cannot currently be changed. Please <a href="/contact">contact support</a> to migrate accounts.</div>
                </td>
              </tr>
              <tr>
                <td>Avatar:</td>
                <td>
                  <span class="avatar" size="48" data="context.viewuser.avatar"></span>
                  <div class="help-text" ng-if="Config.AVATAR_KIND == 'local'">Avatar is generated based off of your username.</div>
                  <div class="help-text" ng-if="Config.AVATAR_KIND == 'gravatar'">Avatar is served by <a href="http://gravatar.com" rel="nofollow" target="_blank">Gravatar</a> based on the {{ context.viewuser.email }} e-mail address.</div>
                </td>
              </tr>
              <tr quay-show="Features.MAILING">
                <td>Email Address:</td>
                <td>
                  <div ng-if="context.emailAwaitingChange">
                    An email has been sent to <code>{{ context.emailAwaitingChange }}</code>. Please click the Confirm button
                    to apply the email change.
                  </div>

                  <a class="co-modify-link" ng-click="showChangeEmail()" ng-if="!context.emailAwaitingChange">{{ context.viewuser.email }}</a>
                </td>
              </tr>
              <tr quay-show="Config.AUTHENTICATION_TYPE == 'Database'">
                <td>Password:</td>
                <td>
                  <a class="co-modify-link" ng-click="showChangePassword()">Change password</a>
                </td>
              </tr>
              <tr quay-show="Config.AUTHENTICATION_TYPE == 'Database'">
                <td>Account Type:</td>
                <td>
                  <a class="co-modify-link" ng-click="showChangeAccount()">Individual account</a>
                </td>
              </tr>
            </table>

            <div class="delete-namespace-view" subscription-status="subscriptionStatus" user="context.viewuser"
                  quay-show="Config.AUTHENTICATION_TYPE == 'Database'"></div>
          </div>

          <!-- Billing Information -->
          <div class="settings-section" quay-show="Features.BILLING">
            <h3>Billing Information</h3>
            <div class="billing-management-panel" user="context.viewuser" is-enabled="showBillingCounter" subscription-status="subscriptionStatus"></div>
          </div>

        </div> <!-- /cor-tab-content -->
    </div>
  </div>

  <!-- Change email dialog -->
  <div class="cor-confirm-dialog"
     dialog-context="changeEmailInfo"
     dialog-action="changeEmail(info, callback)"
     dialog-title="Change E-mail Address"
     dialog-action-title="Change Email"
     dialog-form="context.emailform">
     <form name="context.emailform" class="co-single-field-dialog">
       Please enter a new email address. A verification email will be sent before the change is applied.
       <input type="email" class="form-control" placeholder="Your new e-mail address"
              ng-model="changeEmailInfo.email" required>
     </form>
  </div>

  <!-- Change password dialog -->
  <div class="cor-confirm-dialog"
     dialog-context="changePasswordInfo"
     dialog-action="changePassword(info, callback)"
     dialog-title="Change Password"
     dialog-action-title="Change Password"
     dialog-form="context.passwordform">
     <form name="context.passwordform" class="co-single-field-dialog">
      Enter a new password. Passwords must be at least 8 characters in length.
      <input type="password" class="form-control" placeholder="Your new password" ng-model="changePasswordInfo.password" required
             ng-pattern="/^.{8,}$/">
      <input type="password" class="form-control" placeholder="Verify your new password" ng-model="changePasswordInfo.repeatPassword"
             match="changePasswordInfo.password" required ng-pattern="/^.{8,}$/">
     </form>
  </div>

  <!-- Convert account dialog -->
  <div class="convert-user-to-org" info="convertAccountInfo"></div>

  <!-- Credentials for encrypted passwords -->
  <div class="credentials-dialog" credentials="context.encryptedPasswordCredentials" secret-title="Encrypted Password" entity-title="encrypted password" entity-icon="fa-key">
</div>