<!DOCTYPE html>
<html lang="en">

<head>
  <title>Farside</title>
  <style>
    html {
      font-family: monospace;
      font-size: 16px;
      color: #66397C;
    }
    #parent-div {
      text-align: center;
    }
    #child-div {
      text-align: left;
      width: 50%;
      display: inline-block;
    }
    hr {
      border: 1px dashed;
    }
    a:link, a:visited {
      color: #66397C;
    }
    @media only screen and (max-width: 1000px) {
      #child-div {
        width: 90%;
      }
    }
    ul {
      margin: 10px;
    }
    @media (prefers-color-scheme: dark) {
      html {
        color: #fff;
        background: #121517;
      }
      a:link, a:visited {
        color: #AA8AC1;
      }
    }
  </style>
</head>
<body>
  <div id="parent-div">
    <div id="child-div">
      <h1>Farside [<a href="https://sr.ht/~benbusby/farside">SourceHut</a>, <a href="https://github.com/benbusby/farside">GitHub</a>]</h1>
      <hr>
      <h3>Updated: {{ .LastUpdated }}</h2>
      <div>
        <ul>
		{{ range $i, $service := .ServiceList }}
		<li><a href="/{{ $service.Type }}">{{ $service.Type }}</a></li>
		<ul>
			{{ range $j, $instance := $service.Instances }}
			<li><a href="{{ $instance }}">{{ $instance }}</li>
			{{ end  }}
		</ul>
		{{ end }}
	</ul>
      </div>
    </div>
  </div>
</body>

