{#
/**
 * @file
 * Technical insights explorer section for Native Observability Dashboard.
 *
 * Available variables:
 * - section: Technical insights section payload.
 */
#}

<section class="no-dashboard-section no-dashboard-section--technical-insights">
  <div class="no-section-toolbar">
    <div class="no-section-header">
      <div class="no-section-header__content">
        <span class="no-section-title">{{ section.title }}</span>

        {% if section.time_range is defined and section.time_range %}
          <span class="no-section-subtitle">{{ section.time_range }}</span>
        {% endif %}
      </div>
    </div>
  </div>

  {% if section.subtitle is defined and section.subtitle %}
    <div class="no-section-description">{{ section.subtitle }}</div>
  {% endif %}

  <span class="no-section-divider"></span>

  {% if section.datasets is empty %}
    <div class="no-dashboard-empty-state">
      {{ section.reason|default('No technical datasets are available for the selected range.'|t) }}
    </div>
  {% else %}
    <div class="no-technical-explorer" data-no-technical-explorer>
      <div class="no-technical-explorer__tabs">
        {% for dataset in section.datasets %}
          <button
            type="button"
            class="no-technical-explorer__tab"
            data-no-explorer-dataset-button="{{ dataset.key }}"
            aria-pressed="{{ loop.first ? 'true' : 'false' }}">
            {{ dataset.label }}
          </button>
        {% endfor %}
      </div>

      <p class="no-technical-explorer__description" data-no-explorer-description></p>

      <div class="no-technical-explorer__toolbar">
        <input
          type="search"
          class="no-technical-explorer__search"
          data-no-explorer-search
          placeholder="{{ 'Search'|t }}"/>

        <select class="no-technical-explorer__page-size" data-no-explorer-page-size>
          <option value="10">{{ '10 rows'|t }}</option>
          <option value="25">{{ '25 rows'|t }}</option>
          <option value="50">{{ '50 rows'|t }}</option>
          <option value="100">{{ '100 rows'|t }}</option>
        </select>

        <div class="no-technical-explorer__actions">
          <button type="button" class="no-technical-explorer__action" data-no-explorer-export-filtered>
            {{ 'Export filtered'|t }}
          </button>

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

          <button type="button" class="no-technical-explorer__action" data-no-explorer-flush>
            {{ 'Flush dataset'|t }}
          </button>
        </div>
      </div>

      <div class="no-technical-explorer__flush-help" data-no-explorer-flush-help></div>

      <div class="no-technical-explorer__table-wrap">
        <table class="no-technical-explorer__table">
          <thead>
          <tr data-no-explorer-head></tr>
          </thead>
          <tbody data-no-explorer-body></tbody>
        </table>

        <div class="no-technical-explorer__empty" data-no-explorer-empty hidden></div>
      </div>

      <div class="no-technical-explorer__pagination">
        <div class="no-technical-explorer__pagination-summary" data-no-explorer-pagination-summary></div>

        <div class="no-technical-explorer__pagination-actions">
          <button
            type="button"
            class="no-technical-explorer__pagination-button"
            data-no-explorer-pagination-prev>
            {{ 'Prev'|t }}
          </button>

          <button
            type="button"
            class="no-technical-explorer__pagination-button"
            data-no-explorer-pagination-next>
            {{ 'Next'|t }}
          </button>
        </div>
      </div>
    </div>

    {% include '@native_observability_dashboard/components/modal/native-observability-dashboard--technical-insights-modal.html.twig' %}
  {% endif %}
</section>
