{#
/**
 * @file
 * Cache runtime records table.
 *
 * Available variables:
 * - section: Runtime records section payload.
 */
#}

<section class="no-cache-records">
  <div class="no-cache-records__header">
    <div class="no-cache-records__copy">
      <h3 class="no-cache-runtime-health__section-title">{{ section.title }}</h3>
      <p class="no-cache-records__description">{{ section.description }}</p>
    </div>

    {% if section.export_url %}
      <div class="no-cache-records__actions">
        <a href="{{ section.export_url }}" class="no-cache-records__export">
          {{ 'Export CSV'|t }}
        </a>
      </div>
    {% endif %}
  </div>

  {% if section.rows is not empty %}
    <div class="no-cache-records__toolbar">
      <div class="no-cache-records__search">
        <label for="no-cache-records-search" class="visually-hidden">
          {{ 'Search cache runtime records'|t }}
        </label>
        <input
          id="no-cache-records-search"
          type="search"
          class="no-cache-records__search-input"
          placeholder="{{ 'Search records…'|t }}"
          data-no-cache-record-search/>
      </div>
    </div>

    <div class="no-cache-records__table-wrap">
      <table class="no-cache-records__table" data-no-cache-record-table>
        <thead>
        <tr>
          {% for header in section.headers %}
            <th>{{ header }}</th>
          {% endfor %}
        </tr>
        </thead>
        <tbody data-no-cache-record-table-body>
        {% for row in section.rows %}
          <tr
            data-no-cache-record-row
            data-search-text="{{ [
              row.time,
              row.event_type,
              row.cache_layer,
              row.method,
              row.context,
              row.status
            ]|join(' ')|lower }}">
            <td>{{ row.time }}</td>
            <td>{{ row.event_type }}</td>
            <td>{{ row.cache_layer }}</td>
            <td>{{ row.method }}</td>
            <td>{{ row.context }}</td>
            <td>{{ row.status }}</td>
            <td>
              <button
                type="button"
                class="no-cache-records__details-button"
                data-no-cache-record-details
                data-record='{{ row.details|json_encode|e('html_attr') }}'>
                {{ 'Inspect'|t }}
              </button>
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="no-cache-records__footer">
      <div class="no-cache-records__results" data-no-cache-record-results></div>

      <div class="no-cache-records__pagination" data-no-cache-record-pagination>
        <button type="button" class="no-cache-records__page-button" data-no-cache-record-prev>
          {{ 'Previous'|t }}
        </button>
        <span class="no-cache-records__page-status" data-no-cache-record-page-status></span>
        <button type="button" class="no-cache-records__page-button" data-no-cache-record-next>
          {{ 'Next'|t }}
        </button>
      </div>
    </div>

    <div class="no-cache-records__modal" hidden data-no-cache-record-modal aria-hidden="true">
      <div class="no-cache-records__modal-dialog" role="dialog" aria-modal="true"
           aria-labelledby="no-cache-record-modal-title">
        <div class="no-cache-records__modal-header">
          <h4 id="no-cache-record-modal-title"
              class="no-cache-records__modal-title">{{ 'Cache runtime record details'|t }}</h4>
          <button type="button" class="no-cache-records__modal-close" data-no-cache-record-modal-close
                  aria-label="{{ 'Close dialog'|t }}">×
          </button>
        </div>

        <div class="no-cache-records__modal-body">
          <div class="no-cache-records__modal-grid">
            <div><strong>{{ 'Time'|t }}</strong><span data-record-time></span></div>
            <div><strong>{{ 'Event type'|t }}</strong><span data-record-type></span></div>
            <div><strong>{{ 'Layer'|t }}</strong><span data-record-layer></span></div>
            <div><strong>{{ 'Method'|t }}</strong><span data-record-method></span></div>
            <div><strong>{{ 'Context'|t }}</strong><span data-record-context></span></div>
            <div><strong>{{ 'Status'|t }}</strong><span data-record-status></span></div>
          </div>

          <pre class="no-cache-records__payload" data-record-payload></pre>
        </div>
      </div>
    </div>
  {% else %}
    <div class="no-dashboard-empty-state">
      {{ section.empty_message }}
    </div>
  {% endif %}
</section>
