<div class="resource-view org-view"
     resource="orgResource"
     error-message="'Organization 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="organization.avatar"></span>
        <span class="organization-name">{{ organization.name }}</span>
      </span>
      <span class="cor-title-action" ng-if="isMember">
        <a href="/new/?namespace={{ organization.name }}">
            <i class="fa fa-plus" data-title="Create new repository"></i>
            Create New Repository
        </a>
      </span>
    </div>

    <div class="co-main-content-panel" ng-if="user.anonymous || !isMember">
      <div class="repo-list-grid"
           repositories-resource="repositoriesResource"
           starred="false"
           namespace="namespace"
           hide-title="true">
      </div>
    </div>

    <div class="cor-tab-panel" ng-if="!user.anonymous && isMember">
      <div class="cor-tabs" quay-show="isMember">
        <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="Teams and Membership" tab-target="#teams" tab-init="showTeams()">
          <i class="fa fa-users"></i>
        </span>
        <span class="cor-tab" tab-title="Robot Accounts" tab-target="#robots" tab-init="showRobots()"
              ng-show="isAdmin">
          <i class="fa ci-robot"></i>
        </span>
        <span class="cor-tab" tab-title="Default Permissions" tab-target="#default" ng-show="isAdmin">
          <i class="fa ci-stamp"></i>
        </span>
        <span class="cor-tab" tab-title="Billing" tab-target="#usage"
              quay-show="isAdmin && Features.BILLING">
          <i class="fa fa-credit-card"></i>
        </span>
        <span class="cor-tab" tab-title="Billing Invoices" tab-target="#invoices"
              tab-init="showInvoices()" quay-show="isAdmin && Features.BILLING">
          <i class="fa ci-invoice"></i>
        </span>
        <span class="cor-tab" tab-title="Usage Logs" tab-target="#logs"
              tab-init="showLogs()" ng-show="isAdmin">
          <i class="fa fa-bar-chart"></i>
        </span>
        <span class="cor-tab" tab-title="Applications" tab-target="#applications"
              tab-init="showApplications()" ng-show="isAdmin">
          <i class="fa ci-application"></i>
        </span>
        <span class="cor-tab" tab-title="Organization Settings" tab-target="#settings"
              ng-show="isAdmin">
          <i class="fa fa-gears"></i>
        </span>
      </div> <!-- /cor-tabs -->

      <div class="cor-tab-content">
        <!-- Repositories -->
        <div id="repos" class="tab-pane active">
          <h3>Repositories</h3>
          <div class="repo-list-grid"
               repositories-resource="repositoriesResource"
               starred="false"
               namespace="namespace"
               hide-title="true">
          </div>
        </div>

        <!-- Teams -->
        <div id="teams" class="tab-pane">
          <div ng-if="!user.anonymous">
            <div class="teams-manager" organization="organization" is-enabled="showTeamsCounter"></div>
          </div>
        </div>

        <!-- Robot Accounts -->
        <div id="robots" class="tab-pane">
          <div ng-if="isAdmin">
            <div class="robots-manager" organization="organization" is-enabled="showRobotsCounter"></div>
          </div>
        </div>

        <!-- Default Permissions -->
        <div id="default" class="tab-pane">
          <div ng-if="isAdmin">
            <div class="prototype-manager" organization="organization"></div>
          </div>
        </div>

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

        <!-- Applications -->
        <div id="applications" class="tab-pane">
          <div class="application-manager" organization="organization"
               makevisible="showApplicationsCounter"></div>
        </div>

        <!-- Plan and Usage -->
        <div id="usage" class="tab-pane" quay-require="['BILLING']">
          <h3>Plan Usage and Billing</h3>
          <div ng-if="isAdmin">
            <div class="plan-manager" organization="organization.name"
                 has-subscription="hasSubscription"></div>
            <hr ng-show="hasSubscription">
            <div class="billing-options" organization="organization" ng-show="hasSubscription"></div>
          </div>
        </div>

        <!-- Billing Invoices -->
        <div id="invoices" class="tab-pane" quay-require="['BILLING']">
          <h3>Billing Invoices</h3>
          <div class="billing-invoices" organization="organization"
               makevisible="showInvoicesCounter"></div>
        </div>

        <!-- Settings -->
        <div id="settings" class="tab-pane">
          <div ng-if="isAdmin">
            <h3>Organization Settings</h3>

            <div class="panel" ng-show="!orgScope.changingOrganization">
              <div class="panel-title">Organization's e-mail address</div>
              <div class="panel-content" style="padding-left: 20px; margin-top: 10px;">
                <form class="form-change" id="changeEmailForm" name="changeEmailForm" ng-submit="changeEmail()">
                  <input type="email" class="form-control" style="max-width: 500px;"
                         ng-model="orgScope.organizationEmail" required>
                  <button class="btn btn-primary" type="submit"
                          ng-disabled="changeEmailForm.$invalid || orgScope.organizationEmail == organization.email">
                    Save
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div> <!-- /cor-tab-content -->
    </div>
  </div>
</div>