{% from 'components/rule-list.macro.html' import replacementRuleList %}

{%- macro rule(params) -%}
<article class="rule {% if params.deprecated == true %}rule--deprecated{% endif %} {% if params.removed == true %}rule--removed{% endif %}">
    <div class="rule__content">
        {%- if params.deprecated == true -%}
        <p class="rule__name">
            {{ params.name }}
            <span class="rule__status">deprecated</span>
        </p>
        {%- if params.replacedBy|length -%}
        <p class="rule__description">Replaced by {{ replacementRuleList({ specifiers: params.replacedBy }) }}</p>
        {%- else -%}<p class="rule__description">{{ params.description }}</p>
        {%- endif -%}
        {%- elseif params.removed == true -%}
        <p class="rule__name">
            {{ params.name }}
            <span class="rule__status">removed</span>
        </p>
        {%- if params.replacedBy|length -%}
        <p class="rule__description">Replaced by {{ replacementRuleList({ specifiers: params.replacedBy }) }}</p>
        {%- else -%}<p class="rule__description">{{ params.description }}</p>
        {%- endif -%}
        {%- else -%}
        <div class="rule__name_wrapper">
        <a href="{{ ['/rules/', params.name] | join | url }}" class="rule__name">{{ params.name }}</a>
            {%- if params.categories and params.categories.frozen %}
                <p class="frozen"> ❄️ <span class="visually-hidden">Frozen</span></p>
            {%- endif -%}
        </div>
        <p class="rule__description">{{ params.description }}</p>
        {%- endif -%}
    </div>
    {%- if params.removed == undefined -%}
    <div class="rule__categories">
        <span class="visually-hidden">Categories:</span>
        {%- if params.deprecated -%}
            <p class="rule__categories__type">❌</p>
            {%- else -%}
            <p class="rule__categories__type"{% if params.categories.recommended == false %} aria-hidden="true"{%- endif -%}>
            ✅ <span class="visually-hidden">Extends</span>
        </p>
        {%- endif -%}

        <p class="rule__categories__type"{% if params.categories.fixable == false %} aria-hidden="true"{%- endif -%}>
            🔧 <span class="visually-hidden">Fix</span>
        </p>
        <p class="rule__categories__type"{% if params.categories.hasSuggestions == false %} aria-hidden="true"{%- endif -%}>
            💡 <span class="visually-hidden">Suggestions</span>
        </p>
    </div>
    {%- endif -%}
</article>
{%- endmacro -%}