{% load i18n %}
<table id="table-metric-reel" class="mt-2 compact table table-borderless table-hover metric-table">
    <thead>
        <tr class="text-center">
            <th style="width: 200px;">{% trans "Post" %}</th>
            <th style="width: 150px;">{% trans "Post date" %}</th>
            <th style="width: 5%;">{% trans "reach" %}</th>
            <th style="width: 5%;">{% trans "comments" %}</th>
            <th style="width: 5%;">{% trans "likes" %}</th>
            <th style="width: 5%;">{% trans "plays" %}</th>
            <th style="width: 5%;">{% trans "saved" %}</th>
            <th style="width: 5%;">{% trans "shares" %}</th>
            <th style="width: 5%;">{% trans "interactions" %}</th>           
        </tr>
    </thead>
    <tbody>
        {% for item in update_feed %}
            {% if item.mediatype == "REELS" %}
                <tr class="text-center">
                    {% for get in item.igitem.all %}                              
                            <td class="d-flex align-items-center caption-field">{{get.cover_tag}} <span class="text-dark">{{item.caption|safe}}</span></td>
                    {% endfor %}
                    <td class=text-link>{{item.created}}</td>
                    {% for metric in item.metric_reel.all %}     
                        <td>{{metric.reach}}</td>  
                        <td>{{metric.comments}}</td>
                        <td>{{metric.likes}}</td>  
                        <td>{{metric.plays}}</td>                       
                        <td>{{metric.saved}}</td>
                        <td>{{metric.shares}}</td>
                        <td>{{metric.total_interactions}}</td>
                    {% endfor %}
                </tr>
            {% endif %}
        {% endfor %} 
    </tbody>
</table>