<html>
  <title>E2E report</title>
  <body>
    <h1>Table of Contents</h1>
    <ul>
      {{range .Tests}}
      <li><a href="#{{.Name}}">{{.Name}}</a></li>
      {{end}}
    </ul>
    <div class="cases">
      {{range .Tests}}
      <div class="case" id="{{.Name}}">
        <h1><a href="{{.GotSVG}}">{{.Name}}</a></h1>
        {{ if .ExpSVG }}
        <h2 class="case-exp">Expected</h2>
        {{ end }}
        <h2 class="case-got">Got</h2>
        <div class="case-img-wrapper">
          {{ if .ExpSVG }}
          <img src="{{.ExpSVG}}" width="100%" />
          {{ end }}
          <img src="{{.GotSVG}}" width="100%" />
        </div>
      </div>
      {{end}}
    </div>
    <style>
      .cases {
        display: inline-flex;
        flex-wrap: wrap;
      }
      .case {
        position: relative;
        padding: 20px;
        width: 100%;
      }
      .case-img-wrapper {
        display: flex;
        align-items: center;
      }
      .case img {
        width: 600px;
      }
      .case-exp + .case-got {
        position: absolute;
        left: 600px;
      }
      .case h2 {
        margin: 0;
        display: inline;
      }
    </style>
  </body>
</html>
