{% if detail.dailies or detail.conversations %}
<div class="card bg-dark day-detail-card">
    <div class="card-header">
        <h5 class="mb-0"><i class="fas fa-calendar-day"></i> {{ detail.date }}</h5>
    </div>
    <div class="card-body">

        {% for daily in detail.dailies %}
        <div class="daily-section mb-3">
            <div class="d-flex align-items-center mb-2">
                <span class="agent-dot" style="background-color: {{ colors.get(daily.tap_agent, '#6C757D') }};"></span>
                <h6 class="mb-0 ms-2">
                    <a href="#" class="tmbtn text-info" data-module="cal" data-action="record/{{ daily.tap_id }}">
                        {{ daily.tap_title }}
                    </a>
                </h6>
                <small class="text-muted ms-2">{{ daily.tap_agent }}</small>
            </div>
            <div class="daily-preview text-muted">
                {{ daily.tap_content[:300] }}{% if daily.tap_content|length > 300 %}&hellip;{% endif %}
            </div>
        </div>
        {% endfor %}

        {% if detail.conversations %}
        <hr>
        <h6><i class="fas fa-comments"></i> Conversations ({{ detail.conversations|length }})</h6>
        <div class="conversation-list">
            {% for conv in detail.conversations %}
            <div class="conversation-item">
                <div class="d-flex align-items-center">
                    <span class="agent-dot" style="background-color: {{ colors.get(conv.tap_agent, '#6C757D') }};"></span>
                    <a href="#" class="tmbtn text-info ms-2" data-module="cal" data-action="record/{{ conv.tap_id }}">
                        {{ conv.tap_title }}
                    </a>
                    <small class="text-muted ms-2">{{ conv.tap_agent }}</small>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}

    </div>
</div>
{% else %}
<div class="text-muted text-center py-3">No records for {{ detail.date }}</div>
{% endif %}