<div role="tabpanel" class="tab-pane fade" id="tab-config-dkim" role="tabpanel" aria-labelledby="tab-config-dkim">
  <div class="card mb-4">
    <div class="card-header d-flex fs-5">
      <button class="btn d-md-none flex-grow-1 text-start" data-bs-target="#collapse-tab-config-dkim" data-bs-toggle="collapse" aria-controls="ollapse-tab-config-dkim">
        {{ lang.admin.dkim_keys }}
      </button>
      <span class="d-none d-md-block">{{ lang.admin.dkim_keys }}</span>
    </div>
    <div id="collapse-tab-config-dkim" class="card-body collapse" data-bs-parent="#admin-content">
      <div class="btn-group my-4" role="group">
        <input type="checkbox" id="check-dkim_key_valid" class="btn-check" autocomplete="off" data-bs-toggle="collapse" data-bs-target=".dkim_key_valid" checked>
        <label class="btn btn-outline-secondary btn-check-label" for="check-dkim_key_valid">{{ lang.admin.dkim_key_valid }}</label>

        <input type="checkbox" id="check-dkim_key_unused" class="btn-check" autocomplete="off" data-bs-toggle="collapse" data-bs-target=".dkim_key_unused" checked>
        <label class="btn btn-outline-secondary btn-check-label" for="check-dkim_key_unused">{{ lang.admin.dkim_key_unused }}</label>

        <input type="checkbox" id="check-dkim_key_missing" class="btn-check" autocomplete="off" data-bs-toggle="collapse" data-bs-target=".dkim_key_missing" checked>
        <label class="btn btn-outline-secondary btn-check-label" for="check-dkim_key_missing">{{ lang.admin.dkim_key_missing }}</label>
      </div>
      {% for domain, domain_data in dkim_domains %}
        {% if domain_data.dkim %}
          <div class="row collapse show dkim_key_valid">
            <div class="col-md-1"><input type="checkbox" data-id="dkim" name="multi_select" value="{{ domain }}"></div>
            <div class="col-md-3">
              <p>{{ lang.admin.domain }}: <strong>{{ domain }}</strong>
              <p class="dkim-label"><span class="badge fs-6 bg-success">{{ lang.admin.dkim_key_valid }}</span></p>
              <p class="dkim-label"><span class="badge fs-6 bg-primary">{{ lang.admin.dkim_domains_selector }} '{{ domain_data.dkim.dkim_selector }}'</span></p>
              <p class="dkim-label"><span class="badge fs-6 bg-info">{{ domain_data.dkim.length }} bit</span></p>
              </p>
            </div>
            <div class="col-md-8">
              <textarea class="form-control" rows="6" readonly>{{ domain_data.dkim.dkim_txt }}</textarea>
              <small>
                <i class="bi bi-arrow-return-right"></i> 
                <a href="#" data-bs-toggle="modal" data-bs-target="#showDKIMprivKey" id="dkim_priv" data-priv-key="{{ domain_data.dkim.privkey }}"> {{ lang.admin.dkim_private_key }}</a>
              </small>
            </div>
            <hr class="d-block d-md-none">
          </div>
        {% else %}
          <div class="row collapse in dkim_key_missing">
            <div class="col-md-1"><input class="dkim_missing" type="checkbox" data-id="dkim" name="multi_select" value="{{ domain }}" disabled></div>
            <div class="col-md-3">
              <p>{{ lang.admin.domain }}: <strong>{{ domain }}</strong><br><span class="badge fs-6 bg-danger">{{ lang.admin.dkim_key_missing }}</span></p>
            </div>
            <div class="col-md-8"><pre>-</pre></div>
            <hr class="d-block d-md-none">
          </div>
        {% endif %}
        {% for alias_domain, alias_domain_data in domain_data.alias_domains %}
          {% if alias_domain_data.dkim %}
            <div class="row collapse in dkim_key_valid">
              <div class="col-md-1"><input type="checkbox" data-id="dkim" name="multi_select" value="{{ alias_domain }}"></div>
              <div class="col-md-2 offset-md-1">
                <p><small>↳ Alias-Domain: <strong>{{ alias_domain }}</strong></small>
                <p class="dkim-label"><span class="badge fs-6 bg-success">{{ lang.admin.dkim_key_valid }}</span></p>
                <p class="dkim-label"><span class="badge fs-6 bg-primary">Selector '{{ alias_domain_data.dkim.dkim_selector }}'</span></p>
                <p class="dkim-label"><span class="badge fs-6 bg-info">{{ alias_domain_data.dkim.length }} bit</span></p>
                </p>
              </div>
              <div class="col-md-8">
                <pre>{{ alias_domain_data.dkim.dkim_txt }}</pre>
                <p data-bs-toggle="modal" data-bs-target="#showDKIMprivKey" id="dkim_priv" style="cursor:pointer;margin-top:-8pt" data-priv-key="{{ alias_domain_data.dkim.privkey }}"><small><i class="bi bi-arrow-return-right"></i> Private key</small></p>
              </div>
              <hr class="d-block d-md-none">
            </div>
          {% else %}
            <div class="row collapse in dkim_key_missing">
              <div class="col-md-1"><input class="dkim_missing" type="checkbox" data-id="dkim" name="multi_select" value="{{ alias_domain }}" disabled></div>
              <div class="col-md-2 offset-md-1">
                <p><small>↳ Alias-Domain: <strong>{{ alias_domain }}</strong><br></small><span class="badge fs-6 bg-danger">{{ lang.admin.dkim_key_missing }}</span></p>
              </div>
              <div class="col-md-8"><pre>-</pre></div>
              <hr class="d-block d-md-none">
            </div>
          {% endif %}
        {% endfor %}
      {% endfor %}
      {% for blind, data in dkim_blind_domains|filter(data => data.dkim is not null) %}
        <div class="row collapse in dkim_key_unused">
          <div class="col-md-1"><input type="checkbox" data-id="dkim" name="multi_select" value="{{ blind }}"></div>
          <div class="col-md-3">
            <p>{{ lang.admin.domain }}: <strong>{{ blind }}</strong>
            <p class="dkim-label"><span class="badge fs-6 bg-warning">{{ lang.admin.dkim_key_unused }}</span></p>
            <p class="dkim-label"><span class="badge fs-6 bg-primary">Selector '{{ data.dkim.dkim_selector }}'</span></p>
            <p class="dkim-label"><span class="badge fs-6 bg-info">{{ data.dkim.length }} bit</span></p>
            </p>
          </div>
          <div class="col-md-8">
            <pre>{{ data.dkim.dkim_txt }}</pre>
            <p data-bs-toggle="modal" data-bs-target="#showDKIMprivKey" id="dkim_priv" style="cursor:pointer;margin-top:-8pt" data-priv-key="{{ data.dkim.privkey }}"><small><i class="bi bi-arrow-return-right"></i> Private key</small></p>
          </div>
          <hr class="d-block d-md-none">
        </div>
      {% endfor %}

      <div class="mass-actions-admin">
        <div class="btn-group btn-group-sm">
          <button type="button" id="toggle_multi_select_all" data-id="dkim" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</button>
          <button type="button" data-action="delete_selected" name="delete_selected" data-id="dkim" data-api-url="delete/dkim" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-danger"><i class="bi bi-trash"></i> {{ lang.admin.remove }}</button>
        </div>
      </div>

      <legend style="margin-top:40px">{{ lang.admin.dkim_add_key }}</legend><hr />
      <form class="form" data-id="dkim" role="form" method="post">
        <div class="mb-4">
          <label for="dkim_add_domains">{{ lang.admin.domain_s }}</label>
          <input class="form-control input-sm" id="dkim_add_domains" name="domains" placeholder="example.org, example.com" required>
          <small><i class="bi bi-arrow-return-right"></i> <a href="#" id="dkim_missing_keys">{{ lang.admin.dkim_domains_wo_keys }}</a></small>
        </div>
        <div class="mb-2">
          <label for="dkim_selector">{{ lang.admin.dkim_domains_selector }}</label>
          <input class="form-control input-sm" id="dkim_selector" name="dkim_selector" value="dkim" required>
        </div>
        <div class="row mb-4">
          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
            <select data-style="btn btn-secondary btn-sm" class="form-control" id="key_size" name="key_size" title="{{ lang.admin.dkim_key_length }}" required>
              <option data-subtext="bits">1024</option>
              <option data-subtext="bits">2048</option>
            </select>
          </div>
        </div>
        <button class="btn btn-sm d-block d-sm-inline btn-success" data-action="add_item" data-id="dkim" data-api-url='add/dkim' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.add }}</button>
      </form>

      <legend data-bs-target="#import_dkim" style="margin-top:40px;cursor:pointer" unselectable="on" data-bs-toggle="collapse">
        <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.import_private_key }}
      </legend>
      <hr />
      <div id="import_dkim" class="collapse">
        <form class="form" data-id="dkim_import" role="form" method="post">
          <div class="mb-2">
            <label for="dkim_import_domain">{{ lang.admin.domain }}:</label>
            <input class="form-control input-sm" id="dkim_import_domain" name="domain" placeholder="example.org" required>
          </div>
          <div class="mb-2">
            <label for="dkim_import_selector">{{ lang.admin.dkim_domains_selector }}:</label>
            <input class="form-control input-sm" id="dkim_import_selector" name="dkim_selector" value="dkim" required>
          </div>
          <div class="mb-4">
            <label for="private_key_file">{{ lang.admin.private_key }}: (RSA PKCS#8)</label>
            <textarea class="form-control input-sm" rows="10" name="private_key_file" id="private_key_file" required placeholder="-----BEGIN RSA KEY-----"></textarea>
          </div>
          <div class="mb-2">
            <label>
              <input type="checkbox" name="overwrite_existing" value="1"> {{ lang.admin.dkim_overwrite_key }}
            </label>
          </div>
          <button class="btn btn-sm d-block d-sm-inline btn-secondary" data-action="add_item" data-id="dkim_import" data-api-url='add/dkim_import' data-api-attr='{}' href="#"><i class="bi bi-plus-lg"></i> {{ lang.admin.import }}</button>
        </form>
      </div>

      <legend data-bs-target="#duplicate_dkim" style="margin-top:40px;cursor:pointer" unselectable="on" data-bs-toggle="collapse">
        <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.duplicate_dkim }}
      </legend>
      <hr />
      <div id="duplicate_dkim" class="collapse">
        <form class="form-horizontal" data-id="dkim_duplicate" role="form" method="post">
          <div class="row mb-2">
            <label class="control-label col-sm-2 text-sm-end" for="from_domain">{{ lang.admin.dkim_from }}:</label>
            <div class="col-sm-10 col-md-6 col-lg-4 col-xl-3">
              <select data-style="btn btn-secondary btn-sm"
                      data-live-search="true"
                      data-id="dkim_duplicate"
                      title="{{ lang.admin.dkim_from_title }}"
                      name="from_domain" id="from_domain" class="full-width-select form-control" required>
                {% for dkim_domain in dkim_domains_with_keys %}
                  <option value="{{ dkim_domain }}">{{ dkim_domain }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="row mb-4">
            <label class="control-label col-sm-2 text-sm-end" for="to_domain">{{ lang.admin.dkim_to }}:</label>
            <div class="col-sm-10 col-md-6 col-lg-4 col-xl-3">
              <select
                data-live-search="true"
                data-style="btn btn-secondary btn-sm"
                data-id="dkim_duplicate"
                title="{{ lang.admin.dkim_to_title }}"
                name="to_domain" id="to_domain" class="full-width-select form-control" multiple required>
                {% for domain in all_domains %}
                  <option value="{{ domain }}">{{ domain }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <button class="btn btn-sm d-block d-sm-inline btn-secondary" data-action="add_item" data-id="dkim_duplicate" data-api-url='add/dkim_duplicate' data-api-attr='{}' href="#"><i class="bi bi-clipboard-plus"></i> {{ lang.admin.duplicate }}</button>
        </form>
      </div>
    </div>
  </div>
</div>