<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
  <h1 class="h2">
    <i aria-hidden="true" class="bi bi-bar-chart"></i>
    {{ ad_menu_searchstats }}
  </h1>
  <div class="btn-toolbar mb-2 mb-md-0">
    <div class="btn-group mr-2">
      <button class="btn btn-outline-danger" type="button" id="pmf-button-truncate-search-terms"
              data-pmf-csrf-token="{{ csrfToken }}">
        <i aria-hidden="true" class="bi bi-trash"></i>{{ ad_searchterm_del}}
      </button>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <table class="table table-striped align-middle border shadow" id="pmf-table-search-terms">
      <thead>
      <tr>
        <th>{{ ad_searchstats_search_term }}</th>
        <th>{{ ad_searchstats_search_term_count }}</th>
        <th>{{ ad_searchstats_search_term_lang }}</th>
        <th colspan="2">{{ ad_searchstats_search_term_percentage }}</th>
        <th>&nbsp;</th>
      </tr>
      </thead>
      <tfoot>
      <tr>
        <td colspan="6">{{ pagination | raw }}</td>
      </tr>
      </tfoot>
      <tbody>
        {% for searchItem in searchesList %}
          {% set num = searchItem.number / searchesCount * 100 %}
          <tr id="row-search-id-{{ searchItem.id }}">
            <td>{{ searchItem.searchterm }}</td>
            <td>{{ searchItem.number }}</td>
            <td>{{ searchItem.lang | getFromLanguageCode }}</td>
            <td>
              <meter max="100" value="{{ num | number_format(1) }}" title="{{ num | number_format(1) }}%"></meter>
            </td>
            <td>{{ num | number_format(1) }}%</td>
            <td>
              <button class="btn btn-danger pmf-delete-search-term" title="{{ ad_news_delete }}"
                      data-delete-search-term-id="{{ searchItem.id }}" data-csrf-token="{{ csrfTokenDelete }}">
                <i aria-hidden="true" class="bi bi-trash" data-delete-search-term-id="{{ searchItem.id }}"
                   data-csrf-token="{{ csrfTokenDelete }}"></i>
              </button>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
