<div role="tabpanel" class="tab-pane fade" id="tab-config-f2b" role="tabpanel" aria-labelledby="tab-config-f2b">
  <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-f2b" data-bs-toggle="collapse" aria-controls="ollapse-tab-config-f2b">
        {{ lang.admin.f2b_parameters }}
      </button>
      <span class="d-none d-md-block">{{ lang.admin.f2b_parameters }}</span>
    </div>
    <div id="collapse-tab-config-f2b" class="card-body collapse" data-bs-parent="#admin-content">
      <form class="form" data-id="f2b" role="form" method="post">
        <div class="mb-4">
          <label for="f2b_ban_time">{{ lang.admin.f2b_ban_time }}:</label>
          <input type="number" class="form-control" id="f2b_ban_time" name="ban_time" value="{{ f2b_data.ban_time }}" required>
        </div>
        <div class="mb-4">
          <label for="f2b_max_attempts">{{ lang.admin.f2b_max_attempts }}:</label>
          <input type="number" class="form-control" id="f2b_max_attempts" name="max_attempts" value="{{ f2b_data.max_attempts }}" required>
        </div>
        <div class="mb-4">
          <label for="f2b_retry_window">{{ lang.admin.f2b_retry_window }}:</label>
          <input type="number" class="form-control" id="f2b_retry_window" name="retry_window" value="{{ f2b_data.retry_window }}" required>
        </div>
        <div class="mb-4">
          <label for="f2b_netban_ipv4">{{ lang.admin.f2b_netban_ipv4 }}:</label>
          <div class="input-group">
            <span class="input-group-text">/</span>
            <input type="number" class="form-control" id="f2b_netban_ipv4" name="netban_ipv4" value="{{ f2b_data.netban_ipv4 }}" required>
          </div>
        </div>
        <div class="mb-4">
          <label for="f2b_netban_ipv6">{{ lang.admin.f2b_netban_ipv6 }}:</label>
          <div class="input-group">
            <span class="input-group-text">/</span>
            <input type="number" class="form-control" id="f2b_netban_ipv6" name="netban_ipv6" value="{{ f2b_data.netban_ipv6 }}" required>
          </div>
        </div>
        <hr>
        <p class="text-muted">{{ lang.admin.f2b_list_info|raw }}</p>
        <div class="mb-2">
          <label for="f2b_whitelist">{{ lang.admin.f2b_whitelist }}:</label>
          <textarea class="form-control" id="f2b_whitelist" name="whitelist" rows="5">{{ f2b_data.whitelist }}</textarea>
        </div>
        <div class="mb-4">
          <label for="f2b_blacklist">{{ lang.admin.f2b_blacklist }}:</label>
          <textarea class="form-control" id="f2b_blacklist" name="blacklist" rows="5">{{ f2b_data.blacklist }}</textarea>
        </div>
        <div class="btn-group">
          <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" data-action="edit_selected" data-item="self" data-id="f2b" data-api-url='edit/fail2ban' data-api-attr='{}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
          <a href="#" role="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" data-bs-toggle="modal" data-container="netfilter-mailcow" data-bs-target="#RestartContainer"><i class="bi bi-arrow-repeat"></i> {{ lang.header.restart_netfilter }}</a>
        </div>
      </form>
      <legend data-bs-target="#f2b_regex_filters" 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.f2b_filter }}
      </legend>
      <hr />
      <div id="f2b_regex_filters" class="collapse">
        <p class="text-muted">{{ lang.admin.f2b_regex_info }}</p>
        <form class="form-inline" data-id="f2b_regex" role="form" method="post">
          <table class="table table-condensed" id="f2b_regex_table">
            <tr>
              <th width="50px">ID</th>
              <th>RegExp</th>
              <th width="100px">&nbsp;</th>
            </tr>
            {% for regex_id, regex_val in f2b_data.regex %}
              <tr>
                <td><input disabled class="input-sm input-xs-lg form-control" style="text-align:center" data-id="f2b_regex" type="text" name="app" required value="{{ regex_id }}"></td>
                <td><input class="input-sm input-xs-lg form-control regex-input" data-id="f2b_regex" type="text" name="regex" required value="{{ regex_val }}"></td>
                <td><a href="#" role="button" class="btn btn-sm btn-xs-lg btn-secondary h-100 w-100" type="button">{{ lang.admin.remove_row }}</a></td>
              </tr>
            {% endfor %}
          </table>
          <p><div class="btn-group">
            <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-success" data-action="edit_selected" data-item="admin" data-id="f2b_regex" data-reload="no" data-api-url='edit/fail2ban' data-api-attr='{"action":"edit-regex"}' href="#"><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
            <button class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary admin-ays-dialog" data-action="edit_selected" data-item="self" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"reset-regex"}' href="#">{{ lang.admin.reset_default }}</button>
            <button class="btn btn-sm d-block d-sm-inline btn-secondary" type="button" id="add_f2b_regex_row"><i class="bi bi-plus-lg"></i> {{ lang.admin.add_row }}</button>
          </div></p>
        </form>
      </div>

      <p class="text-muted">{{ lang.admin.ban_list_info|raw }}</p>
      {% if not f2b_data.active_bans and not f2b_data.perm_bans %}
        <i>{{ lang.admin.no_active_bans }}</i>
      {% endif %}
      {% for active_ban in f2b_data.active_bans %}
        <p>
          <span class="badge fs-5 bg-info" style="padding:4px;font-size:85%;">
            <i class="bi bi-funnel-fill"></i>
            <a href="https://bgp.he.net/ip/{{ active_ban.ip }}" target="_blank" style="color:white">
              {{ active_ban.network }}
            </a>
            ({{ active_ban.banned_until }}) -
            {% if active_ban.queued_for_unban == 0 %}
            <a data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"unban"}' href="#">[{{ lang.admin.queue_unban }}]</a>
            <a data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"whitelist"}' href="#">[whitelist]</a>
            <a data-action="edit_selected" data-item="{{ active_ban.network }}" data-id="f2b-quick" data-api-url='edit/fail2ban' data-api-attr='{"action":"blacklist"}' href="#">[blacklist (<b>needs restart</b>)]</a>
            {% else %}
            <i>{{ lang.admin.unban_pending }}</i>
            {% endif %}
          </span>
        </p>
      {% endfor %}
      <hr>
      {% for perm_ban in f2b_data.perm_bans %}
        <p>
          <span class="badge fs-5 bg-danger" style="padding: 0.1em 0.4em 0.1em;">
            <i class="bi bi-funnel-fill"></i>
            <a href="https://bgp.he.net/ip/{{ perm_ban.ip }}" target="_blank" style="color:white">
              {{ perm_ban.network }}
            </a>
          </span>
        </p>
      {% endfor %}
    </div>
  </div>
</div>