<!DOCTYPE html>
<html>
<!-- kate: space-indent on; indent-width 2; -->
<head>
    <title>{{projectId}} Lookahead plan</title>
    
    <style>
    
@media print {
  html, table {
    font-size: 10px !important;
  }
  
  a {
    text-decoration: none;
  }
}
    
html {
  font-size: 16px;
  text-rendering: optimizeLegibility;
  background: #FFFFFF;
  color: rgba(0, 0, 0, 0.87);
}

body {
  max-width: 100vw;
  margin: 0;
}

table {
  border-collapse: collapse;
}

table th,
table td {
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

table > tbody > tr:not(:last-child) > td,
table > tbody > tr:not(:last-child) > th {
  border-bottom: thin solid rgba(0, 0, 0, 0.12);
}

header {
  display: flex;
  align-items: center;
  height: 110px;
  padding: 8px;
}

header img#logo {
  height: 50px;
  flex: 0 1 auto;
}

header #title {
  flex: 1 1 auto;
}

header h1 {
  text-align: center;
  margin-bottom: 0.3em;
}

header h4 {
  text-align: center;
  margin-top: 0;
}

main {
  min-height: calc(100vh - 116px );
  padding: 8px;
  margin-bottom: 25px;
}

section h3 {
  margin-top: 3em;
}

table#summary td:nth-of-type(1) {
  text-align: right;
  padding-inline-start: 1em;
}

table#summary td:nth-of-type(2) {
  font-size: smaller;
  vertical-align: middle;
  text-align: right;
}

#comments {
  margin-top: 1em;
  margin-bottom: 1em;
}

.comment {
  margin: 0.5em 2em;
  border: thin solid lightgray;
  padding: 1em;
  border-radius: 4px;
}

.nocomment {
  margin: 0.5em 2em;
  color: gray;
  font-style: italic;
}

.no-break-inside {
    break-inside: avoid;
}

table#lines th,
table#lines td {
  padding: 4pt 8pt;
}

table#lines tr > td {
  text-align: right;
}

table#lines tr > td:nth-of-type(2) {
  text-align: left;
}

table#lines tr > td:nth-of-type(9) {
  min-width: 20ex;
  text-align: left;
}

#map {
  width: 500px;
  height: 500px;
/*   border: 1px solid gray; */
  margin-left: auto;
  margin-right: auto;
  background-color: transparent;
}

footer {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0.5em;
  width: 100%;
  font-size: smaller;
  border-top: thin solid;
  min-height: 25px;
  
  position: fixed;
  bottom: 0;
  background: white;
}
    </style>
</head>
<body>

<header>
  <img id="logo" src="data:image/png;base64,[encoded data, 22896 characters]">
  <div id="title">
    <h1>{{projectId |upper}} – Lookahead</h1>
    {% if lines.length %}
    <h4>From {{ lines |get("ts0") |sort |first |timestamp("min") }}
    until {{  lines |get("ts1") |sort |last |timestamp("min")  }}</h4>
    {% endif %}
  </div>
</header>

<main>
<h2>Havila Charisma</h2>

<section>
<h3>Planned sequences</h3>

{% if lines.length %}
<table id="lines">
  <thead>
    <tr>
      <th>Sequence</th>
<!--       <th>Line name</th> -->
      <th>Line</th>
      <th>FSP</th>
      <th>LSP</th>
      <th>Start</th>
      <th>End</th>
      <th>Length</th>
      <th>Azimuth</th>
      <th>Remarks</th>
    </tr>
  </thead>
  <tbody>
  {% for line in lines %}
    <tr>
      <td>{{ line.sequence }}</td>
<!--       <td>{{ line.name }}</td> -->
      <td>{{ line.line }}</td>
      <td>{{ line.fsp }}</td>
      <td>{{ line.lsp }}</td>
      <td>{{ line.ts0 |timestamp("minutes") }}</td>
      <td>{{ line.ts1 |timestamp("minutes") }}</td>
      <td>{{ (line.length/1000) |round(1) }} km</td>
      <td>{{ line.azimuth |round(2) }}°</td>
      <td>{{ line.remarks |markdownInline }}</td>
    </tr>
  {% endfor %}
  </tbody>
</table>
{% else %}
<i>(No plan)</i>
{% endif %}
</section>

<section>
<h3>Comments</h3>

<div id="comments">
{% if info.remarks %}
  {{ info.remarks |markdown }}
{% else %}
<i>(nil)</i>
{% endif %}
</div>
</section>

<section class="no-break-inside">
<h3>Situation map</h3>

<div id="map"><img src="{{map}}"/></div>

</section>

</main>

<footer>
<span>
  ✉ <a href="mailto:hc.om@magseisfairfield.com">hc.om@magseisfairfield.com</a>
  📱 <a href="tel:+4790255868">+47 902 55 868</a>
</span>
<span>Created on {{ "now" |timestamp}}.</span>
</footer>
</body>
</html>
