<div role="tabpanel" class="tab-pane fade" id="tab-filters" role="tabpanel" aria-labelledby="tab-filters">
  <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-filters" data-bs-toggle="collapse" aria-controls="collapse-tab-filters">
        {{ lang.mailbox.filters }} <span class="badge bg-info table-lines"></span>
      </button>
      <span class="d-none d-md-block">{{ lang.mailbox.filters }} <span class="badge bg-info table-lines"></span></span>

      <div class="btn-group ms-auto d-flex">
        <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_filter_table" data-table="filter_table">{{ lang.admin.refresh }}</button>
      </div>
    </div>
    <div id="collapse-tab-filters" class="card-body collapse" data-bs-parent="#mail-content">
      <div class="mass-actions-mailbox mb-4">
        <div class="btn-group" data-acl="{{ acl.filters }}">
          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="filter_item" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
            <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"filter_type":"prefilter"}' href="#">{{ lang.mailbox.set_prefilter }}</a></li>
            <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"filter_type":"postfilter"}' href="#">{{ lang.mailbox.set_postfilter }}</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" data-action="delete_selected" data-text="{{ lang.user.eas_reset }}?" data-id="filter_item" data-api-url='delete/filter' href="#">{{ lang.mailbox.remove }}</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" data-datatables-expand="filter_table">{{ lang.datatables.expand_all }}</a></li>
            <li><a class="dropdown-item" data-datatables-collapse="filter_table">{{ lang.datatables.collapse_all }}</a></li>
          </ul>
          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</a>
        </div>
      </div>
      <p class="text-muted">{{ lang.mailbox.sieve_info|raw }}</p><br>
      <table id="filter_table" class="table table-striped dt-responsive w-100"></table>
      <div class="mass-actions-mailbox mt-4 mb-4">
        <div class="btn-group" data-acl="{{ acl.filters }}">
          <a class="btn btn-sm btn-xs-half btn-secondary" id="toggle_multi_select_all" data-id="filter_item" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
          <a class="btn btn-sm btn-xs-half btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.quick_actions }}</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"active":"1"}' href="#">{{ lang.mailbox.activate }}</a></li>
            <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"active":"0"}' href="#">{{ lang.mailbox.deactivate }}</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"filter_type":"prefilter"}' href="#">{{ lang.mailbox.set_prefilter }}</a></li>
            <li><a class="dropdown-item" data-action="edit_selected" data-id="filter_item" data-api-url='edit/filter' data-api-attr='{"filter_type":"postfilter"}' href="#">{{ lang.mailbox.set_postfilter }}</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" data-action="delete_selected" data-text="{{ lang.user.eas_reset }}?" data-id="filter_item" data-api-url='delete/filter' href="#">{{ lang.mailbox.remove }}</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" data-datatables-expand="filter_table">{{ lang.datatables.expand_all }}</a></li>
            <li><a class="dropdown-item" data-datatables-collapse="filter_table">{{ lang.datatables.collapse_all }}</a></li>
          </ul>
          <a class="btn btn-sm btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</a>
        </div>
      </div>
      <div class="{% if mailcow_cc_role != 'admin' %}hidden{% endif %}">
        <div class="row">
          <div class="col-lg-6 mt-4">
            <h5>Global Prefilter</h5>
            <form class="form-horizontal" data-cached-form="false" role="form" data-id="add_prefilter">
              <div class="row">
                <div class="col-sm-12">
                  <textarea autocorrect="off" spellcheck="false" autocapitalize="none" class="form-control textarea-code script_data" rows="10" name="script_data" required>{{ global_filters.prefilter }}</textarea>
                </div>
              </div>
              <div class="row mt-2">
                <div class="col-sm-10 add_filter_btns">
                  <div class="btn-group">
                    <button class="btn btn-sm btn-xs-half btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
                    <button class="btn btn-sm btn-xs-half btn-success add_sieve_script" data-action="add_item" data-id="add_prefilter" data-api-url='add/global-filter' data-api-attr='{"filter_type":"prefilter"}' href="#" disabled><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="col-lg-6 mt-4">
            <h5>Global Postfilter</h5>
            <form class="form-horizontal" data-cached-form="false" role="form" data-id="add_postfilter">
              <div class="row">
                <div class="col-sm-12">
                  <textarea autocorrect="off" spellcheck="false" autocapitalize="none" class="form-control textarea-code script_data" rows="10" name="script_data" required>{{ global_filters.postfilter }}</textarea>
                </div>
              </div>
              <div class="row mt-2">
                <div class="col-sm-10 add_filter_btns">
                  <div class="btn-group">
                    <button class="btn btn-sm btn-xs-half btn-secondary validate_sieve" href="#">{{ lang.add.validate }}</button>
                    <button class="btn btn-sm btn-xs-half btn-success add_sieve_script" data-action="add_item" data-id="add_postfilter" data-api-url='add/global-filter' data-api-attr='{"filter_type":"postfilter"}' href="#" disabled><i class="bi bi-check-lg"></i> {{ lang.admin.save }}</button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>