{% if model.components %}
{% set prop_keys = model.properties | list %}
<div class="prop-table-wrap">
<table class="prop-table">
    <thead>
        <tr>
            <th class="prop-sticky">Components</th>
            {% for key in prop_keys %}
            <th class="prop-col" style="z-index: {{ loop.revindex }}">
                <div>
                    <a href="property_{{ key | slugify }}.html">{{ key | replace('_', ' ') | replace('!', 'not ') | title }}</a>
                </div>
            </th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% set ns = namespace(current_class=None) %}
        {% for comp_name, component in model.components | sort_by_class %}
        {% if component.component_class not in config.hide_components_with_category %}
        {% if component.component_class != ns.current_class %}
        {% set ns.current_class = component.component_class %}
        <tr class="prop-section-row">
            <td class="prop-section-cell prop-sticky">{{ component.component_class }}</td>
            {% for _ in prop_keys %}<td class="prop-section-spacer"></td>{% endfor %}
        </tr>
        {% endif %}
        <tr>
            <td class="prop-sticky" title="{{ comp_name }} — {{ component.component_class }}{% if component.inBoundary %} · {{ component.inBoundary }}{% endif %}">
                <a href="component_{{ comp_name | slugify }}.html">{{ comp_name }}</a>
                <div class="prop-meta">{{ component.component_class }}{% if component.inBoundary %} · {{ component.inBoundary }}{% endif %}</div>
            </td>
            {% for key in prop_keys %}
            {% set val = component.get_property(key) %}
	    {% set label = key | replace('_', ' ') | title %}
	    {% if val is sameas true %}
	    	<td class="prop-cell prop-true" data-tooltip="{{ comp_name }} · {{ label }} = true">✓</td>
	    {% elif val is sameas false %}
	    	<td class="prop-cell prop-false" data-tooltip="{{ comp_name }} · {{ label }} = false">✗</td>
	    {% else %}
	        <td class="prop-cell prop-true" data-tooltip="{{ comp_name }} · {{ label }} = {{ val }}">*</td>{% endif %}
            {% endfor %}
        </tr>
        {% endif %}
        {% endfor %}
    </tbody>
</table>
</div>
<script>
(function() {
    document.querySelectorAll('.prop-table').forEach(function(table) {
        var headerRow = table.querySelector('thead tr');
        table.querySelectorAll('td.prop-cell').forEach(function(cell) {
            cell.addEventListener('mouseenter', function() {
                cell.parentElement.cells[0].classList.add('prop-highlight');
                headerRow.cells[cell.cellIndex].classList.add('prop-highlight');
            });
            cell.addEventListener('mouseleave', function() {
                table.querySelectorAll('.prop-highlight').forEach(function(el) {
                    el.classList.remove('prop-highlight');
                });
            });
        });
    });
})();
</script>
{% endif %}