<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="description" content="webpage for reviewing archival spectral reductions.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>pyspextool QA review for [INSTRUMENT] on [UT_DATE]</title>
  <link rel="stylesheet" type="text/css" href="[CSS_FILE]">

<!--  
  <link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
-->

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js" charset="utf-8"></script>
  <script src="https://d3js.org/d3.v7.min.js"></script>

</head>

<body>
<h1 id="top">pyspextool QA review for [INSTRUMENT] on [UT_DATE]</h1>

<h2 id="info">Observing information</h2>

<ul>
 <li>UT Date: [UT_DATE]
 <li>Program: [PROGRAM]
 <li>Observer(s): [OBSERVER]
 <li>Instrument mode(s): [INSTRUMENT_MODES]
<!-- <li>Data directory: <a href="[DATA_FOLDER]" target="_blank">[DATA_FOLDER]</a>
 <li>Processed files directory: <a href="[PROC_FOLDER]" target="_blank">[PROC_FOLDER]</a>
-->  
 <li><a href="[LOG_HTML]" target="_blank">Observing Log</a>
 <li><a href="[WEATHER_HTML]" target="_blank">Mauna Kea Weather Record</a>
</ul>

<h2 id="info">Sources</h2>

<!-- repeat per source -->

[SOURCES]

<!-- CALIBRATIONS -->


<h2>Calibrations</h2>



<button type="button" class="collapsible">Flats</button>
<div class="content">

[FLATS]

</div>

<hr>

<button type="button" class="collapsible">Wavelength Calibration</button>
<div class="content">

[WAVECALS]

</div>


<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

</body>
</html>
