<tr>
    <td style="padding: 24px;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);">
            <tr>
                <td style="padding: 20px 24px; border-bottom: 1px solid #E2E8F0;">
                    <h2 style="margin: 0; color: #1E3A8A; font-size: 16px; font-weight: 600;">Session Overview</h2>
                </td>
            </tr>
            <tr>
                <td style="padding: 16px 24px;">
                    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="width: 100%;">
                        <tr>
                            <td width="33%" style="padding: 8px;">
                                <div style="background-color: #EFF6FF; border-radius: 8px; padding: 12px; text-align: center;">
                                    <div style="color: #64748B; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Start Time</div>
                                    <div style="color: #1E40AF; font-size: 14px; font-weight: 600;">{{ start_time }}</div>
                                </div>
                            </td>
                            <td width="33%" style="padding: 8px;">
                                <div style="background-color: #EFF6FF; border-radius: 8px; padding: 12px; text-align: center;">
                                    <div style="color: #64748B; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">End Time</div>
                                    <div style="color: #1E40AF; font-size: 14px; font-weight: 600;">{{ end_time }}</div>
                                </div>
                            </td>
                            <td width="33%" style="padding: 8px;">
                                <div style="background-color: #EFF6FF; border-radius: 8px; padding: 12px; text-align: center;">
                                    <div style="color: #64748B; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Duration</div>
                                    <div style="color: #1E40AF; font-size: 14px; font-weight: 600;">{{ duration }}</div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td width="50%" style="padding: 8px;">
                                <div style="background-color: #FFF7ED; border-radius: 8px; padding: 12px; text-align: center;">
                                    <div style="color: #64748B; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Reward Type</div>
                                    <div style="color: #C2410C; font-size: 14px; font-weight: 600;">{{ reward_type }}</div>
                                </div>
                            </td>
                            <td width="50%" style="padding: 8px;">
                                <div style="background-color: #ECFDF5; border-radius: 8px; padding: 12px; text-align: center;">
                                    <div style="color: #64748B; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Total Animals</div>
                                    <div style="color: #047857; font-size: 14px; font-weight: 600;">{{ total_animals }}</div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>

<tr>
    <td style="padding: 0 24px 24px 24px;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);">
            <tr>
                <td style="padding: 20px 24px; border-bottom: 1px solid #E2E8F0;">
                    <h2 style="margin: 0; color: #1E3A8A; font-size: 16px; font-weight: 600;">Animal Details</h2>
                </td>
            </tr>
            {% for animal in animals %}
            <tr>
                <td style="padding: 16px 24px;{% if not loop.last %} border-bottom: 1px solid #F1F5F9;{% endif %}">
                    <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td style="padding-bottom: 12px;">
                                <table role="presentation" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="background-color: #1E40AF; color: #FFFFFF; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 6px;">{{ animal.name }}</td>
                                        <td style="padding-left: 8px; color: #94A3B8; font-size: 11px; font-family: monospace;">{{ animal.rfid_id }}</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                    
                    <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td width="33%" style="padding: 4px; text-align: center;">
                                <div style="color: #64748B; font-size: 11px; margin-bottom: 2px;">Trials</div>
                                <div style="color: #1E293B; font-size: 18px; font-weight: 700;">{{ animal.total_trials }}</div>
                            </td>
                            <td width="33%" style="padding: 4px; border-left: 1px solid #E2E8F0; border-right: 1px solid #E2E8F0; text-align: center;">
                                <div style="color: #64748B; font-size: 11px; margin-bottom: 2px;">Sessions</div>
                                <div style="color: #1E293B; font-size: 18px; font-weight: 700;">{{ animal.animal_sessions }}</div>
                            </td>
                            <td width="33%" style="padding: 4px; text-align: center;">
                                <div style="color: #64748B; font-size: 11px; margin-bottom: 2px;">Duration</div>
                                <div style="color: #1E293B; font-size: 18px; font-weight: 700;">{{ animal.duration }}</div>
                            </td>
                        </tr>
                    </table>
                    
                    {% if animal.stages %}
                    <div style="margin-top: 12px; background-color: #F8FAFC; border-radius: 8px; padding: 10px 12px;">
                        <div style="color: #64748B; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Stage Progress</div>
                        {% for stage in animal.stages %}
                        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin-bottom: 6px; background-color: #FFFFFF; border-radius: 6px; padding: 8px 12px;">
                            <tr>
                                <td style="color: #334155; font-size: 13px; font-weight: 500;">{{ stage.name }}</td>
                                <td style="color: #64748B; font-size: 12px; text-align: right;">
                                    <span style="margin-right: 12px;">Trials: {{ stage.trials }}</span>
                                    {%- if stage.final_level > stage.initial_level %}
                                    <span style="color: #16A34A; font-weight: 600;">
                                        Level: {{ stage.initial_level }} → {{ stage.final_level }} (+{{ stage.final_level - stage.initial_level }})
                                    </span>
                                    {%- elif stage.final_level < stage.initial_level %}
                                    <span style="color: #DC2626; font-weight: 600;">
                                        Level: {{ stage.initial_level }} → {{ stage.final_level }} ({{ stage.final_level - stage.initial_level }})
                                    </span>
                                    {%- else %}
                                    <span style="color: #64748B;">
                                        Level: {{ stage.initial_level }} (no change)
                                    </span>
                                    {%- endif %}
                                </td>
                            </tr>
                        </table>
                        {% endfor %}
                    </div>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </table>
    </td>
</tr>
