<!DOCTYPE html>
<html lang="es">
<head>
  {% include "head.html" with path="." only %}
  <link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
{% include "header.html" with path="." %}
<main>
  <h2>Índice</h2>
  <ul class="songs">
    {% for category in sorted_categories %}
    <a href="#{{ category|slugify }}">
      <li>{{ category|title }}</li>
    </a>
    {% endfor %}
  </ul>
  Las canciones sin acordes están marcadas en <span class="noChords">rojo</span>.
  <ol class="songs">
    {% for category, songs in sorted_categories.items %}
    <h3 id="{{ category|slugify }}">{{ category|title }}</h3>
    {% for song in songs %}
    <a href="{{ song.url }}">
      <li {% if not song.chorded %}class="noChords" {% endif %}>
        <span class="number">{{ song.number }}.</span>
        {{ song.name }}
        {% if song.author %} por {{ song.author }} {% endif %}
        {% if song.origin %} basada en {{ song.origin }} {% endif %}
      </li>
    </a>
    {% endfor %}
    {% endfor %}
  </ol>
</main>
{% include "footer.html" %}
</body>
</html>