<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Automotive Icons</title>

    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 10px 20px;
            text-align: center;
        }

        .wrapper {
          width: 800px;
          margin: auto;
        }

        .preview {
            width: 100px;
            display: inline-block;
            margin: 10px;
        }

        .preview .inner {
            display: inline-block;
            width: 100%;
            text-align: center;
            background: #f5f5f5;
            -webkit-border-radius: 3px 3px 0 0;
            -moz-border-radius: 3px 3px 0 0;
            border-radius: 3px 3px 0 0;
        }

        .preview .inner {{ baseTag }} {
            line-height: 85px;
            font-size: 40px;
            color: #333;
        }

        .label {
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
            padding: 5px;
            font-size: 10px;
            font-family: Monaco, monospace;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: #ddd;
            -webkit-border-radius: 0 0 3px 3px;
            -moz-border-radius: 0 0 3px 3px;
            border-radius: 0 0 3px 3px;
            color: #666;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="./{{ name }}.css" />
</head>
<body>
    <div class="wrapper" >
      {{# each assets }}
          <div class="preview">
              <span class="inner">
                  <{{ ../tag }} class="{{ ../prefix }} {{ ../prefix }}-{{ @key }}"></{{ ../tag }}>
              </span>
              <br>
              <span class='label'>{{ @key }}</span>
          </div>
      {{/ each }}
    </div>
</body>
</html>
