{% load i18n %} {% if tracked_mails %}
<div class="oh-sticky-table">
    <div class="oh-sticky-table__table oh-table--sortable">
        <div class="oh-sticky-table__thead">
            <div class="oh-sticky-table__tr">
                <div class="oh-sticky-table__th" style="width:10px">{% trans 'Sl.No' %}</div>
                <div class="oh-sticky-table__th">{% trans 'Subject' %}</div>
                <div class="oh-sticky-table__th" align="center">
                    {% trans 'Status' %}
                </div>
            </div>
        </div>
        <div class="oh-sticky-table__tbody">
            {% for log in tracked_mails %}
            <div
                class="oh-sticky-table__tr"
                data-toggle="oh-modal-toggle"
                data-target="#mailBodymodal{{log.id}}"
            >
                <div class="oh-sticky-table__td">
                    <strong>{{forloop.counter}}</strong>
                </div>
                <div class="oh-sticky-table__td">
                    <strong>{{log.subject}} </strong>
                </div>
                <div align="center" class="oh-sticky-table__td">
                    {% if log.status == 'sent' %}
                    <div
                        style="width: 25%; border-radius: 10px"
                        class="oh-btn oh-btn--success oh-btn--disabled"
                    >
                        {{log.get_status_display}}
                    </div>
                    {% else %}
                    <div
                        style="width: 25%; border-radius: 10px"
                        class="oh-btn oh-btn--danger oh-btn--disabled"
                    >
                        {{log.get_status_display}}
                    </div>
                    {% endif %}
                </div>
            </div>

            <div
                class="oh-modal"
                id="mailBodymodal{{log.id}}"
                role="dialog"
                aria-labelledby="mailBodymodal{{log.id}}"
                aria-hidden="true"
            >
                <div class="oh-modal__dialog">
                    <div class="oh-modal__dialog-header">
                        <button class="oh-modal__close" aria-label="Close">
                            <ion-icon name="close-outline"></ion-icon>
                        </button>
                    </div>
                    <div
                        class="oh-modal__dialog-body"
                    >
                        {{log.body|safe}}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% else %}
<div
    class="d-flex justify-content-center align-items-center"
    style="height: 40vh"
>
    <h5 class="oh-404__subtitle">{% trans "No Mail have been send." %}</h5>
</div>
{% endif %}