{% from "macros/date.njk" import format %}

{% macro stars(number) %}
    {% set filledStars = number %}
    {% set emptyStars = 5 - number %}
    <ul class="stars flex list-none p-0 mb-0 text-primary"
        aria-description="{{ number }} out of 5 stars">
        {% for i in range(0, filledStars) %}
            <li class="star-filled">{% include "svgs/star.svg" %}</li>
        {% endfor %}
        {% for i in range(0, emptyStars) %}
            <li class="star-empty">{% include "svgs/star-empty.svg" %}</li>
        {% endfor %}
    </ul>
{% endmacro %}

{% macro spoilerWarning() %}
    <section class="bg-surface radius-1 p-4 flow-space-default">
        <span class="text-secondary">{% include "svgs/triangle-exclamation.svg" %}</span>
        <strong>Warning!</strong>
        The following may contain spoilers!
    </section>
{% endmacro %}

{% macro pageHeader(title, subtitle, date) %}
    <header class="flow">
        <div class="flow flow-space-3">
            <h1>{{ title }}</h1>
            {% if subtitle %}<h3 class="text-fadeText">{{ subtitle }}</h3>{% endif %}
        </div>
        {% if date %}{{ format(date) }}{% endif %}
    </header>
{% endmacro %}