<div class="container">

    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button {{ (status == "open") ? 'class="nav-link active" id="open-tab" type="button" role="tab" aria-controls="home" aria-selected="true"' : 'class="nav-link" id="closed-tab" type="button" role="tab" aria-controls="profile" aria-selected="false"' }} onclick="loadConversations('open')" >Offen</button>
        </li>
        <li class="nav-item" role="presentation">
            <button {{ (status == "closed") ? 'class="nav-link active" id="open-tab" type="button" role="tab" aria-controls="home" aria-selected="true"' : 'class="nav-link" id="closed-tab" type="button" role="tab" aria-controls="profile" aria-selected="false"' }} onclick="loadConversations('closed')">Abgeschlossen</button>
        </li>
    </ul>
    <div class="overflow-auto" style="max-height: 80vh;">
        {% for conversation in conversations %}
            <div class="card flex-row">
                <img src="/upload/{{ conversation.fkImage.ImageFile }}" class="card-img-top w-25" alt="Image {{ conversation.fkImage.id }}">
                <div class="card-body">
                    <h5 class="card-title">Bild {{ conversation.fkImage.id }} - Konversation {{ conversation.id}} mit {{conversation.fkImage.fkUser.name}}</h5>
                    <p class="card-text">Thema: {{ conversation.message }}</p>
                    <button type="button" class="btn btn-primary" onclick="backend.openSingleImage({{ conversation.fkImage.id }})">Bild öffnen</button>
                    <a type="button" href="mailto:{{ conversation.fkImage.fkUser.email }}" class="btn btn-secondary">E-Mail senden ({{ conversation.fkImage.fkUser.email }})</a>
                    {% if status == 'open' %}
                        <button type="button" class="btn btn-success" onclick="deleteConversation('{{ conversation.id }}')">Als gelöst markieren</button>
                    {% endif %}

                </div>
            </div>
        {% endfor %}
    </div>
</div>