{% extends 'layout.html' %}

{% block content %}
<h1 class="title">360 Spells of 360 Colors</h1>
<div class="container clearfix">
  {% for spell in spells %}
  <a
    class="spell hover_scale"
    style="border-color: {{ spell.color }}"
    href="{{ spell.spell_html }}"
    title="{{ spell.name }}"
  >
    <i
      class="spell_icon fa {{ spell.icon }}"
      style="color: {% if spell.cost === 999 %}#333{% else %}{{ spell.color }}{% endif %}"
    ></i>
  </a>
  {% endfor %}
</div>
{% endblock %}