<div class="repo-panel-settings-element">
  <h3 class="tab-header">Repository Settings</h3>

    <!-- User/Team Permissions -->
    <div class="co-panel">
      <div class="co-panel-heading"><i class="fa fa-key"></i> User and Robot Permissions</div>
      <div class="panel-body" style="padding-top: 5px;">
        <div class="repository-permissions-table" repository="repository"></div>
      </div>
    </div>

    <!-- Access Tokens (DEPRECATED) -->
    <div class="co-panel" ng-show="hasTokens">
      <div class="co-panel-heading"><i class="fa fa-key"></i> Access Token Permissions</div>
      <div class="panel-body" style="padding-top: 5px;">
        <div class="repository-tokens-table" repository="repository" has-tokens="hasTokens"></div>
      </div>
    </div>

    <!-- Events and Notifications -->
    <div class="repository-events-table" repository="repository"></div>

    <!-- Other settings -->
    <div class="co-panel">
      <div class="co-panel-heading"><i class="fa fa-gears"></i> Repository Settings</div>

      <div class="cor-loader" ng-show="!repository"></div>

      <div ng-show="repository">
        <!-- Public/Private -->
        <div class="panel-body panel-section lock-section" ng-if="!repository.is_public">
          <i class="fa fa-lock lock-icon"></i>
          <div>This repository is currently <b>private</b>. Only users on the permissions list may view and interact with it.</div>

          <button class="btn btn-default" ng-click="askChangeAccess('public')">
            <i class="fa fa-unlock"></i>Make Public
          </button>
        </div>

        <div class="panel-body panel-section lock-section" ng-if="repository.is_public">
          <i class="fa fa-unlock lock-icon"></i>

          <div>This repository is currently <b>public</b> and is visible to all users, and may be pulled by all users.</div>

          <button class="btn btn-default" ng-click="askChangeAccess('private')">
            <i class="fa fa-lock"></i>Make Private
          </button>
        </div>

        <!-- Delete Repository -->
        <div class="panel-body panel-section">
          <div class="co-alert co-alert-danger">
            <button class="btn btn-danger" style="float: right; margin-top: -7px;"
                    ng-click="askDelete()">
              <i class="fa fa-trash"></i>
              Delete Repository
            </button>

            Deleting a repository <b>cannot be undone</b>. Here be dragons!
          </div>
        </div>

        <!-- Build Status Badge -->
        <div class="panel-body panel-section">
          <!-- Status Image -->
          <a ng-href="/repository/{{ repository.namespace }}/{{ repository.name }}">
            <img ng-src="/repository/{{ repository.namespace }}/{{ repository.name }}/status?token={{ repository.status_token }}"
                 data-title="Docker Repository on Quay.io">
          </a>

          <!-- Embed formats -->
          <table style="margin-top: 20px; width: 600px;">
            <thead>
              <th style="width: 150px"></th>
              <th></th>
            </thead>
            <tr>
              <td>Image (SVG):</td>
              <td>
                <div class="copy-box" hovering-message="true" value="getBadgeFormat('svg', repository)"></div>
              </td>
            </tr>
            <tr>
              <td>Markdown:</td>
              <td>
                <div class="copy-box" hovering-message="true" value="getBadgeFormat('md', repository)"></div>
              </td>
            </tr>
            <tr>
              <td>AsciiDoc:</td>
              <td>
                <div class="copy-box" hovering-message="true" value="getBadgeFormat('asciidoc', repository)"></div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
</div>