{% 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 and 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 and figure.scale!=1 %}
            scale({{figure.scale | string | replace("[", "") | replace("]", "") }})
        {% endif %}
        ;
    {% endfilter %}{% endset %}

    <div class="layer" style="{{ figure_style }}">
        {% if   figure.source == "material-icons" %}
            {# https://material.io/icons/ #}
            <i class="material-icons figure">{{ figure.name }}</i>
        {% elif figure.source == "mdi" %}
            {# https://materialdesignicons.com/ #}
            <i class="mdi mdi-{{ figure.name }}"></i>
        {% elif figure.source == "fa" %}
            {# http://fontawesome.io/icons/ #}
            <i class="fa fa-{{ figure.name }}"></i>
        {% elif figure.source == "lnr" %}
            {# https://linearicons.com/free #}
            <span class="lnr lnr-{{ figure.name }}"></span>
        {% elif figure.source == "oi" %}
            {# https://useiconic.com/open #}
            <span class="oi" data-glyph="{{ figure.name }}"></span>
        {% elif figure.source == "svg" %}
            {# pvv.ntnu.no/~pederbs/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.source in ["img", "emoji"] %}
            {# pvv.ntnu.no/~pederbs/cards/img #}
            {# /cards/emoji #}
            {% if figure.color == true %}
                <img src="https://pvv.ntnu.no/~pederbs/cards/{{ figure.source }}/data/{{ figure.name }}" class="colored">
            {% elif figure.color %}
                <img src="https://pvv.ntnu.no/~pederbs/cards/{{ figure.source }}/data/{{ figure.name }}" class="colored" style="--figure-color: {{ figure.color }}">
            {% else %}
                <img src="https://pvv.ntnu.no/~pederbs/cards/{{ figure.source }}/data/{{ figure.name }}">
            {% endif %}
        {% elif figure.source == "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 %}


<div class="fjomp_card{{" " + yaml.style if yaml.style}}">
    <header>
        {{ yaml.name or xml.name }}
    </header>
    {% if xml.symbol %}
        <div class="symbol">
            {{ xml.symbol }}
        </div>
    {% endif %}
    <figure>
        {% for figure in yaml.figures or [] %}
            {{ figure_layer(figure) }}
        {% endfor %}
        {% if xml.image %}
            {{ figure_layer({
                'name':   xml.image if xml.image | startswith("http") else xml.image | split(":") | tail | join(":"),
                'source': "url"     if xml.image | startswith("http") else xml.image | split(":") | first
            }) }}
        {% endif %}
    </figure>
    <div class="costbar">
        {% for label, data in [
                ["Difficulty", xml.difficulty or yaml.difficulty],
                ["Power",      xml.power      or yaml.power],
                ["Range",      xml.range      or yaml.range],
                ["Duration",   xml.duration   or yaml.duration],
                ["CP",         xml.cp         or yaml.cp]
                ] %}
            {% if data %}
                <section>
                    <big>{{ data }}</big><br>
                    <small>{{ label }}</small>
                </section>
            {% endif %}
        {% endfor %}
        {% for playcosts in [xml.playcost, yaml.playcost] %}
            {% if playcosts %}
                {% for playcost in (playcosts.split(",") if playcosts | is_string else playcosts ) %}
                    {% if playcost | trim | split(" ") | first | is_number %}
                        <section>
                            <big>{{ playcost | trim | split(" ") | first }}</big><br>
                            <small>{{ playcost | trim | split(" ") | tail | join(" ") }}</small>
                        </section>
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endfor %}
    </div>
    <div class="description">
        <ul>
        {% for playcosts in [xml.playcost, yaml.playcost] %}
            {% if playcosts %}
                {% for playcost in (playcosts.split(",") if playcosts | is_string else playcosts ) %}
                    {% if not playcost | trim | split(" ") | first | is_number %}
                        <li>{{ playcost | trim }}</li>
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endfor %}
        </ul>

        {% if yaml.flavor %}
            <center><i>"{{ yaml.flavor }}"</i></center>
        {% endif %}

        {% if yaml.description %}
            <center>{{ yaml.description | markdown | safe }}</center>
        {% endif %}
        {% if xml.description %}
            <center>{{ xml.description | markdown | safe }}</center>
        {% endif %}

        {% if yaml.steps %}
            <ul>
            {% for step in yaml.steps %}
                <li>{{ step }}</li>
            {% endfor %}
            </ul>
        {% endif %}
    </div>
</div>

{#
{% for item in xml.components %}
{{item["@x"]}},
{{item["@y"]}},
{{item["@db_entry"]}}<br>
{% endfor %}

#}