<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ fontName }}</title>
    <style type="text/css">
      body {
        margin: 0;
        padding:10px 20px;
        background: #fff;
        color: #222;
        font-family:"Helvetica Neue", Arial, sans-serif;
      }

      h1 {
        margin:0 0 20px;
        font-size: 32px;
        font-weight: normal;
      }

      .icons {
        margin-bottom: 40px;
        -webkit-column-count: 5;
           -moz-column-count: 5;
                column-count: 5;
      }

      .icons__item {
        padding: 4px 0;
      }

      .icons__item,
      .icons__item i {
        cursor: pointer;
        vertical-align: middle;
      }

      .icons__item:hover {
        color: #3c90be;
      }

      .icons__item span {
        display: inline-block;
        line-height: 3em;
        margin-left: 5px;
        white-space: nowrap;
      }

      @font-face {
        font-display: block;
        font-family: "{{ fontName }}";
        font-style: normal;
        font-weight: 400;
        {% if formats.indexOf('eot')>-1 -%}
          src: url("{{ fontPath }}{{ fontName }}.eot?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}");
        {%- endif %}
        {%- set eotIndex = formats.indexOf('eot') -%}
        {%- set woff2Index = formats.indexOf('woff2') -%}
        {%- set woffIndex = formats.indexOf('woff') -%}
        {%- set ttfIndex = formats.indexOf('ttf') -%}
        {%- set svgIndex = formats.indexOf('svg') %}
        src: {% if eotIndex != -1 -%}
          url("{{ fontPath }}{{ fontName }}.eot?{% if hash %}v={{ hash }}{% endif %}#iefix") format("embedded-opentype")
          {%- set nothing = formats.splice(eotIndex, 1) -%}
          {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
        {%- endif -%}
        {%- if woff2Index != -1 -%}
          url("{{ fontPath }}{{ fontName }}.woff2?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}") format("woff2")
          {%- set nothing = formats.splice(woff2Index, 1) -%}
          {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
        {%- endif -%}
        {%- if woffIndex != -1 -%}
          url("{{ fontPath }}{{ fontName }}.woff?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}") format("woff")
          {%- set nothing = formats.splice(woffIndex, 1) -%}
          {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
        {%- endif -%}
        {%- if ttfIndex != -1 -%}
          url("{{ fontPath }}{{ fontName }}.ttf?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}") format("truetype")
          {%- set nothing = formats.splice(ttfIndex, 1) -%}
          {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
        {%- endif -%}
        {%- if svgIndex != -1 -%}
          url("{{ fontPath }}{{ fontName }}.svg?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}#{{ fontName }}") format("svg");
        {%- endif %}
      }

      .{{ className }} {
        display: inline-block;
        font-family: "{{ fontName }}";
        font-weight: 400;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
      }

      .{{ className }}-lg {
        font-size: 1.33333em;
        line-height: 0.75em;
        vertical-align: -0.0667em;
      }

      .{{ className }}-xs {
        font-size: 0.75em;
      }

      .{{ className }}-sm {
        font-size: 0.875em;
      }

      .{{ className }}-1x {
        font-size: 1em;
      }

      .{{ className }}-2x {
        font-size: 2em;
      }

      .{{ className }}-3x {
        font-size: 3em;
      }

      .{{ className }}-4x {
        font-size: 4em;
      }

      .{{ className }}-5x {
        font-size: 5em;
      }

      .{{ className }}-6x {
        font-size: 6em;
      }

      .{{ className }}-7x {
        font-size: 7em;
      }

      .{{ className }}-8x {
        font-size: 8em;
      }

      .{{ className }}-9x {
        font-size: 9em;
      }

      .{{ className }}-10x {
        font-size: 10em;
      }

      .{{ className }}-fw {
        text-align: center;
        width: 1.25em;
      }

      .{{ className }}-border {
        border: solid 0.08em #eee;
        border-radius: 0.1em;
        padding: 0.2em 0.25em 0.15em;
      }

      .{{ className }}-pull-left {
        float: left;
      }

      .{{ className }}-pull-right {
        float: right;
      }

      .{{ className }}.{{ className }}-pull-left {
        margin-right: 0.3em;
      }

      .{{ className }}.{{ className }}-pull-right {
        margin-left: 0.3em;
      }

      {% for glyph in glyphs %}
      .{{ className }}-{{ glyph.name }}::before {
        content: "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}";
      }
      {% endfor %}
    </style>
  </head>
  <body>
    <h1>List Icons</h1>
      <h3>Class</h3>
      <div class="icons" id="icon-classes">
          {% for glyph in glyphs %}
            <div class="icons__item">
              <i class="{{ className }} {{ className }}-3x {{ className }}-{{ glyph.name }}"></i><br />
              <span>.{{ className }}-{{ glyph.name }}</span>
            </div>
          {% endfor %}
      </div>
      <h3>Ligature</h3>
      <div class="icons" id="icon-ligatures">
          {% for glyph in glyphs %}
            <div class="icons__item">
              <i class="{{ className }} {{ className }}-3x">{{ glyph.unicode[1] }}</i><br />
              <span>{{ glyph.unicode[1] }}</span>
            </div>
          {% endfor %}
      </div>
  </body>
</html>
