{% load i18n static %}
<div class="slide-canvas slide-table" {% if slide.background_color %}style="background:{{ slide.background_color }}"{% endif %}>
    <div class="slide-table__header">
        <h1 class="slide-table__title">{{ slide.title }}</h1>
        {% if slide.subtitle %}
        <p class="slide-table__subtitle">{{ slide.subtitle }}</p>
        {% endif %}
    </div>

    <div class="slide-table__container">
        <table class="slide-table__element">
            <thead>
                <tr>
                    {% for header in slide.content.headers %}
                    <th>{{ header }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in slide.content.rows %}
                <tr class="{% if row.0.row_bg %}rating-row--{{ row.0.row_bg }}{% endif %}">
                    {% for cell in row %}
                    <td {% if cell.font_weight %}style="font-weight:{{ cell.font_weight }}"{% endif %}>
                        {% if cell.badge %}
                        <span class="slide-badge slide-badge--{{ cell.badge.variant|default:'navy' }}">{{ cell.badge.text }}</span>
                        {% elif cell.rating_bar %}
                        <div style="display:flex;align-items:center;gap:8px;">
                            <span style="font-weight:700;">{{ cell.rating_bar.value }}</span>
                            <div style="flex:1;max-width:100px;height:6px;background:rgba(255,255,255,0.25);border-radius:3px;overflow:hidden;">
                                <div style="height:100%;width:{{ cell.rating_bar.pct }}%;background:#fff;border-radius:3px;"></div>
                            </div>
                        </div>
                        {% elif cell.progress %}
                        <div class="slide-progress-bar" style="width:120px;">
                            <div class="slide-progress-bar__fill" style="width:{{ cell.progress }}%"></div>
                        </div>
                        <span style="font-size:12px;color:var(--px-muted);margin-left:8px;">{{ cell.progress }}%</span>
                        {% else %}
                        {{ cell.text|default:cell }}
                        {% endif %}
                    </td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <img src="{% static 'img/HH_R_H_Logo.png' %}" alt="" class="slide-logo--footer">
</div>