<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <!-- TODO: seed these - maybe like the starter ex or the webui? -->
  <link rel="stylesheet" href="/ipfs/QmXB7PLRWH6bCiwrGh2MrBBjNkLv3mY3JdYXCikYZSwLED/bootstrap.min.css"/>
  <!-- helper to construct this is here: https://github.com/cryptix/exp/blob/master/imgesToCSSData/convert.go -->
  <link rel="stylesheet" href="/ipfs/QmXB7PLRWH6bCiwrGh2MrBBjNkLv3mY3JdYXCikYZSwLED/icons.css">
  <style>
  .narrow {width: 0px;}
  .padding { margin: 100px;}
  #header {
    background: #000;
  }
  #logo {
    height: 25px;
    margin: 10px;
  }
  .ipfs-icon {
    width:16px;
  }
  </style>
  <title>{{ .Path }}</title>
</head>
<body>
  <div id="header" class="row">
    <div class="col-xs-2">
      <div id="logo" class="ipfs-logo">&nbsp;</div>
    </div>
  </div>
  <br/>
  <div class="col-xs-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <strong>Index of {{ .Path }}</strong>
      </div>
      <table class="table table-striped">
        <tr>
          <td class="narrow">
            <div class="ipfs-icon ipfs-_blank">&nbsp;</div>
          </td>
          <td class="padding">
            <a href="{{.BackLink}}">..</a>
          </td>
          <td></td>
        </tr>
        {{ range .Listing }}
        <tr>
          <td>
            <div class="ipfs-icon {{iconFromExt .Name}}">&nbsp;</div>
          </td>
          <td>
            <a href="{{ .Path }}">{{ .Name }}</a>
          </td>
          <td>{{ .Size }} bytes</td>
        </tr>
      {{ end }}
      </table>
    </div>
  </div>
</body>
</html>
