{% macro figure_layer(figure) %}
    {% set figure_style %}{% filter cull_whitespace %}
        {% if figure.opacity!=1 %}opacity: {{ figure.opacity }};{% endif %}
        {% if figure.color!=1 %}color: {{ figure.color }};{% endif %}
        transform:
        {% if figure.offset|any %}translate({{ figure.offset[0]*100 }}%, {{ figure.offset[1]*100 }}%){% endif %}
        {% if figure.rotation %}rotate({{ figure.rotation }}deg){% endif %}
        {% if figure.flip_x %}scaleX(-1){% endif %}
        {% if figure.flip_y %}scaleY(-1){% endif %}
        {% if figure.scale!=1 %}scale({{ figure.scale }}){% endif %}
        ;
    {% endfilter %}{% endset %}

    <div style="{{ figure_style }}">
        {% if   figure.type == "material-icons" %}
            {# https://material.io/icons/ #}
            <i class="material-icons figure">{{ figure.name }}</i>
        {% elif figure.type == "mdi" %}
            {# https://materialdesignicons.com/ #}
            <i class="mdi mdi-{{ figure.name }}"></i>
        {% elif figure.type == "fa" %}
            {# http://fontawesome.io/icons/ #}
            <i class="fa fa-{{ figure.name }}"></i>
        {% elif figure.type == "lnr" %}
            {# https://linearicons.com/free #}
            <span class="lnr lnr-{{ figure.name }}"></span>
        {% elif figure.type == "oi" %}
            {# https://useiconic.com/open #}
            <span class="oi" data-glyph="{{ figure.name }}"></span>
        {% elif figure.type == "svg" %}
            {# /cards/svg #}
            {% if figure.color == true %}
                <img src="https://pvv.ntnu.no/~pederbs/cards/svg/data/{{ figure.name }}">
            {% elif figure.color %}
                <img src="https://pvv.ntnu.no/~pederbs/cards/svg/data/{{ figure.name }}" class="colored" style="--figure-color: {{ figure.color }}">
            {% else %}
                <img src="https://pvv.ntnu.no/~pederbs/cards/svg/data/{{ figure.name }}" class="colored">
            {% endif %}
        {% elif figure.type == "img" %}
            {# /cards/img #}
            {% if figure.color == true %}
                <img src="https://pvv.ntnu.no/~pederbs/cards/img/data/{{ figure.name }}" class="colored">
            {% elif figure.color %}
                <img src="https://pvv.ntnu.no/~pederbs/cards/img/data/{{ figure.name }}" class="colored" style="--figure-color: {{ figure.color }}">
            {% else %}
                <img src="https://pvv.ntnu.no/~pederbs/cards/img/data/{{ figure.name }}">
            {% endif %}
        {% elif figure.type == "url" %}
            {% if figure.color == true %}
                <img src="{{ figure.name }}" class="colored">
            {% elif figure.color %}
                <img src="{{ figure.name }}" class="colored" style="--figure-color: {{ figure.color }}">
            {% else %}
                <img src="{{ figure.name }}">
            {% endif %}
        {% endif %}
    </div>
{% endmacro %}

{% macro named_icon_to_emoji(name) %}
    {% if   "AIR"           in name | upper %} 🌪
    {% elif "ALCHEMY"       in name | upper %} ⚗️
    {% elif "ANIMAL"        in name | upper %} 🐾
    {% elif "COMBAT"        in name | upper %} ⚔️
    {% elif "CRAFTING"      in name | upper %} ⚒
    {% elif "DARK"          in name | upper %} 💀
    {% elif "DEFENCE"       in name | upper %} 🛡
    {% elif "EARTH"         in name | upper %} 🌱
    {% elif "FIRE"          in name | upper %} 🔥
    {% elif "HOLY"          in name | upper %} ☀️
    {% elif "INNATE"        in name | upper %} 🧙
    {% elif "MAGIC"         in name | upper %} 🔮
    {% elif "MARKSMANSHIP"  in name | upper %} 🎯
    {% elif "MARTIAL"       in name | upper %} 🥊
    {% elif "META"          in name | upper %} 🧩
    {% elif "PERFORMANCE"   in name | upper %} 🎺
    {% elif "SHAPESHIFTING" in name | upper %} 🐻
    {% elif "SKULLDUGGERY"  in name | upper %} ⚰️
    {% elif "TECHNIQUE"     in name | upper %} 🎲
    {% elif "WATER"         in name | upper %} 🌊
    {% elif "WEAPONMASTER"  in name | upper %} 🤺
    {% else %} {{name}}
    {% endif %}
{% endmacro %}

<div class="fjomp_card{{" " + card.style if card.style}}">
    <header>
        {{ card.title or xml.name }}
    </header>
    {% if card.icon %}
    <div class="icon">
        {% if " " in card.icon %}
            {% for icon in card.icon.split(" ") %}
            {{ named_icon_to_emoji(icon) }}
            {% endfor %}
        {% else %}
            {{ named_icon_to_emoji(card.icon) }}
        {% endif %}
    </div>
    {% elif xml.symbol %}
    <div class="icon">
        {{ xml.symbol }}
    </div>
    {% endif %}
    <figure>
    {% for figure in card.figures %}
        {{ figure_layer(figure) }}
    {% endfor %}
    </figure>
    <aside>
        <ul>
        {#
        {% if card.cp %}
            <li>CP: {{ card.cp }}</li>
        {% endif %}
        {% if card.power %}
            <li>Power: {{ card.power }}</li>
        {% endif %}
        {% if card.difficulty %}
            <li>Difficulty: {{ card.difficulty }}</li>
        {% endif %}
        {% if card.playcost %}
            <li>Playcost: {{ card.playcost }}</li>
        {% endif %}
        {% if card.duration %}
            <li>Duration: {{ card.duration }}</li>
        {% endif %}
        {% if card.range %}
            <li>Range: {{ card.range }}</li>
        {% endif %}
        #}
        {% if xml.playcost %}
            {% for playcost in xml.playcost.split(",") %}
                <li>{{ playcost }}</li>
            {% endfor %}
        {% endif %}
        {% for property in card.properties %}
            <li>{{ property }}</li>
        {% endfor %}
        </ul>
    </aside>
    <div class="costbar">
        {% for cost in card.costs %}
            <section>
            {% if cost.split(" ") | length == 2 and cost.split(" ")[0] | int(-1) != -1 %}
                <big>{{ cost.split(" ")[0] }}</big><br>
                <small>{{ cost.split(" ")[1] }}</small>
            {% else %}
                {{ cost }}
            {% endif %}
            </section>
        {% endfor %}
        {% for label, data in [
                ["Difficulty", xml.difficulty],
                ["Power",      xml.power],
                ["Range",      xml.range],
                ["Duration",   xml.duration],
                ["CP",         xml.cp]
                ] %}
            {% if data %}
            <section>
                <big>{{ data }}</big><br>
                <small>{{ label }}</small>
            </section>
            {% endif %}
        {% endfor %}
    </div>
    <div class="description">
    {% if card.flavor %}
        <center><i>"{{ card.flavor }}"</i></center>
    {% endif %}
    {% if card.description %}
        <center>{{ card.description | markdown | safe }}</center>
    {% elif xml.description %}
        <center>{{ xml.description | markdown | safe }}</center>
    {% endif %}
    {% if card.steps %}
        <ul>
        {% for step in card.steps %}
            <li>{{ step }}</li>
        {% endfor %}
        </ul>
    {% endif %}
    </div>
</div>

{# <br><pre>{{ card }}</pre> #}