<div class="row">
  <div class="col-md-12">
    <div>
      <span data-translate>Sites</span>
      <button class="btn btn-sm btn-primary show-add-tenant-btn" data-ng-click="toggleAddTenant()">
        <i class="fa-solid fa-plus"></i>
        <span data-translate>Add</span>
      </button>
      <span id="SearchFilter" class="form-group float-right">
        <input type="text" class="form-control" data-ng-attr-placeholder="{{'Search' | translate}}" data-ng-model="search">
      </span>
    </div>
  </div>
</div>

<div data-ng-if="showAddTenant" class="row">
  <div class="col-md-6">
    <form name="newTenantForm" class="addTenant" novalidate>
      <div class="form-group">
        <label>
          <span data-translate>Name</span>
          <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
        </label>
        <div>
          <input name="name" class="form-control" data-ng-model="newTenant.name" maxlength="120" type="text" data-ng-class="{'is-invalid': newTenantForm.name.$error.required}" required />
        </div>
      </div>
      <div class="form-group">
        <label data-translate>Mode:</label>
        <select name="type" class="form-control" data-ng-model="newTenant.mode" required>
          <option value="default">DEFAULT</option>
          <option value="wbpa">WHISTLEBLOWINGPA</option>
        </select>
      </div>
      <div class="form-group clearfix">
        <button id="add-btn" class="float-left btn btn-primary" data-ng-disabled="newTenantForm.$invalid" data-ng-click="addTenant(); toggleAddTenant()" type="button">
          <i class="fa-solid fa-plus"></i>
          <span data-translate>Add</span>
        </button>
      </div>
    </form>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div data-ng-repeat="tenant in resources.tenants | orderBy:'id' | filter:{$: search} | limitTo:itemsPerPage:(currentPage - 1) * itemsPerPage">
      <form data-ng-if="tenant.id != 1" id="tenant-{{$index}}" name="editTenant" data-ng-controller="TenantEditorCtrl" novalidate>
        <div class="configItem">
          <div class="editorHeader row" data-ng-click="toggleEditing($event)">
            <div class="col-md-6">
              <div>
                <span class="badge badge-secondary">{{tenant.id}}</span>
                <span>{{tenant.name}}</span>
              </div>
              <div data-ng-if="tenant.active && (tenant.onionservice || tenant.hostname || (tenant.subdomain || resources.node.rootdomain))">
                <a class="badge badge-primary" data-ng-if="tenant.onionservice" data-ng-href="http://{{tenant.onionservice}}" rel="noreferrer" target="_blank" isolate-click>{{tenant.onionservice}}</a>
                <span data-ng-if="tenant.subdomain">
                  <a data-ng-if="resources.node.rootdomain" class="badge badge-primary" data-ng-href="https://{{tenant.subdomain}}.{{resources.node.rootdomain}}" target="_blank" isolate-click>{{tenant.subdomain}}.{{resources.node.rootdomain}}</a>
                  <a data-ng-if="resources.node.onionservice && tenant.subdomain" class="badge badge-primary" data-ng-href="http://{{tenant.subdomain}}.{{resources.node.onionservice}}" rel="noreferrer" target="_blank" isolate-click>{{tenant.subdomain}}.{{resources.node.onionservice}}</a>
                </span>
                <a class="badge badge-primary" data-ng-if="tenant.hostname" data-ng-href="https://{{tenant.hostname}}" rel="noreferrer" target="_blank" isolate-click>{{tenant.hostname}}</a>
              </div>
            </div>
            <div class="col-md-6 clearfix">
                <span class="float-right">
                  <span data-ng-show="tenant.active" class="btn btn-sm btn-primary"
                        data-ng-click="toggleActivation($event)"
                        data-translate>Enabled</span>
                  <span data-ng-hide="tenant.active" class="btn btn-sm btn-danger"
                        data-ng-click="toggleActivation($event)"
                        data-translate>Disabled</span>
                  <span data-ng-show="!resources.node.tenant.active" class="btn btn-sm btn-primary"
                        data-ng-click="configureTenant($event, tenant.id)"
                        data-translate>Configure</span>
                  <button class="btn btn-sm btn-outline-secondary"
                          data-ng-show="!editing"
                          data-ng-click="toggleEditing($event)">
                    <span data-translate>Edit</span>
                  </button>
                  <button class="btn btn-sm btn-primary"
                          data-ng-show="editing"
                          data-ng-disabled="editContext.$invalid"
                          data-ng-click="saveTenant()">
                    <span data-translate>Save</span>
                  </button>
                  <button class="btn btn-sm btn-danger"
                          data-ng-show="isRemovableTenant()"
                          data-ng-click="deleteTenant($event)">
                    <span data-translate>Delete</span>
                  </button>
                </span>
            </div>
          </div>
          <div data-ng-if="editing">
            <hr/>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label data-translate>Name</label>
                  <input name="name" class="form-control" data-ng-model="tenant.name" type="text" required>
                </div>
                <div class="form-group">
                  <label data-translate>Subdomain</label>
                  <input name="subdomain" class="form-control" data-ng-model="tenant.subdomain" type="text" subdomainvalidator required>
                </div>
                <div class="form-group">
                  <label data-translate>Mode:</label>
                  <select name="type" class="form-control" data-ng-model="tenant.mode" required>
                    <option value="default">DEFAULT</option>
                    <option value="demo">DEMO</option>
                    <option value="wbpa">WHISTLEBLOWINGPA</option>
                    <option value="eat">EAT</option>
                  </select>
                </div>
                <div class="form-group">
                  <label><span data-translate>Creation date:</span> {{tenant.creation_date | date:'dd-MM-yyyy'}}</label>
                </div>
                <div class="form-group" data-ng-if="tenant.signup" data-ng-include="'views/partials/signup.html'"></div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>

    <div class="text-center" data-ng-show="(resources.tenants | filter:{'name': search}).length > 20">
      <ul uib-pagination
          total-items="(resources.tenants | filter:{'name': search}).length"
          first-text="<<"
          last-text=">>"
          previous-text="<"
          next-text=">"
          items-per-page="itemsPerPage"
          data-ng-model="currentPage"
          max-size="10"
          class="pagination-sm"
          boundary-links="true"
          force-ellipses="true"></ul>
    </div>
  </div>
</div>
