<div role="tabpanel" class="tab-pane" id="tab-config-dkim">
  <div class="panel panel-default">
    <div class="panel-heading">{{ lang.admin.dkim_keys }}</div>
    <div class="panel-body">
      <div class="btn-group" data-toggle="button" style="margin-bottom: 20px;">
        <a class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default active" href="#" data-toggle="collapse" data-target=".dkim_key_valid">{{ lang.admin.dkim_key_valid }}</a>
        <a class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default active" href="#" data-toggle="collapse" data-target=".dkim_key_unused">{{ lang.admin.dkim_key_unused }}</a>
        <a class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default active" href="#" data-toggle="collapse" data-target=".dkim_key_missing">{{ lang.admin.dkim_key_missing }}</a>
        <div class="clearfix visible-xs"></div>
      </div>
      {% for domain, domain_data in dkim_domains %}
        {% if 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="{{ domain }}"></div>
            <div class="col-md-3">
              <p>{{ lang.admin.domain }}: <strong>{{ domain }}</strong>
              <p class="dkim-label"><span class="label label-success">{{ lang.admin.dkim_key_valid }}</span></p>
              <p class="dkim-label"><span class="label label-primary">{{ lang.admin.dkim_domains_selector }} '{{ domain_data.dkim.dkim_selector }}'</span></p>
              <p class="dkim-label"><span class="label label-info">{{ domain_data.dkim.length }} bit</span></p>
              </p>
            </div>
            <div class="col-md-8">
              <pre>{{ domain_data.dkim.dkim_txt }}</pre>
              <p data-toggle="modal" data-target="#showDKIMprivKey" id="dkim_priv" style="cursor:pointer;margin-top:-8pt" data-priv-key="{{ domain_data.dkim.privkey }}"><small><i class="bi bi-arrow-return-right"></i> {{ lang.admin.dkim_private_key }}</small></p>
            </div>
            <hr class="visible-xs visible-sm">
          </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="label label-danger">{{ lang.admin.dkim_key_missing }}</span></p>
            </div>
            <div class="col-md-8"><pre>-</pre></div>
            <hr class="visible-xs visible-sm">
          </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 col-md-offset-1">
                <p><small>↳ Alias-Domain: <strong>{{ alias_domain }}</strong></small>
                <p class="dkim-label"><span class="label label-success">{{ lang.admin.dkim_key_valid }}</span></p>
                <p class="dkim-label"><span class="label label-primary">Selector '{{ alias_domain_data.dkim.dkim_selector }}'</span></p>
                <p class="dkim-label"><span class="label label-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-toggle="modal" data-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="visible-xs visible-sm">
            </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 col-md-offset-1">
                <p><small>↳ Alias-Domain: <strong>{{ alias_domain }}</strong><br></small><span class="label label-danger">{{ lang.admin.dkim_key_missing }}</span></p>
              </div>
              <div class="col-md-8"><pre>-</pre></div>
              <hr class="visible-xs visible-sm">
            </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="label label-warning">{{ lang.admin.dkim_key_unused }}</span></p>
            <p class="dkim-label"><span class="label label-primary">Selector '{{ data.dkim.dkim_selector }}'</span></p>
            <p class="dkim-label"><span class="label label-info">{{ data.dkim.length }} bit</span></p>
            </p>
          </div>
          <div class="col-md-8">
            <pre>{{ data.dkim.dkim_txt }}</pre>
            <p data-toggle="modal" data-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="visible-xs visible-sm">
        </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 visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default"><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 visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-danger"><i class="bi bi-trash"></i> {{ lang.admin.remove }}</button>
          <div class="clearfix visible-xs"></div>
        </div>
      </div>

      <legend style="margin-top:40px">{{ lang.admin.dkim_add_key }}</legend>
      <form class="form" data-id="dkim" role="form" method="post">
        <div class="form-group">
          <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="form-group">
          <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="form-group">
          <select data-style="btn btn-default 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>
        <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-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-target="#import_dkim" style="margin-top:40px;cursor:pointer" unselectable="on" data-toggle="collapse">
        <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.import_private_key }}
      </legend>
      <div id="import_dkim" class="collapse">
        <form class="form" data-id="dkim_import" role="form" method="post">
          <div class="form-group">
            <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="form-group">
            <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="form-group">
            <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="form-group">
            <label>
              <input type="checkbox" name="overwrite_existing" value="1"> {{ lang.admin.dkim_overwrite_key }}
            </label>
          </div>
          <button class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" 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-target="#duplicate_dkim" style="margin-top:40px;cursor:pointer" unselectable="on" data-toggle="collapse">
        <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.duplicate_dkim }}
      </legend>
      <div id="duplicate_dkim" class="collapse">
        <form class="form-horizontal" data-id="dkim_duplicate" role="form" method="post">
          <div class="form-group">
            <label class="control-label col-sm-2" for="from_domain">{{ lang.admin.dkim_from }}:</label>
            <div class="col-sm-10">
              <select data-style="btn btn-default 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="form-group">
            <label class="control-label col-sm-2" for="to_domain">{{ lang.admin.dkim_to }}:</label>
            <div class="col-sm-10">
              <select
                data-live-search="true"
                data-style="btn btn-default 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 visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default" 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>