🎨 Nunjucks Templating Demo

<!-- Member count -->
{{ members | length }}

<!-- Members with feeds -->
{% set membersWithFeeds = members | selectattr('feed') | list %}
{{ membersWithFeeds | length }}

<!-- Percentage calculation -->
{% set feedPercentage = ((membersWithFeeds | length) / (members | length) * 100) | round %}
{{ feedPercentage }}%

<!-- Pattern matching -->
{% set southAfricanSites = members | selectattr('url', 'match', '.*\\.co\\.za.*') | list %}
{{ southAfricanSites | length }}

<!-- Loop with conditional -->
{% for member in members %}
    {% if member.feed %}
        <li>{{ member.title }} - Has RSS Feed</li>
    {% else %}
        <li>{{ member.title }} - No RSS Feed</li>
    {% endif %}
{% endfor %}

<!-- Alternative: Filter first, then loop -->
{% for member in members | selectattr('feed') %}
    <li>{{ member.title }} - {{ member.feed }}</li>
{% endfor %}

<!-- Sort by attribute -->
{% for member in members | sort(attribute='title') %}
    <li>{{ member.title }}</li>
{% endfor %}

<!-- Filter and sort combined -->
{% for member in members | selectattr('feed') | sort(attribute='title') %}
    <li>{{ member.title }} - {{ member.feed }}</li>
{% endfor %}

<!-- Reverse sorting -->
{% for member in members | sort(attribute='title', reverse=true) %}
    <li>{{ member.title }}</li>
{% endfor %}

<!-- Basic math -->
{{ members | length * 2 }}

<!-- Growth projections -->
{% for month in range(1, 7) %}
    {% set projected = (members | length * (1.2 ** month)) | round %}
    Month {{ month }}: ~{{ projected }} members
{% endfor %}

<!-- Percentage calculations -->
{% set percentage = (value / total * 100) | round(2) %}
{{ percentage }}%

<!-- Complex calculations -->
{% set average = (total_value / count) | round(1) %}
Average: {{ average }}

<!-- Define theme array -->
{% set themes = [
    {name: 'ocean', bg: '#e3f2fd', border: '#1976d2'},
    {name: 'sunset', bg: '#fff3e0', border: '#ff9800'}
] %}

<!-- Apply themes cyclically -->
{% for member in members %}
    {% set themeIndex = loop.index0 % 2 %}
    {% set theme = themes[themeIndex] %}
    <div style="background: {{ theme.bg }}; border: 2px solid {{ theme.border }};">
        {{ member.title }}
    </div>
{% endfor %}

<!-- Conditional styling -->
{% if member.feed %}
    <span style="color: green;">Has RSS</span>
{% else %}
    <span style="color: orange;">No RSS</span>
{% endif %}

<!-- Text case transformations -->
{{ title | upper }}           <!-- UPPERCASE -->
{{ title | lower }}           <!-- lowercase -->
{{ title | title }}           <!-- Title Case -->

<!-- String manipulation -->
{{ title | truncate(15) }}    <!-- Truncated text... -->
{{ title | replace(' ', '-') | lower }}  <!-- URL slug -->

<!-- Advanced string operations -->
{{ url | replace('https://', '') | split('/')[0] }}  <!-- Extract domain -->
{{ text | wordcount }}        <!-- Count words -->
{{ text | reverse }}          <!-- Reverse string -->

<!-- Chaining filters -->
{{ member.title | lower | replace(' ', '-') | replace('&', 'and') }}

<!-- Multi-level conditionals -->
{% if members | length >= 10 %}
    <p>Large Community! {{ members | length }} members</p>
{% elif members | length >= 5 %}
    <p>Growing Community! {{ members | length }} members</p>
{% else %}
    <p>Small but Mighty! {{ members | length }} members</p>
{% endif %}

<!-- Conditional with calculations -->
{% set feedPercentage = ((membersWithFeeds | length) / (members | length) * 100) | round %}
{% if feedPercentage >= 70 %}
    <p>Excellent RSS adoption! {{ feedPercentage }}%</p>
{% elif feedPercentage >= 40 %}
    <p>Good RSS adoption at {{ feedPercentage }}%</p>
{% else %}
    <p>Low RSS adoption ({{ feedPercentage }}%)</p>
{% endif %}

<!-- Inline conditionals -->
<span class="{{ 'has-feed' if member.feed else 'no-feed' }}">
    {{ member.title }}
</span>

<!-- Define a reusable macro -->
{% macro memberBadge(member, style='default') %}
    {% if style == 'success' %}
        {% set bg = '#e8f5e8' %}
        {% set color = '#4caf50' %}
    {% elif style == 'warning' %}
        {% set bg = '#fff3e0' %}
        {% set color = '#ff9800' %}
    {% else %}
        {% set bg = '#e3f2fd' %}
        {% set color = '#1976d2' %}
    {% endif %}
    
    <span style="background: {{ bg }}; color: {{ color }}; padding: 0.25rem 0.5rem; border-radius: 1rem;">
        {{ member.title }}
        {% if member.feed %}📡{% endif %}
    </span>
{% endmacro %}

<!-- Use the macro -->
{{ memberBadge(member, 'success') }}
{{ memberBadge(member, 'warning') }}