<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <title>Shared files - Qshare</title>

  {{template "common-style" .}}
  <style>
    .file {
      border-top: 1px solid currentColor;
      padding-top: 24px;
    }

    .file + .file {
      margin-top: 40px;
    }

    .file-name,
    .file-size {
      margin: 0;
    }

    .file-name {
      overflow-wrap: anywhere;
      font-size: 1.125rem;
      font-weight: 600;
    }

    .file-size {
      margin-top: 8px;
      white-space: nowrap;
    }

    .archive {
      margin-top: 40px;
      padding-top: 24px;
      border-top: 1px solid currentColor;
    }

    .archive .action {
      margin-top: 0;
    }

    .notice {
      margin: 24px 0 0;
      font-size: 0.875rem;
      line-height: 1.5;
    }

  </style>
</head>

<body>
  <main>
    <p class="brand">Qshare</p>
    <h1>Shared files</h1>

    {{range .Files}}
    <section class="file">
      <p class="file-name">{{.Name}}</p>
      <p class="file-size">{{.Size}}</p>
      <a href="{{.URL}}" class="action">Download</a>
    </section>
    {{end}}
    <section class="archive" aria-label="Archive download">
      <a href="{{.ArchiveURL}}" class="action secondary">Download all as ZIP</a>
    </section>
    <p class="notice">These files are available temporarily.</p>
  </main>
</body>
</html>
