{%- macro ruleCategories(params) -%}
<div class="{% if params.index %}rule-categories{% endif %}" aria-label="Rule Categories">
    {%- if params.recommended == true -%}
    <div class="rule-category">
        <span class="rule-category__icon">✅ <span class="visually-hidden">Recommended</span></span>
        <p class="rule-category__description">
            Using the <code>recommended</code> config from <code>@eslint/js</code> in a <a
                href="../use/configure/configuration-files#use-predefined-configurations">configuration file</a>
            enables this rule
        </p>
    </div>
    {%- endif -%}
    {%- if params.fixable -%}
    <div class="rule-category">
        <span class="rule-category__icon">🔧 <span class="visually-hidden">Fixable</span></span>
        <p class="rule-category__description">
            Some problems reported by this rule are automatically fixable by the <code>--fix</code> <a
                href="../use/command-line-interface#--fix">command line</a> option
        </p>
    </div>
    {%- endif -%}
    {%- if params.hasSuggestions == true -%}
    <div class="rule-category">
        <span class="rule-category__icon">💡 <span class="visually-hidden">hasSuggestions</span></span>
        <p class="rule-category__description">
            Some problems reported by this rule are manually fixable by editor <a
                href="../use/core-concepts#rule-suggestions">suggestions</a>
        </p>
    </div>
    {%- endif -%}
    {%- if params.frozen == true -%}
    <div class="rule-category">
        <span class="rule-category__icon">❄️ <span class="visually-hidden">Frozen</span></span>
        <p class="rule-category__description">
            This rule is currently <a href="../contribute/core-rules#frozen-rules">frozen</a> and is not accepting feature requests.
        </p>
    </div>
    {%- endif -%}
</div>
{%- endmacro -%}

{%- macro recommended() -%}
<div class="rule-category">
    <span class="rule-category__icon">✅ <span class="visually-hidden">Recommended</span></span>
    <p class="rule-category__description">
        if the <code>recommended</code> config from <code>@eslint/js</code> in a configuration file enables the rule.
    </p>
</div>
{%- endmacro -%}

{%- macro fixable() -%}
<div class="rule-category">
    <span class="rule-category__icon">🔧 <span class="visually-hidden">Fixable</span></span>
    <p class="rule-category__description">
        if some problems reported by the rule are automatically fixable by the <code>--fix</code> command line option
    </p>
</div>
{%- endmacro -%}

{%- macro hasSuggestions() -%}
<div class="rule-category">
    <span class="rule-category__icon">💡 <span class="visually-hidden">hasSuggestions</span></span>
    <p class="rule-category__description">
        if some problems reported by the rule are manually fixable by editor suggestions
    </p>
</div>
{%- endmacro -%}

{%- macro frozen() -%}
<div class="rule-category">
    <span class="rule-category__icon">❄️ <span class="visually-hidden">Frozen</span></span>
    <p class="rule-category__description">
        if the rule is currently frozen and not accepting feature requests.
    </p>
</div>
{%- endmacro -%}