{% extends "base.html" %}

{% block content %}
<div class="bg-slate-900 px-6 py-4 shadow-sm border-b border-slate-800 z-10 flex justify-between items-center">
    {% if read_only %}
        <a href="{{ url_for('archives') }}" class="p-1 -ml-1 text-slate-400 hover:text-white"><i data-lucide="chevron-left"></i></a>
    {% else %}
        <a href="{{ url_for('dashboard') }}" class="p-1 -ml-1 text-slate-400 hover:text-white"><i data-lucide="chevron-left"></i></a>
    {% endif %}
    
    <h1 class="font-bold text-slate-200">Daily Log</h1>
    <a href="{{ url_for('export_excel', tour_id=tour.id) }}" class="p-2 text-brand-500 hover:bg-slate-800 rounded-full">
        <i data-lucide="download"></i>
    </a>
</div>

<div class="flex-1 overflow-y-auto p-4 space-y-3">
    {% for date_str in sorted_dates %}
        {% set day = history[date_str] %}
        <div class="bg-slate-900 rounded-2xl shadow-sm border border-slate-800 overflow-hidden">
            <div class="p-4 bg-slate-800/30">
                <div class="flex justify-between items-center mb-2">
                    <h3 class="font-bold text-slate-200">{{ date_str }}</h3>
                    <span class="text-xs text-red-400 font-bold">-{{ tour.currency }}{{ day.total }}</span>
                </div>
            </div>
            
            <div class="border-t border-slate-800 bg-slate-900">
                {% for expense in day.expenses %}
                <div class="p-4 flex justify-between items-center border-b border-slate-800 last:border-0">
                    <div class="flex-1 min-w-0 mr-4">
                        <div class="font-medium text-slate-200 truncate">{{ expense.merchant }}</div>
                        <div class="text-xs text-slate-500 mt-0.5 flex items-center gap-1">
                            <span class="bg-slate-800 px-1.5 py-0.5 rounded text-slate-400">{{ expense.category }}</span>
                            <span>• Paid by {{ expense.payer }}</span>
                        </div>
                        <div class="text-xs text-brand-500 mt-1 flex items-center gap-1">
                            <i data-lucide="user" width="10"></i>
                            <span class="truncate">
                                For: {{ expense.splits | join(', ') }}
                            </span>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="font-bold text-slate-200">{{ tour.currency }}{{ expense.amount }}</div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    {% endfor %}
</div>
{% endblock %}