{% extends "base.html" %}

{% block content %}
<div class="sl-library">
  <header class="sl-header">
    <h1>Spectral Library Browser</h1>
    <p class="sl-subtitle">Search, compare, and download reflectance spectra from federated sources</p>
  </header>

  <div class="sl-controls">
    <div class="sl-search-bar">
      <input type="text" id="sl-search" placeholder="Search spectra (e.g., quartz, honeysuckle, calcite...)" aria-label="Search spectra">
    </div>
    <div class="sl-filters">
      <select id="sl-filter-category" aria-label="Filter by category">
        <option value="">All Categories</option>
      </select>
      <select id="sl-filter-source" aria-label="Filter by source">
        <option value="">All Sources</option>
      </select>
      <select id="sl-filter-quality" aria-label="Filter by quality">
        <option value="">All Quality</option>
      </select>
      <span id="sl-result-count" class="sl-count"></span>
    </div>
  </div>

  <div class="sl-main">
    <div class="sl-results-panel">
      <table id="sl-results-table" aria-label="Search results">
        <thead>
          <tr>
            <th>Name</th>
            <th>Category</th>
            <th>Source</th>
            <th>Bands</th>
            <th>Range (&#181;m)</th>
          </tr>
        </thead>
        <tbody id="sl-results-body">
          <tr><td colspan="5" class="sl-empty">Loading catalog...</td></tr>
        </tbody>
      </table>
    </div>

    <div class="sl-viewer-panel">
      <div class="sl-chart-container">
        <div id="sl-chart" role="img" aria-label="Spectral reflectance chart"></div>
        <div class="sl-chart-toolbar">
          <button id="sl-btn-reset-zoom" title="Reset zoom">Reset Zoom</button>
          <button id="sl-btn-clear" title="Clear all spectra">Clear</button>
          <span id="sl-crosshair-readout" class="sl-readout"></span>
        </div>
      </div>
      <div class="sl-metadata-panel" id="sl-metadata">
        <h3>Spectrum Details</h3>
        <p class="sl-hint">Click a spectrum in the table to view it</p>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="{{ config.site_url }}js/spectral-viewer.js"></script>
{% endblock %}