{% macro card(map) %}
    <div class="map">
        <img class="map-image" data-src="https://ddnet.tw/ranks/maps/{{ map.map | replace(r/[À-ž]/g, "__") | replace(r/[^a-zA-Z0-9]/g, "_") }}.png">
        <h1 class="map-name">{{ map.map }}</h1>
        <table class="map-info">
            <tr>
                <td>
                    {% if map.mappers[1] %}
                        Mappers:
                    {% else %}
                        Mapper:
                    {% endif %}
                </td>
                <td>
                    {{ map.mappers.join(", ") }}
                </td>
            </tr>
            <tr>
                <td>
                    Category:
                </td>
                <td>
                    {{ map.category }}
                </td>
            </tr>
            <tr>
                <td>
                    Rating:
                </td>
                <td>
                    {% for i in range(0, map.stars) %}★{% endfor %}
                    {% for i in range(0, 5 - map.stars) %}☆{% endfor %}
                </td>
            </tr>
        </table>
        <a class="map-more-info" href="/maps/{{ map.map | urlencode }}">More Info</a>
    </div>
{% endmacro %}