{# @var status \App\SocialEntity\Status #}
{% for status in statuses %}

    <div class="row" id="message_container_{{ status.getId()  }}" style="margin-bottom: 20px;">
        <div class="col-8">
            <div class="card">
                <div class="card-horizontal" style=" display: flex;flex: 1 1 auto;">
                    <div class="img-square-wrapper">
                        <img class="" width="80" src="{{ status.account.avatar  }}" style=" border-radius: 5%; margin: 5px;">
                    </div>
                    <div class="card-body">
                        <span class="card-title" style="size: 1.1em;">{{ convertAccountEmoji(status.account , status.account.displayName) | raw }} - @{{ status.account.acct  }}</span>
                        <p class="card-text">
                            {% if status.spoilerText is defined %}
                                <b>{{ status.spoilerText  }}</b> <br/>
                            {% endif %}
                            {% if status.content is not null %}
                                {{ status.content | nl2br }}
                            {% endif %}
                        </p>
                    </div>
                </div>
                {% if status.getMediaAttachments() is not null and status.getMediaAttachments() | length > 0%}
                <div class="card-horizontal" style=" display: flex;flex: 1 1 auto;">
                    <div class="img-square-wrapper">
                        {% for media in  status.getMediaAttachments() %}
                            <img class="" width="150" src="{{ media.url  }}"
                                 style=" border-radius: 5%; margin: 5px;"
                                 {% if media.description is defined and media.description is not empty %}
                                     alt="{{ media.description }}"
                                     title="{{ media.description }}"
                                 {% endif %}
                            />
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
                <div class="card-footer text-body-secondary">
                    <small class="text-muted">
                        {% if status.visibility == "public" %}
                            <i class="fa fa-globe"></i>
                        {% elseif status.visibility == "unlisted" %}
                            <i class="fa fa-unlock-alt"></i>
                        {% elseif status.visibility == "private" %}
                            <i class="fa fa-lock"></i>
                        {% elseif status.visibility == "direct" %}
                            <i class="fa fa-envelope"></i>
                        {% endif %}
                    </small> - {{ status.scheduledAt | date('d/m/y H:i')   }}
                    <button class="btn btn-danger btn-sm" data-record-id="{{ status.getId() }}"  style="position: absolute;right: 5px;bottom: 5px;"

                            {% if status.content is not null %}
                                data-record-title="{{ status.content }} - {{ status.scheduledAt | date('d/m/y H:m')  }}"
                            {% else %}
                                data-record-title="{{ status.scheduledAt | date('d/m/y H:m')  }}"
                            {% endif %}

                            data-bs-toggle="modal" data-bs-target="#confirm-delete"
                    >X</button>
                </div>
            </div>
        </div>
    </div>

{% endfor %}
