{% set xml_image_not_done = [1] %}{# why must nunjucks suck so much? #}

{% 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 %}

    {% if figure.source == "xml" %}
        {% set figure_name   = xml.image if xml.image | startswith("http") else xml.image | split(":") | tail | join(":") %}
        {% set figure_source = "url"     if xml.image | startswith("http") else xml.image | split(":") | first %}
        {% if xml_image_not_done.pop() %}{% endif %}
    {% else %}
        {% set figure_name   = figure.name %}
        {% set figure_source = figure.source  %}
    {% endif %}

    <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 and xml_image_not_done | length %}
            {{ 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 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>
                    {% elif playcost | trim | split(" ") | length == 1 %}
                        <section>
                            <big>{{ 1 }}</big><br>
                            <small>{{ playcost }}</small>
                        </section>
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endfor %}
        {% for label, data in [
                ["Artistic Value", xml.artistic_value],
                ["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>
                        {% for part in data | split("+") %}
                            {% if "death" not in part %}
                                {{"+" if not loop.first }}
                                {{ part }}
                            {% endif %}
                        {% endfor %}
                    </big><br>
                    {# <big>{{ data }}</big><br> #}
                    <small>{{ label }}</small>
                </section>
            {% 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 playcost | trim | split(" ") | first | is_number %}
                    {% elif playcost | trim | split(" ") | length == 1 %}
                    {% else %}
                    <li>{{ playcost }}</li>
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endfor %}
        </ul>

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

        {% if yaml.description %}
            <div class="markdown">{{ yaml.description | markdown | safe }}</div>
        {% endif %}
        {% if xml.description %}
            <div class="markdown">{{ xml.description | markdown | safe }}</div>
        {% endif %}

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

        <div class="bottom" style="text-align: center; font-size:1.6em;">
            {% for component in xml.components %}
                {% if component["@db_entry"] | endswith("Mastery") %}
                    &#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
                    &#x274F; &#x274F; &#x274F; &#x274F; &#x274F; <br>
                {% endif %}
            {% endfor %}
        </div>
    </div>
</div>

{#

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

#}