<div class="tab-content" style="padding-top:20px">
  <div role="tabpanel" class="tab-pane active" id="tab-config-admins">
    <div class="panel panel-danger">
      <div class="panel-heading xs-show">{{ lang.admin.admin_details }}</div>
      <div class="panel-body">
        <div class="table-responsive">
          <table class="table table-striped table-condensed" id="adminstable"></table>
        </div>
        <div class="mass-actions-admin">
          <div class="btn-group">
            <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="admins" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
            <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
            <div class="clearfix visible-xs"></div>
            <ul class="dropdown-menu">
              <li><a data-action="edit_selected" data-id="admins" data-api-url='edit/admin' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
              <li><a data-action="edit_selected" data-id="admins" data-api-url='edit/admin' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
              <li role="separator" class="divider"></li>
              <li><a data-action="edit_selected" data-id="admins" data-api-url='edit/admin' data-api-attr='{"disable_tfa":"1"}' href="#">{{ lang.tfa.disable_tfa }}</a></li>
              <li role="separator" class="divider"></li>
              <li><a data-action="delete_selected" data-id="admins" data-api-url='delete/admin' href="#">{{ lang.mailbox.remove }}</a></li>
            </ul>
            <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-id="add_admin" data-toggle="modal" data-target="#addAdminModal" href="#"><i class="bi bi-person-plus-fill"></i> {{ lang.admin.add_admin }}</a>
          </div>
        </div>

        {# TFA #}
        <legend style="margin-top:20px">
          {{ lang.tfa.tfa }}
        </legend>
        <div class="row">
          <div class="col-sm-3 col-xs-5 text-right">{{ lang.tfa.tfa }}:</div>
          <div class="col-sm-9 col-xs-7">
            <p id="tfa_pretty">{{ tfa_data.pretty }}</p>
            {% include 'tfa_keys.twig' %}
            <br>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-3 col-xs-5 text-right">{{ lang.tfa.set_tfa }}:</div>
          <div class="col-sm-9 col-xs-7">
            <select data-style="btn btn-sm dropdown-toggle bs-placeholder btn-default" data-width="fit" id="selectTFA" class="selectpicker" title="{{ lang.tfa.select }}">
              <option value="yubi_otp">{{ lang.tfa.yubi_otp }}</option>
              <option value="u2f">{{ lang.tfa.u2f }}</option>
              <option value="totp">{{ lang.tfa.totp }}</option>
              <option value="none">{{ lang.tfa.none }}</option>
            </select>
          </div>
        </div>

        {# FIDO2 #}
        <legend style="margin-top:20px">
          <i class="bi bi-shield-fill-check"></i>
          {{ lang.fido2.fido2_auth }}</legend>
        <div class="row">
          <div class="col-sm-3 col-xs-12 text-right text-xs-left space20">{{ lang.fido2.known_ids }}:</div>
          <div class="col-sm-9 col-xs-12">
            <div class="table-responsive">
              <table class="table table-striped table-hover table-condensed" id="fido2_keys">
                <tr>
                  <th>ID</th>
                  <th style="min-width:240px;text-align: right">{{ lang.admin.action }}</th>
                </tr>
                {% include 'fido2.twig' %}
            </table>
          </div>
          <br>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-offset-3 col-sm-9">
          <div class="btn-group nowrap">
            <button class="btn btn-sm btn-primary visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline" id="register-fido2">{{ lang.fido2.set_fido2 }}</button>
            <button type="button" class="btn btn-sm btn-xs-lg btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#" id="register-fido2-touchid" style="line-height:1.4;"><i class="bi bi-apple"></i> {{ lang.fido2.set_fido2_touchid }}</a></li>
            </ul>
          </div>
        </div>
      </div>
      <br>
      <div class="row" id="status-fido2">
        <div class="col-sm-3 col-xs-5 text-right">{{ lang.fido2.register_status }}:</div>
        <div class="col-sm-9 col-xs-7">
          <div id="fido2-alerts">-</div>
        </div>
        <br>
      </div>

      <legend style="cursor:pointer;margin-top:40px" data-target="#license" unselectable="on" data-toggle="collapse">
        <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.guid_and_license }}
      </legend>
      <div id="license" class="collapse">
        <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
          <div class="form-group">
            <label class="control-label col-sm-3" for="guid">{{ lang.admin.guid }}:</label>
            <div class="col-sm-9">
              <div class="input-group">
                <span class="input-group-addon">
                  <i class="bi bi-suit-heart{% if gal.valid == true %}-fill text-danger{% endif %}"></i>
                </span>
                <input type="text" id="guid" class="form-control" value="{{ license_guid }}" readonly>
              </div>
              <p class="help-block">
                {{ lang.admin.customer_id }}: {{ gal.c|default('?')|raw }} -
                {{ lang.admin.service_id }}: {{ gal.s|default('?')|raw }} -
                {{ lang.admin.sal_level }}: {{ gal.m|default('?')|raw }}
              </p>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-3 col-sm-9">
              <p class="help-block">{{ lang.admin.license_info|raw }}</p>
              <div class="btn-group">
                <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" name="license_validate_now" type="submit" href="#">{{ lang.admin.validate_license_now }}</button>
              </div>
            </div>
          </div>
        </form>
      </div>

      <legend style="cursor:pointer;" data-target="#admin_api" unselectable="on" data-toggle="collapse">
        <i style="font-size:10pt;" class="bi bi-plus-square"></i> API
      </legend>
      <div id="admin_api" class="collapse">
        <div class="row">
          <div class="col-lg-12">
            <p class="help-block">{{ lang.admin.api_info|raw }}</p>
          </div>
          <div class="col-lg-6">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title"><i class="bi bi-file-earmark-arrow-down"></i> {{ lang.admin.api_read_only }}</h4>
              </div>
              <div class="panel-body">
                <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
                  <div class="form-group">
                    <label class="control-label col-sm-3" for="allow_from_ro">{{ lang.admin.api_allow_from }}:</label>
                    <div class="col-sm-9">
                      <textarea class="form-control textarea-code" rows="7" name="allow_from" id="allow_from_ro" {% if api.ro.skip_ip_check %}disabled{% endif %} required>{{ api.ro.allow_from }}</textarea>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                      <label>
                        <input type="checkbox" name="skip_ip_check" id="skip_ip_check_ro" {% if api.ro.skip_ip_check %}checked{% endif %}> {{ lang.admin.api_skip_ip_check }}
                      </label>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-sm-3">{{ lang.admin.api_key }}:</label>
                    <div class="col-sm-9">
                      <pre>{{ api.ro.api_key|default('-') }}</pre>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                      <label>
                        <input type="checkbox" name="active" {% if api.ro.active %}checked{% endif %}> {{ lang.admin.activate_api }}
                      </label>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                      <div class="btn-group">
                        <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" name="admin_api[ro]" type="submit" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
                        <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default admin-ays-dialog" name="admin_api_regen_key[ro]" type="submit" href="#" {% if not api.ro.api_key %}disabled{% endif %}>{{ lang.admin.regen_api_key }}</button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title"><i class="bi bi-file-earmark-diff"></i> {{ lang.admin.api_read_write }}</h4>
              </div>
              <div class="panel-body">
                <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
                  <div class="form-group">
                    <label class="control-label col-sm-3" for="allow_from_rw">{{ lang.admin.api_allow_from }}:</label>
                    <div class="col-sm-9">
                      <textarea class="form-control textarea-code" rows="7" name="allow_from" id="allow_from_rw" {% if api.rw.skip_ip_check %}disabled{% endif %} required>{{ api.rw.allow_from }}</textarea>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                      <label>
                        <input type="checkbox" name="skip_ip_check" id="skip_ip_check_rw" {% if api.rw.skip_ip_check %}checked{% endif %}> {{ lang.admin.api_skip_ip_check }}
                      </label>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-sm-3" for="admin_api_key">{{ lang.admin.api_key }}:</label>
                    <div class="col-sm-9">
                      <pre>{{ api.rw.api_key|default('-') }}</pre>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                      <label>
                        <input type="checkbox" name="active" {% if api.rw.active %}checked{% endif %}> {{ lang.admin.activate_api }}
                      </label>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                      <div class="btn-group">
                        <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" name="admin_api[rw]" type="submit" href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
                        <button class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default admin-ays-dialog" name="admin_api_regen_key[rw]" type="submit" {% if not api.rw.api_key %}disabled{% endif %} href="#">{{ lang.admin.regen_api_key }}</button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading xs-show">{{ lang.admin.domain_admins }}</div>
    <div class="panel-body">
      <div class="table-responsive">
        <table class="table table-striped table-condensed" id="domainadminstable"></table>
      </div>
      <div class="mass-actions-admin">
        <div class="btn-group">
          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" id="toggle_multi_select_all" data-id="domain_admins" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
          <a class="btn btn-sm btn-xs-half visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }} <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a data-action="edit_selected" data-id="domain_admins" data-api-url='edit/domain-admin' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
            <li><a data-action="edit_selected" data-id="domain_admins" data-api-url='edit/domain-admin' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
            <li role="separator" class="divider"></li>
            <li><a data-action="edit_selected" data-id="domain_admins" data-api-url='edit/domain-admin' data-api-attr='{"disable_tfa":"1"}' href="#">{{ lang.tfa.disable_tfa }}</a></li>
            <li role="separator" class="divider"></li>
            <li><a data-action="delete_selected" data-id="domain_admins" data-api-url='delete/domain-admin' href="#">{{ lang.mailbox.remove }}</a></li>
          </ul>
          <div class="clearfix visible-xs"></div>
          <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" data-id="add_domain_admin" data-toggle="modal" data-target="#addDomainAdminModal" href="#"><i class="bi bi-person-plus-fill"></i> {{ lang.admin.add_domain_admin }}</a>
        </div>
      </div>
    </div>
  </div>
</div>