{#
/**
 * @file
 * Database observability section for Native Observability Dashboard.
 *
 * Available variables:
 * - section: Database observability section payload.
 */
#}

<section
  class="no-dashboard-section no-dashboard-section--database-observability no-database-observability"
  data-pressure-trend-chart-id="{{ section.pressure_trend.chart_id|default('') }}"
  data-request-comparison-chart-id="{{ section.request_comparison.chart_id|default('') }}"
  data-axis-primary-label="{{ 'Average values'|t }}"
  data-axis-secondary-label="{{ 'Slow query events'|t }}"
  data-axis-x-label="{{ 'Avg Request Duration (ms)'|t }}"
  data-axis-y-label="{{ 'Avg DB Time (ms)'|t }}"
  data-tooltip-request-duration-label="{{ 'Avg request duration'|t }}"
  data-tooltip-db-time-label="{{ 'Avg DB time'|t }}"
  data-tooltip-request-count-label="{{ 'Requests'|t }}"
  data-tooltip-slow-rate-label="{{ 'Slow rate'|t }}"
  data-chart-empty-message="{{ 'No chart data is available for the selected time range.'|t }}"
  data-chart-library-message="{{ 'The chart library is not available.'|t }}"
  data-modal-title="{{ 'Slow query details'|t }}"
  data-modal-close-label="{{ 'Close'|t }}"
  data-search-placeholder="{{ 'Search slow query records'|t }}"
  data-export-label="{{ 'Export CSV'|t }}"
  data-empty-results-label="{{ 'No matching records found.'|t }}"
  data-pagination-previous-label="{{ 'Previous'|t }}"
  data-pagination-next-label="{{ 'Next'|t }}"
>
  <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.enabled %}
    <div class="no-database-observability__body">

      {% if section.has_data %}
        {% if section.overview_cards is not empty %}
          <div class="no-db-overview-grid">
            {% for card in section.overview_cards %}
              <article class="no-db-overview-card">
                <div class="no-db-overview-card__title">{{ card.title }}</div>
                <div class="no-db-overview-card__value">{{ card.value }}</div>

                {% if card.description is defined and card.description %}
                  <div class="no-db-overview-card__description">{{ card.description }}</div>
                {% endif %}
              </article>
            {% endfor %}
          </div>
        {% endif %}

        <div class="no-database-observability__main-grid">
          <div class="no-database-observability__main-column">

            {% if section.pressure_trend.enabled %}
              <article class="no-db-panel">
                <div class="no-db-panel__header">
                  <h3 class="no-db-panel__title">{{ section.pressure_trend.title }}</h3>
                </div>

                <div class="no-db-panel__content">
                  <div
                    id="{{ section.pressure_trend.chart_id }}"
                    class="no-dashboard-chart no-dashboard-chart--database-pressure"
                    data-chart-type="database-pressure-trend"
                  ></div>
                </div>
              </article>
            {% endif %}

            {% if section.route_table.enabled %}
              <article class="no-db-panel">
                <div class="no-db-panel__header">
                  <h3 class="no-db-panel__title">{{ section.route_table.title }}</h3>
                </div>

                <div class="no-db-table-tools">
                  <div class="no-db-table-tools__search">
                    <label for="no-db-routes-search" class="visually-hidden">
                      {{ 'Search routes'|t }}
                    </label>
                    <input
                      id="no-db-routes-search"
                      type="search"
                      class="form-text no-db-routes-table-search"
                      placeholder="{{ 'Search routes'|t }}"
                      aria-label="{{ 'Search routes'|t }}"
                    >
                  </div>

                  <div class="no-db-table-tools__actions">
                    <button type="button" class="button button--small no-db-routes-export-csv">
                      {{ 'Export CSV'|t }}
                    </button>
                  </div>
                </div>

                <div class="no-dashboard-table-wrap">
                  <table class="no-dashboard-table no-db-routes-table" data-page-size="10">
                    <thead>
                    <tr>
                      <th class="is-sortable" data-sort-key="0" tabindex="0" role="button" aria-sort="none">
                        <span>{{ 'Route'|t }}</span>
                      </th>
                      <th class="is-sortable" data-sort-key="1" tabindex="0" role="button" aria-sort="none">
                        <span>{{ 'Requests'|t }}</span>
                      </th>
                      <th class="is-sortable" data-sort-key="2" tabindex="0" role="button" aria-sort="none">
                        <span>{{ 'Avg DB Time'|t }}</span>
                      </th>
                      <th class="is-sortable" data-sort-key="3" tabindex="0" role="button" aria-sort="none">
                        <span>{{ 'P95 DB Time'|t }}</span>
                      </th>
                      <th class="is-sortable" data-sort-key="4" tabindex="0" role="button" aria-sort="none">
                        <span>{{ 'Avg Queries'|t }}</span>
                      </th>
                      <th class="is-sortable" data-sort-key="5" tabindex="0" role="button" aria-sort="none">
                        <span>{{ 'Slow Req Rate'|t }}</span>
                      </th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for row in section.route_table.rows %}
                      <tr>
                        <td data-sort-value="{{ row.route }} {{ row.path|default('') }}">
                          <div class="no-db-route-cell">
                            {% if row.modal_payload is defined and row.modal_payload %}
                              <button
                                type="button"
                                class="button-link no-dashboard-link no-db-modal-trigger no-db-route-trigger"
                                data-db-modal-payload="{{ row.modal_payload|json_encode|e('html_attr') }}"
                              >
                                {{ row.route }}
                              </button>
                            {% else %}
                              <strong>{{ row.route }}</strong>
                            {% endif %}

                            {% if row.path %}
                              <div class="no-db-route-cell__path">{{ row.path }}</div>
                            {% endif %}
                          </div>
                        </td>
                        <td data-sort-value="{{ row.requests }}">{{ row.requests }}</td>
                        <td data-sort-value="{{ row.avg_db_time|replace({' ms': ''}) }}">{{ row.avg_db_time }}</td>
                        <td data-sort-value="{{ row.p95_db_time|replace({' ms': ''}) }}">{{ row.p95_db_time }}</td>
                        <td data-sort-value="{{ row.avg_queries }}">{{ row.avg_queries }}</td>
                        <td data-sort-value="{{ row.slow_rate|replace({'%': ''}) }}">{{ row.slow_rate }}</td>
                      </tr>
                    {% endfor %}
                    </tbody>
                  </table>
                </div>

                <div class="no-db-table-empty-state no-db-routes-table-empty-state" hidden>
                  <strong>{{ 'No matching routes found.'|t }}</strong>
                </div>

                <div class="no-db-pagination no-db-routes-pagination">
                  <button type="button" class="button button--small no-db-routes-pagination__prev">
                    {{ 'Previous'|t }}
                  </button>

                  <div class="no-db-routes-pagination__status"></div>

                  <button type="button" class="button button--small no-db-routes-pagination__next">
                    {{ 'Next'|t }}
                  </button>
                </div>
              </article>
            {% endif %}
          </div>

          <aside class="no-database-observability__side-column">

            {% if section.request_comparison.enabled %}
              <article class="no-db-panel">
                <div class="no-db-panel__header">
                  <h3 class="no-db-panel__title">{{ section.request_comparison.title }}</h3>
                </div>

                <div class="no-db-panel__content">
                  <div
                    id="{{ section.request_comparison.chart_id }}"
                    class="no-dashboard-chart no-dashboard-chart--database-scatter"
                    data-chart-type="database-request-comparison"
                  ></div>
                </div>
              </article>
            {% endif %}

            {% if section.hotspots.enabled %}
              <article class="no-db-panel">
                <div class="no-db-panel__header">
                  <h3 class="no-db-panel__title">{{ section.hotspots.title }}</h3>
                </div>

                <div class="no-db-hotspots">
                  <div class="no-db-hotspots__group">
                    <h4 class="no-db-hotspots__label">{{ 'Top Query Hashes'|t }}</h4>

                    {% if section.hotspots.query_hashes is not empty %}
                      <ul class="no-db-hotspots__list">
                        {% for item in section.hotspots.query_hashes %}
                          <li class="no-db-hotspots__item">
                            <div class="no-db-hotspots__main">
                              {% if item.modal_payload is defined and item.modal_payload %}
                                <button
                                  type="button"
                                  class="button-link no-dashboard-link no-db-modal-trigger"
                                  data-db-modal-payload="{{ item.modal_payload|json_encode|e('html_attr') }}"
                                >
                                  {{ item.hash }}
                                </button>
                              {% else %}
                                <span>{{ item.hash }}</span>
                              {% endif %}
                            </div>

                            <div class="no-db-hotspots__meta">
                              {{ item.count }} {{ 'occurrences'|t }}
                            </div>
                          </li>
                        {% endfor %}
                      </ul>
                    {% endif %}
                  </div>

                  <div class="no-db-hotspots__group">
                    <h4 class="no-db-hotspots__label">{{ 'Top Impacted Routes'|t }}</h4>

                    {% if section.hotspots.routes is not empty %}
                      <ul class="no-db-hotspots__list">
                        {% for item in section.hotspots.routes %}
                          <li class="no-db-hotspots__item">
                            <div class="no-db-hotspots__main">
                              {% if item.modal_payload is defined and item.modal_payload %}
                                <button
                                  type="button"
                                  class="button-link no-dashboard-link no-db-modal-trigger"
                                  data-db-modal-payload="{{ item.modal_payload|json_encode|e('html_attr') }}"
                                >
                                  {{ item.route }}
                                </button>
                              {% else %}
                                <span>{{ item.route }}</span>
                              {% endif %}
                            </div>

                            <div class="no-db-hotspots__meta">
                              {{ item.count }} {{ 'slow queries'|t }}
                            </div>
                          </li>
                        {% endfor %}
                      </ul>
                    {% endif %}
                  </div>
                </div>
              </article>
            {% endif %}
          </aside>
        </div>

        {% if section.latest_records.enabled %}
          <article class="no-db-panel no-db-panel--full">
            <div class="no-db-panel__header no-db-panel__header--split">
              <h3 class="no-db-panel__title">{{ section.latest_records.title }}</h3>

              {% if section.latest_records.threshold_label %}
                <span class="no-db-threshold">{{ section.latest_records.threshold_label }}</span>
              {% endif %}
            </div>

            <div class="no-db-table-tools">
              <div class="no-db-table-tools__search">
                <label for="no-db-records-search" class="visually-hidden">
                  {{ 'Search slow query records'|t }}
                </label>
                <input
                  id="no-db-records-search"
                  type="search"
                  class="form-text no-db-table-search"
                  placeholder="{{ 'Search slow query records'|t }}"
                  aria-label="{{ 'Search slow query records'|t }}"
                >
              </div>

              <div class="no-db-table-tools__actions">
                <button type="button" class="button button--small no-db-export-csv">
                  {{ 'Export CSV'|t }}
                </button>
              </div>
            </div>

            <div class="no-dashboard-table-wrap">
              <table class="no-dashboard-table no-db-records-table" data-page-size="10">
                <thead>
                <tr>
                  {% for header in section.latest_records.headers %}
                    {% set sortable = header in ['Time', 'Duration', 'Route', 'Connection', 'Query Hash', 'Caller'] %}
                    <th
                      {% if sortable %}
                        class="is-sortable"
                        data-sort-key="{{ loop.index0 }}"
                        tabindex="0"
                        role="button"
                        aria-sort="none"
                      {% endif %}
                    >
                      <span>{{ header }}</span>
                    </th>
                  {% endfor %}
                </tr>
                </thead>
                <tbody>
                {% for row in section.latest_records.rows %}
                  <tr>
                    <td data-sort-value="{{ row.time }}">{{ row.time }}</td>
                    <td data-sort-value="{{ row.duration|replace({' ms': ''}) }}">{{ row.duration }}</td>
                    <td data-sort-value="{{ row.route }}">
                      {% if row.modal_payload is defined and row.modal_payload %}
                        <button
                          type="button"
                          class="button-link no-dashboard-link no-db-modal-trigger no-db-route-trigger"
                          data-db-modal-payload="{{ row.modal_payload|json_encode|e('html_attr') }}"
                        >
                          {{ row.route }}
                        </button>
                      {% else %}
                        {{ row.route }}
                      {% endif %}
                    </td>
                    <td data-sort-value="{{ row.connection }}">{{ row.connection }}</td>
                    <td data-sort-value="{{ row.hash }}">{{ row.hash }}</td>
                    <td data-sort-value="{{ row.caller }}">{{ row.caller }}</td>
                    <td>
                      <div class="no-db-table-actions">
                        {% if row.modal_payload is defined and row.modal_payload %}
                          <button
                            type="button"
                            class="button button--small no-db-modal-trigger"
                            data-db-modal-payload="{{ row.modal_payload|json_encode|e('html_attr') }}"
                          >
                            {{ 'Inspect'|t }}
                          </button>
                        {% endif %}
                      </div>
                    </td>
                  </tr>
                {% endfor %}
                </tbody>
              </table>
            </div>

            <div class="no-db-table-empty-state" hidden>
              <strong>{{ 'No matching records found.'|t }}</strong>
            </div>

            <div class="no-db-pagination">
              <button type="button" class="button button--small no-db-pagination__prev">
                {{ 'Previous'|t }}
              </button>

              <div class="no-db-pagination__status"></div>

              <button type="button" class="button button--small no-db-pagination__next">
                {{ 'Next'|t }}
              </button>
            </div>
          </article>
        {% endif %}
      {% else %}
        <div class="no-dashboard-empty-state">
          <strong>{{ section.empty_message }}</strong>
        </div>
      {% endif %}
    </div>
  {% else %}
    <div class="no-dashboard-empty-state">
      <strong>{{ section.reason }}</strong>

      {% if section.help_message is defined and section.help_message %}
        <div class="no-database-observability__disabled-help">{{ section.help_message }}</div>
      {% endif %}
    </div>
  {% endif %}

  <div class="no-db-modal" hidden>
    <div class="no-db-modal__backdrop"></div>
    <div class="no-db-modal__dialog" role="dialog" aria-modal="true" aria-label="{{ 'Slow query details'|t }}">
      <div class="no-db-modal__header">
        <h3 class="no-db-modal__title">{{ 'Slow query details'|t }}</h3>
        <button type="button" class="no-db-modal__close" aria-label="{{ 'Close'|t }}">×</button>
      </div>

      <div class="no-db-modal__body">
        <div class="no-db-modal__summary"></div>

        <div class="no-db-modal__empty-state no-dashboard-empty-state" hidden>
          <strong></strong>
        </div>

        <div class="no-dashboard-table-wrap no-db-modal__table-wrap">
          <table class="no-dashboard-table no-db-modal__table">
            <thead>
            <tr></tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <template data-no-db-template="modal-summary-card">
    {% include '@native_observability_dashboard/components/database/database-observability-modal-summary-card.html.twig' %}
  </template>

  <template data-no-db-template="modal-table-row">
    {% include '@native_observability_dashboard/components/database/database-observability-modal-table-row.html.twig' %}
  </template>

  <template data-no-db-template="modal-empty-state">
    {% include '@native_observability_dashboard/components/database/database-observability-modal-empty-state.html.twig' %}
  </template>
</section>
