{% 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 == "svg" -%}
            {#- /cards/svg -#}
            <img src="/svg/{{ figure.name }}">
        {%- elif figure.type == "img" -%}
            {#- /cards/img -#}
            <img src="/img/{{ figure.name }}">
        {%- endif -%}
    </div>
{%- endmacro -%}

<div class="fjomp_card">
    <header>{{ card.title }}</header>
    <figure>
        {% for figure in card.figures -%}
            {{ figure_layer(figure) }}
        {% endfor %}
    </figure>
    <aside><ul>
        {% for property in card.properties -%}
            <li>{{ property }}</li>
        {% endfor %}
    </ul></aside>
    <summary>
        {%- for cost in card.costs %}
            <section>
                {%- if cost.split() | length == 2 and cost.split()[0].isnumeric() %}
                    <big>{{ cost.split()[0] }}</big><br>
                    <small>{{ cost.split()[1] }}</small>
                {% else %}
                    {{ cost }}
                {% endif %}
            </section>
        {%- endfor %}
    </summary>
    <article>
        <center><i>"{{ card.flavor }}"</i></center>
        <center>{{ card.description | markdown | safe }}</center>

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

    </article>
</div>

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