{% extends "base.html" %}

{% block content %}
<!-- Navbar -->
<div class="flex justify-between items-center p-6 pt-8">
    <h1 class="font-bold text-slate-200 tracking-tight text-lg">{{ tour.name }}</h1>
    <a href="{{ url_for('settings') }}" class="p-2 text-slate-400 hover:text-white rounded-full hover:bg-slate-900">
        <i data-lucide="settings"></i>
    </a>
</div>

<!-- Main Content -->
<div class="flex-1 flex flex-col items-center justify-center px-8 space-y-10 pb-20">
    
    <!-- Day Indicator -->
    <div class="text-center">
        <h2 class="text-5xl font-black text-white tracking-tighter mb-1">{{ day_display }}</h2>
        <p class="text-slate-500 font-medium uppercase tracking-wide text-sm">{{ day_subtext }}</p>
    </div>

    <!-- Financials -->
    <div class="w-full space-y-8">
        
        <div class="text-center">
            <p class="text-slate-500 text-xs font-bold uppercase tracking-widest mb-1">Total Tour Budget</p>
            <div class="text-2xl font-semibold text-slate-300">
                {{ tour.currency }}{{ "{:,.0f}".format(tour.budget) }}
            </div>
        </div>

        <div class="text-center bg-slate-900 p-6 rounded-3xl shadow-sm border border-slate-800">
            <p class="text-brand-500 text-xs font-bold uppercase tracking-widest mb-2">Start of Day Balance</p>
            <div class="text-5xl font-bold text-white tracking-tight">
                {{ tour.currency }}{{ "{:,.2f}".format(start_of_day_balance) }}
            </div>
        </div>

        <!-- Progress Bar -->
        <div class="w-full">
            {% set percent = (total_spent / tour.budget) * 100 %}
            <div class="flex justify-between items-end mb-2">
                <span class="text-sm font-medium text-slate-400">Budget Used</span>
                <span class="text-sm font-bold text-slate-200">
                  {{ tour.currency }}{{ "{:,.0f}".format(total_spent) }} <span class="text-slate-500 font-normal">/ {{ tour.currency }}{{ "{:,.0f}".format(tour.budget) }}</span>
                </span>
            </div>
            <div class="h-3 w-full bg-slate-800 rounded-full overflow-hidden">
                <div 
                  class="h-full rounded-full transition-all duration-500 ease-out {{ 'bg-red-500' if total_spent > tour.budget else 'bg-brand-500' }}"
                  style="width: {{ [percent, 100] | min }}%"
                ></div>
            </div>
        </div>
    </div>

</div>

<!-- Bottom Action Area -->
<div class="p-6 pb-8 bg-slate-900 rounded-t-3xl shadow-[0_-4px_20px_rgba(0,0,0,0.5)] border-t border-slate-800 mt-auto">
    <div class="grid grid-cols-5 gap-4">
        <div class="col-span-1">
            <a href="{{ url_for('history') }}"
                class="w-full h-full flex items-center justify-center bg-slate-800 text-slate-400 rounded-2xl hover:bg-slate-700 hover:text-white border border-slate-700">
                <i data-lucide="list"></i>
            </a>
        </div>
        <div class="col-span-4">
            <a href="{{ url_for('add_expense') }}" class="w-full flex items-center justify-center gap-2 bg-brand-600 text-white py-4 text-lg font-semibold rounded-xl hover:bg-brand-500">
                <i data-lucide="plus"></i> Log Expense
            </a>
        </div>
    </div>
</div>
{% endblock %}