<html>
  <head>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12pt;
      }

      div.header {
        width: 100%;
        display: flex;
        align-items: flex-start;
      }

      img.header-image {
        padding: 4px;
        width: 100px;
      }

      a, a:visited, a:link {
        text-decoration: none;
        color: black;
      }

      h1.header-text {
        font-size: 2.25em;
        font-weight: 600;
        align-self: center;
      }

      div.section {
        padding: 30px 0px 0px 0px;
        font-size: 14pt;
        font-weight: 600
      }

      div.section ~ hr {
        width: 100%;
        margin: 5px 0px 15px 0px;
      }

      ul {
        list-style-position: outside;
      }

      li {
        white-space: pre-line;
      }

      li + li {
        margin-top: 10px;
      }

      pre.version-tab {
        tab-size: 4;
      }
    </style>
  </head>

  <body>
    <div class="header">
      <a href="{{ lvmweb_url }}">
        <img class="header-image" src="https://github.com/sdss/lvmapi/raw/refs/heads/main/src/lvmapi/data/lvm_logo.png" />
      </a>
      <div style="flex-grow: 1"></div>
      <h1 class="header-text">
        <a href="{{ lvmweb_url }}">
          SDSS-V LVM Night Log | {{ sjd }}
        </a>
      </h1>
    </div>
    <hr style="width: 100%" />

    <div style="padding: 10px 0px;">Visit LVM Web for the <a style="text-decoration: underline" href="{{ lvmweb_url }}">full night log</a>.</div>

    <div style="padding: 10px 0px;">
      <div style="font-size: 14pt; font-weight: 600">{{ date }} - MJD {{ sjd }}</div>
    </div>

    <div style="padding: 20px 0px 0px 0px; font-size: 14pt">
      <span style="font-weight: 600">Observers:</span>
      <span>{{ observers }}</span>
    </div>

    <div class="section">
      Weather
    </div>
    <hr />
    {% if weather %}
      <ul>
        {% for comment in weather %}
          <li>{{ comment.comment }}</li>
        {% endfor %}
      </ul>
    {% else %}
      <div>No comments.</div>
    {% endif %}


    <div class="section">
      Issues / bugs
    </div>
    <hr />
    {% if issues %}
      <ul>
        {% for comment in issues %}
          <li>{{ comment.comment }}</li>
        {% endfor %}
      </ul>
    {% else %}
      <div>No comments.</div>
    {% endif %}

    <div class="section">
      Other
    </div>
    <hr />
    {% if other %}
      <ul>
        {% for comment in other %}
          <li>{{ comment.comment }}</li>
        {% endfor %}
      </ul>
    {% else %}
      <div>No comments.</div>
    {% endif %}

    <div class="section">
      Overwatcher
    </div>
    <hr />
    {% if overwatcher %}
      <ul>
        {% for comment in overwatcher %}
          <li>{{ comment.comment }}</li>
        {% endfor %}
      </ul>
    {% else %}
      <div>No comments.</div>
    {% endif %}

    <div class="section">
      Night metrics
    </div>
    <hr />
    {% if metrics %}
      <ul>
        <li>Night length: {{ metrics.night_length }}</li>
        <li>Number of object exposures: {{ metrics.n_object_exps }}</li>
        <li>Time not exposing: {{ metrics.time_lost if metrics.night_started else "N/A" }}</li>
        <li>Efficiency (with nominal overheads): {{ metrics.efficiency_nominal|string + "%" if metrics.night_started else "N/A" }}</li>
        <li>Efficiency (with readout): {{ metrics.efficiency_readout|string + "%" if metrics.night_started else "N/A" }}</li>
        <li>Efficiency (without readout): {{ metrics.efficiency_no_readout|string + "%" if metrics.night_started else "N/A" }}</li>
      </ul>
    {% else %}
      <div>Metrics not available.</div>
    {% endif %}

    <div class="section">
      Exposures
    </div>
    <hr />
    {% if exposure_table %}
      <pre>{{- exposure_table }}</pre>
    {% else %}
      <div>No exposures.</div>
    {% endif %}

    <div class="section">
      Notifications
    </div>
    <hr />
    {% if notifications %}
      <pre>{{- notifications }}</pre>
    {% else %}
      <div>No data.</div>
    {% endif %}

    <div class="section">
      Software versions
    </div>
    <hr />
    {% if software_versions %}
      <table style="border: 0; padding: 5px">
        {% for actor, version in software_versions.items() %}
          <tr>
            <td>
              <code style="font-size: 10pt">
                {{ actor }}
              </code>
            </td>
            <td>
              <code style="margin-left: 20px; font-size: 10pt">
                {{ version or "N/A" }}
              </code>
            </td>
          </tr>
        {% endfor %}
      </table>
    {% else %}
      <div>No data.</div>
    {% endif %}

  </body>

</html>
