<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<!--

{{$title_str}} v{{$version}} ({{$revision}}) {{$website_txt}}
{{$copyright_str}}
{{$copyright_gf}}
{{$copyright_contrib_notice}}
{{$generated_on}}

-->
<head>
  <meta charset="utf-8" />
  <title>{{$title_str}} v{{$version}} ({{$revision}}) – Icon Overview</title>
  <!-- Pokémon icons -->
  <link type="text/css" href="{{$css_output_min}}" rel="stylesheet" media="screen" />
  <script charset="utf-8" src="{{$js_output_min}}" ></script>
  <!-- Overview CSS (generated from {{$resources_dir}}overview.scss) -->
  <link type="text/css" href="overview.min.css" rel="stylesheet" media="screen" />
  <script>
  // By far the easiest method to use this script is simply to tell it
  // to wait for the DOM to load and then process it completely.
  // It's not particularly efficient, however, so in this example we've
  // commented it out. See the other <script> tags in the document
  // for an example of how the decorator pattern works.
  //PkSpr.process_dom();
  </script>
</head>
<body>
  <div id="top">
    <div class="description">
      <div class="header">
        <h1>PokéSprite</h1>
        <p>Pokémon icon database and sprite sheet generator</p>
      </div>
      <div class="docs-container">
        <h2>Icon overview (v{{$version}}; {{$revision}})</h2>
        <p>The following list is a complete overview of all icons and the HTML necessary to display them.</p>
        <p>Generated on <span class="time">{{$script_date_html}}</span> (<span class="amount">{{$icons_amount}}</span> icons).</p>
      </div>
    </div>
    <div class="description">
{{$icons}}
    </div>
    <div class="description">
      <div class="docs-container">
        <p>For more information about the project, visit <a href="{{$website_html}}">{{$website_html}}</a>.</p>
        <p><a href="{{$html_rel_home}}">Back to overview.</a></p>
      </div>
    </div>
  </div>
</body>
</html>
