<div class="super-user">
  <div class="cor-loader" ng-show="!configStatus"></div>
  <div class="page-content" quay-show="Features.SUPER_USERS && configStatus == 'ready'">
    <div ng-if="requiresRestart && configProviderId == 'file'" class="alert alert-warning restart-required">
      <button class="btn btn-warning" ng-click="restartContainer()">
        <i class="fa fa-refresh"></i>Restart Now
      </button>
      <i class="fa fa-lg fa-warning"></i>
      <div><strong>Container restart required!</strong></div>
      Configuration changes have been made but the container hasn't been restarted yet.
    </div>
    <div ng-if="requiresRestart && configProviderId == 'k8s'" class="alert alert-warning restart-required">
      <i class="fa fa-lg fa-warning"></i>
      <div><strong>Container restarts required!</strong></div>
      Configuration changes have been made to the Kubernetes secret but they will not be applied to
      your cluster until the containers are restarted. Please issue a rolling deployment now to apply
      these changes to the cluster.
    </div>

    <div class="cor-title">
      <span class="cor-title-link"></span>
      <span class="cor-title-content">Quay Enterprise Management</span>
    </div>

    <cor-tab-panel orientation="vertical" cor-nav-tabs>
      <cor-tabs>
        <cor-tab tab-title="Manage Users"
                 tab-id="users" tab-init="loadUsers()">
          <i class="fa fa-group"></i>
        </cor-tab>
        <cor-tab tab-title="Manage Organizations"
                 tab-id="organizations" tab-init="loadOrganizations()">
          <i class="fa fa-sitemap"></i>
        </cor-tab>
        <cor-tab tab-title="Manage Service Keys"
                 tab-id="servicekeys" tab-init="loadServiceKeys()">
          <i class="fa fa-key"></i>
        </cor-tab>
        <cor-tab tab-title="Change Log" tab-id="change-log" tab-init="getChangeLog()">
          <i class="fa fa-rss"></i>
        </cor-tab>
        <cor-tab tab-title="Usage Logs" tab-id="logs" tab-init="loadUsageLogs()">
          <i class="fa fa-bar-chart"></i>
        </cor-tab>
        <cor-tab tab-title="Internal Logs and Debugging" tab-id="debug"
                 tab-init="loadDebugServices()">
          <i class="fa fa-bug"></i>
        </cor-tab>
        <cor-tab tab-title="Globally visible user messages" tab-id="message-of-the-day"
                 tab-init="loadMessageOfTheDay()">
          <i class="fa fa-newspaper-o"></i>
        </cor-tab>
        <cor-tab tab-title="Build Logs" tab-id="super-user-build-logs"
                 tab-init="loadSuperUserBuildLogs()"
                 quay-show="Features.BUILD_SUPPORT">
          <i class="fa fa-history"></i>
        </cor-tab>
      </cor-tabs>

      <cor-tab-content>
        <!-- Super user build logs tab-->
        <cor-tab-pane id="super-user-build-logs">
          <div class="super-user-build-logs" is-enabled="superUserBuildLogsActive"></div>
        </cor-tab-pane> <!-- Super user build logs tab -->

        <!-- Messages tab -->
        <cor-tab-pane id="message-of-the-day">
          <div class="global-message-tab" is-enabled="globalMessagesActive"></div>
        </cor-tab-pane> <!-- Messages tab -->

        <!-- Service keys tab -->
        <cor-tab-pane id="servicekeys">
          <div class="service-keys-manager" is-enabled="serviceKeysActive"></div>
        </cor-tab-pane>

        <!-- Debugging tab -->
        <cor-tab-pane id="debug">
          <div class="co-alert co-alert-warning" ng-show="multipleInstances">
            Debug logs cannot be displayed as <span class="registry-name"></span> is running under multiple containers. To retrieve logs, please use your implementation's custom configured logging solution.
          </div>
          <div ng-show="!multipleInstances">
            <div class="cor-loader" ng-show="!debugServices"></div>
            <div role="tabpanel" ng-show="debugServices">
              <!-- Nav tabs -->
              <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" ng-repeat="service in debugServices"
                    ng-class="debugService == service ? 'active' : ''">
                  <a ng-click="viewSystemLogs(service)">{{ service }}</a>
                </li>
              </ul>

              <div class="system-log-download-panel" ng-if="!debugService">
                Select a service above to view its local logs

                <div>
                  <a class="btn btn-primary" href="/systemlogsarchive?_csrf_token={{ csrf_token }}" ng-safenewtab>
                    <i class="fa fa-download fa-lg" style="margin-right: 4px;"></i> Download All Local Logs (.tar.gz)
                  </a>
                </div>
              </div>
              <div class="cor-log-box" logs="debugLogs" ng-show="debugService"></div>
            </div>
          </div>
        </cor-tab-pane>

        <!-- Logs tab -->
        <cor-tab-pane id="logs">
          <div class="logsView" makevisible="logsCounter" all-logs="true"></div>
        </cor-tab-pane> <!-- /logs tab-->

        <!-- Change Log tab -->
        <cor-tab-pane id="change-log">
          <h3 style="margin-top: 0px;">Change Log</h3>
          <div class="cor-loader" ng-if="!changeLog"></div>
          <markdown-view ng-if="changeLog"
                         content="changeLog.log" ></markdown-view>
        </cor-tab-pane> <!-- /change-log tab-->

        <!-- Organizations tab -->
        <cor-tab-pane id="organizations">
          <div class="resource-view" resource="organizationsResource"
               error-message="'Could not load organizations'">
            <div class="manager-header" header-title="Organizations">
            </div>

            <div class="co-top-bar">
              <span class="co-filter-box">
                <span class="page-controls" total-count="orderedOrgs.entries.length" current-page="options.page" page-size="orgsPerPage"></span>
                <input class="form-control" type="text" ng-model="options.filter" placeholder="Filter Organizations..." style="margin-right: 10px;">
              </span>
            </div>

            <table class="cor-table" ng-if="orderedOrgs.entries.length && !isLoading">
              <thead>
              <td style="width: 24px;"></td>

              <td ng-class="tablePredicateClass('name', options.predicate, options.reverse)">
                <a ng-click="orderBy('name')">Name</a>
              </td>
              <td ng-class="tablePredicateClass('email', options.predicate, options.reverse)">
                <a ng-click="orderBy('email')">Admin Email</a>
              </td>
              <td style="width: 24px;"></td>
              </thead>

              <tr ng-repeat="current_org in orderedOrgs.entries | slice
                     :(orgsPerPage * options.page)
                     :(orgsPerPage * (options.page + 1))"
                  class="org-row">
                <td>
                  <span class="avatar" data="current_org.avatar" size="24"></span>
                </td>
                <td>
                  {{ current_org.name }}
                </td>
                <td>
                  <a href="mailto:{{ current_org.email }}">{{ current_org.email }}</a>
                </td>
                <td style="text-align: center;">
                  <span class="cor-options-menu">
                    <span class="cor-option" option-click="askRenameOrganization(current_org)">
                      <i class="fa fa-arrow-right"></i> Rename Organization
                    </span>
                    <span class="cor-option" option-click="askDeleteOrganization(current_org)">
                      <i class="fa fa-times"></i> Delete Organization
                    </span>
                    <span class="cor-option" option-click="askTakeOwnership(current_org)">
                      <i class="fa fa-bolt"></i> Take Ownership
                    </span>
                  </span>
                </td>
              </tr>
            </table>
          </div> <!-- /resource -->
        </cor-tab-pane> <!-- organizations tab -->

        <!-- Users tab -->
        <cor-tab-pane id="users" class="tab-pane active">
          <div class="manage-user-tab" is-enabled="manageUsersActive"></div>
        </cor-tab-pane> <!-- users-tab -->
      </cor-tab-content>
    </cor-tab-panel>

    <!-- Modal message dialog -->
    <div class="co-dialog modal fade" id="restartingContainerModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Container Currently Restarting</h4>
          </div>
          <div class="modal-body" style="padding: 20px;">
           <i class="fa fa-lg fa-refresh" style="margin-right: 10px;"></i>
           <span class="registry-name"></span> is currently being restarted.
           <br><br>
           This can take several minutes. If the container does not restart on its own,
           please reexecute the <code>docker run</code> command.
          </div>
          <div class="modal-footer working">
            <span class="cor-loader-inline"></span> Waiting for container to restart...
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

  <div class="cor-confirm-dialog take-ownership-dialog"
       dialog-context="takeOwnershipInfo"
       dialog-action="takeOwnership(info, callback)"
       dialog-title="Take Ownership"
       dialog-action-title="Take Ownership">
    Are you sure you want to take ownership of organization <span class="avatar" data="takeOwnershipInfo.entity.avatar" size="16"></span> {{ takeOwnershipInfo.entity.name }}?</span>
  </div>

  </div> <!-- /page-content -->
</div>