{#
/**
 * @file
 * DOM-based modal template for the technical insights explorer.
 *
 * The modal is rendered once and reused by JavaScript.
 * Internal fragments are exposed through hidden template nodes.
 */
#}

<div
  class="no-explorer-modal"
  data-no-explorer-modal-root
  data-label-page="{{ 'Page'|t }}"
  data-label-of="{{ 'of'|t }}"
  data-label-no-metadata="{{ 'No metadata available for this record.'|t }}"
  data-label-dataset-default="{{ 'Technical Insight'|t }}"
  data-label-dataset-slow-endpoints="{{ 'Slow Endpoints'|t }}"
  data-label-dataset-ajax-endpoints="{{ 'AJAX Endpoints'|t }}"
  data-label-dataset-external-requests="{{ 'External Requests'|t }}"
  data-label-path="{{ 'Path'|t }}"
  data-label-route="{{ 'Route'|t }}"
  data-label-live-trace-details="{{ 'Live trace details'|t }}"
  data-label-details="{{ 'Details'|t }}"
  data-label-captured-rows="{{ 'Captured rows'|t }}"
  hidden
>
  <div class="no-explorer-modal__backdrop" data-no-explorer-modal-close></div>

  <div
    class="no-explorer-modal__dialog"
    role="dialog"
    aria-modal="true"
    aria-label="{{ 'Technical insight details'|t }}"
  >
    <div class="no-explorer-modal__header">
      <div class="no-explorer-modal__detail-topbar">
        <div class="no-explorer-modal__dataset-badge" data-no-explorer-modal-dataset-badge></div>
      </div>

      <div class="no-explorer-modal__heading">
        <h3 class="no-explorer-modal__title" data-no-explorer-modal-title></h3>
        <p class="no-explorer-modal__subtitle" data-no-explorer-modal-subtitle></p>
      </div>

      <button
        type="button"
        class="no-explorer-modal__close"
        data-no-explorer-modal-close="true"
        aria-label="{{ 'Close details'|t }}"
      >×
      </button>
    </div>

    <div class="no-explorer-modal__top">
      <div class="no-explorer-modal__summary" data-no-explorer-modal-summary></div>
    </div>

    <div class="no-explorer-modal__content">
      <section class="no-explorer-modal__table-panel">
        <div class="no-explorer-modal__table-header">
          <div class="no-explorer-modal__table-heading">
            <div class="no-explorer-modal__panel-title" data-no-explorer-modal-table-title></div>
            <div class="no-explorer-modal__table-caption">
              {{ 'Select a captured request to inspect the complete trace payload and correlation metadata.'|t }}
            </div>
          </div>
        </div>

        <div class="no-explorer-modal__table-controls">
          <div class="no-explorer-modal__search-wrap">
            <input
              type="text"
              class="no-explorer-modal__search"
              data-no-explorer-modal-search
              placeholder="{{ 'Filter by path, route, trace ID, method, target...'|t }}"
            />
          </div>

          <button
            type="button"
            class="no-explorer-modal__toolbar-button"
            data-no-explorer-modal-export="filtered"
          >{{ 'Export filtered'|t }}</button>

          <button
            type="button"
            class="no-explorer-modal__toolbar-button"
            data-no-explorer-modal-export="full"
          >{{ 'Export full'|t }}</button>
        </div>

        <div class="no-explorer-modal__table-shell">
          <div class="no-explorer-modal__table-wrap">
            <table class="no-explorer-modal__table">
              <thead>
              <tr data-no-explorer-modal-table-head></tr>
              </thead>
              <tbody data-no-explorer-modal-table-body></tbody>
            </table>

            <div class="no-explorer-modal__empty" data-no-explorer-modal-empty hidden>
              {{ 'No detail rows are available for this selection.'|t }}
            </div>
          </div>

          <div class="no-explorer-modal__pagination">
            <button
              type="button"
              class="no-explorer-modal__pager"
              data-no-explorer-page="prev"
            >{{ 'Previous'|t }}</button>

            <span class="no-explorer-modal__page-label" data-no-explorer-page-label>
              {{ 'Page 1'|t }}
            </span>

            <button
              type="button"
              class="no-explorer-modal__pager"
              data-no-explorer-page="next"
            >{{ 'Next'|t }}</button>
          </div>
        </div>
      </section>

      <aside class="no-explorer-modal__detail-panel">
        <div class="no-explorer-modal__detail-header">
          <div class="no-explorer-modal__detail-heading">
            <div class="no-explorer-modal__panel-title" data-no-explorer-modal-detail-title></div>
            <p class="no-explorer-modal__detail-description" data-no-explorer-modal-detail-description></p>
          </div>

          <div class="no-explorer-modal__scroll-hint">
            {{ 'Scrollable panel'|t }}
          </div>
        </div>

        <div class="no-explorer-modal__detail-shell">
          <div class="no-explorer-modal__detail-meta-wrap">
            <div class="no-explorer-modal__detail-meta" data-no-explorer-modal-detail-meta></div>
          </div>

          <div class="no-explorer-modal__payload-section">
            <label class="no-explorer-modal__payload-label">
              {{ 'Payload'|t }}
            </label>

            <div class="no-explorer-modal__payload-wrap">
              <textarea
                class="no-explorer-modal__payload"
                data-no-explorer-modal-payload
                readonly
              ></textarea>
            </div>
          </div>
        </div>
      </aside>
    </div>
  </div>

  <template data-no-explorer-template="summary-card">
    <div class="no-explorer-modal__summary-card">
      <span class="no-explorer-modal__summary-icon" data-role="icon"></span>
      <div class="no-explorer-modal__summary-content">
        <span class="no-explorer-modal__summary-label" data-role="label"></span>
        <strong class="no-explorer-modal__summary-value" data-role="value"></strong>
      </div>
    </div>
  </template>

  <template data-no-explorer-template="meta-row">
    <div class="no-explorer-modal__meta-row">
      <div class="no-explorer-modal__meta-label-cell" data-role="label"></div>
      <div class="no-explorer-modal__meta-value-cell" data-role="value"></div>
    </div>
  </template>

  <template data-no-explorer-template="table-row">
    <tr class="no-explorer-modal__row" data-no-explorer-modal-row aria-selected="false"></tr>
  </template>

  <template data-no-explorer-template="table-cell">
    <td></td>
  </template>

  <template data-no-explorer-template="status-badge">
    <span class="no-explorer-modal__status"></span>
  </template>

  <template data-no-explorer-template="empty-inline">
    <div class="no-explorer-modal__empty-inline"></div>
  </template>
</div>
