<div class="resource-view" resource="orgResource" error-message="'No organization found'"></div>
<div class="org-admin container" ng-show="organization">
  <div class="organization-header" organization="organization" clickable="true"></div>

  <div class="row">
    <!-- Side tabs -->
    <div class="col-md-2">
      <ul class="nav nav-pills nav-stacked">
        <li class="active" quay-require="['BILLING']">
          <a href="javascript:void(0)" data-toggle="tab" data-target="#plan">Plan and Usage</a>
        </li>
        <li quay-classes="{'!Features.BILLING': 'active'}">
          <a href="javascript:void(0)" data-toggle="tab" data-target="#settings">Organization Settings</a>
        </li>
        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#logs" ng-click="loadLogs()">Usage Logs</a></li>
        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#members" ng-click="loadMembers()">Members</a></li>
        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#robots">Robot Accounts</a></li>
        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#prototypes">Default Permissions</a></li>
        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#applications" ng-click="loadApplications()">Applications</a></li>
        <li ng-show="hasPaidPlan" quay-require="['BILLING']">
          <a href="javascript:void(0)" data-toggle="tab" data-target="#billingoptions">Billing</a>
        </li>
        <li ng-show="hasPaidPlan" quay-require="['BILLING']">
          <a href="javascript:void(0)" data-toggle="tab" data-target="#billing" ng-click="loadInvoices()">Billing History</a>
        </li>
      </ul>
    </div>

    <!-- Content -->
    <div class="col-md-10">
      <div class="tab-content">
        <!-- Plans tab -->
        <div id="plan" class="tab-pane active" quay-require="['BILLING']">
          <div class="plan-manager" organization="orgname" plan-changed="planChanged(plan)"></div>
        </div>

        <!-- Organization settings tab -->
        <div id="settings" class="tab-pane" quay-classes="{'!Features.BILLING': 'active'}">
          <div class="quay-spinner" ng-show="changingOrganization"></div>

          <div class="panel" ng-show="!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()" data-trigger="manual"
                      data-content="{{ changeEmailError }}" data-placement="bottom" ng-show="!updatingOrganization">
                <span class="avatar" size="24" email="organizationEmail" name="orgname"></span>
                <input type="email" class="form-control" ng-model="organizationEmail"
                       style="margin-left: 10px; margin-right: 10px; width: 400px; display: inline-block;" required>
                <button class="btn btn-primary" type="submit" ng-disabled="changeEmailForm.$invalid || organizationEmail == organization.email">
                  Save
                </button>
              </form>
            </div>
          </div>
        </div>

        <!-- Robot accounts tab -->
        <div id="robots" class="tab-pane">
          <div class="robots-manager" organization="organization"></div>
        </div>

        <!-- Prototypes tab -->
        <div id="prototypes" class="tab-pane">
          <div class="prototype-manager" organization="organization"></div>
        </div>

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

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

        <!-- Billing Options tab -->
        <div id="billingoptions" class="tab-pane" quay-require="['BILLING']">
          <div class="billing-options" organization="organization"></div>
        </div>

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

        <!-- Members tab -->
        <div id="members" class="tab-pane">
          <div class="quay-spinner" ng-show="membersLoading"></div>
          <div ng-show="!membersLoading">
            <div class="side-controls">
              <div class="result-count">
                Showing {{(membersFound | filter:search | limitTo:50).length}} of {{(membersFound | filter:search).length}} matching members
              </div>
              <div class="filter-input">
                <input id="member-filter" class="form-control" placeholder="Filter Members" type="text" ng-model="search.$">
              </div>
            </div>

            <table class="table table-striped">
              <thead>
                <th>User/Robot Account</th>
                <th>Teams</th>
                <th></th>
              </thead>

              <tr ng-repeat="memberInfo in (membersFound | filter:search | limitTo:50)">
                <td>
                  <span class="entity-reference" entity="memberInfo" namespace="organization.name"></span>
                </td>
                <td>
                  <span class="team-link" ng-repeat="team in memberInfo.teams">
                    <span class="entity-reference" namespace="organization.name" entity="{'kind': 'team', 'name': team}"></span>
                  </span>
                </td>
                <td>
                  <a href="/organization/{{ organization.name }}/logs/{{ memberInfo.name }}" data-title="Member Usage Logs" bs-tooltip="tooltip.title">
                    <i class="fa fa-book"></i>
                  </a>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
