{% extends "base.html" %}
{% block body %}
<header class="hero">
    <div>
        <h1>Fasting Tracker</h1>
        <p class="subtitle">Set your start time and goal hours. Progress updates automatically and shows each hour of your fast.</p>
    </div>
</header>

<main class="layout">
    <section class="card highlight">
        <div class="section-title">Time Remaining</div>
        <div class="time-remaining">
            <div class="big-time" id="time-remaining">0h 0m</div>
            <div class="meta">
                <div>Ends at <span id="ends-at">—</span></div>
                <div>Elapsed timer: <span id="elapsed-timer">00:00:00</span></div>
            </div>
        </div>
    </section>

    <section class="card controls">
        <div class="control-row">
            <label class="field">
                <span>Fasting start time</span>
                <input type="datetime-local" id="start-time-input">
            </label>
            <label class="field">
                <span>Goal duration (hours)</span>
                <input type="number" id="goal-hours-input" min="1" step="0.5" value="16">
                <small>Common: 14–16h daily, 20–24h occasionally. Adjust as needed.</small>
                <div class="preset-row">
                    <button class="chip" data-goal="14">14h</button>
                    <button class="chip" data-goal="16">16h</button>
                    <button class="chip" data-goal="18">18h</button>
                    <button class="chip" data-goal="20">20h</button>
                </div>
            </label>
        </div>
        <div class="action-row">
            <button id="start-now" class="primary">Start Now</button>
            <button id="use-start" class="secondary">Use Start Time</button>
            <button id="reset" class="ghost">Reset</button>
        </div>
    </section>

    <section class="card status-card">
        <div class="status-line">
            <div>Status: <strong id="status-label">Not started</strong></div>
            <div class="percent"><span id="progress-percent">0%</span></div>
        </div>
        <div class="progress-bar">
            <div id="progress-fill"></div>
        </div>
        <div class="summary-grid">
            <div class="summary-box">
                <div class="label">Elapsed fasting time</div>
                <div class="value" id="elapsed-time">0h 0m</div>
            </div>
            <div class="summary-box">
                <div class="label">Time remaining to goal</div>
                <div class="value" id="remaining-time">0h 0m</div>
            </div>
            <div class="summary-box">
                <div class="label">Started at</div>
                <div class="value" id="started-at">—</div>
            </div>
            <div class="summary-box">
                <div class="label">Goal</div>
                <div class="value" id="goal-label">—</div>
            </div>
        </div>
    </section>

    <section class="card dual">
        <div class="left">
            <h3>Stats</h3>
            <div class="stats-grid">
                <div class="stat">
                    <div class="label">Average duration</div>
                    <div class="value" id="avg-duration">0h</div>
                </div>
                <div class="stat">
                    <div class="label">Median duration</div>
                    <div class="value" id="median-duration">0h</div>
                </div>
                <div class="stat">
                    <div class="label">Longest streak</div>
                    <div class="value" id="longest-streak">0</div>
                </div>
                <div class="stat">
                    <div class="label">Completed fasts</div>
                    <div class="value" id="completed-count">0</div>
                </div>
            </div>

            <div class="history-header">
                <h4>History</h4>
                <button id="clear-history" class="ghost small">Clear history</button>
            </div>
            <ul class="history" id="history-list"></ul>
            <div class="chart-card">
                <h4>History Trend</h4>
                <canvas id="history-chart" height="240"></canvas>
            </div>
        </div>

        <div class="right">
            <h3>Current Fast</h3>
            <div class="donut" id="donut">
                <div class="donut-center">
                    <div class="donut-value" id="donut-value">0%</div>
                    <div class="donut-label">Completed vs remaining</div>
                </div>
            </div>
        </div>
    </section>
</main>
{% endblock %}