% setdefault("start", False)
% setdefault("end", False)
% setdefault("error", '')
% if start:
<html>
  <head>
    <title>Trend</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.1.0/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous"/>
    <link rel="stylesheet" href="https://shandan.one/css/grids-responsive-min.css"/>
    <link rel="stylesheet" href="https://shandan.one/css/responsive-visibility-collapse.css"/>
    <link rel="stylesheet" href="/grocery/static/cloud-gears.css"/>
    <link rel="manifest" href="/grocery/static/manifest.json"/>
    <link rel="icon" type="image/png" href="/grocery/static/favicon.png"/>
    <style>
html {
  --scrollbarBG: #333333;
  --thumbBG: #080808;
}
svg {
  max-height: min(100vh, calc(100vw * 9 / 16));
  max-width: calc(100vw - 2em);
}
body {
  background-color: #080808;
  color: #cccccc;
  text-align: center;
}
div.loader-container {
  position: absolute;
  left: 50vw;
  top: 50vh;
  margin-top: -5.5em;
  margin-left: -87.5px;
  padding-bottom: 2em;
  height: 9em;
  width: 175px;
}
div.loader-container:not(:has(+ .done)) {
  display: block;
}
.loader-container:not(:last-child) {
  display: none;
}
div.progress {
  margin: 1em 0 1em;
}
div.progress:not(:has(+ .done)) {
  display: block;
}
.progress label {
  text-align:left;
}
.progress label:after {
  content: "...";
}
.progress:not(:last-child) {
  display: none;
}
    </style>
  </head>
  <body>
    <div class="loader-container">
    <span class="loader"></span>
% end
% if end:
    </div>
    <div class="done"></div>
{{!form}}
    % if error:
    % include('error-500', error=error)
    % else:
{{!svg}}
    % end
    </body>
</html>
% end
