{% extends "base.html" %}
{% block title %}Check-in — WeightTracker{% endblock %}

{% block content %}
<div class="page-header">
    <h1>✏️ Check-in</h1>
    <p>Record your weight. Keep it consistent!</p>
</div>

<!-- Check-in Form -->
<div class="card" style="margin-bottom: 1.5rem;">
    <form hx-post="{{ url_for('checkin.create') }}" hx-target="#checkin-list" hx-swap="afterbegin"
        hx-on::after-request="this.reset()">
        <div class="form-inline">
            <div class="form-group">
                <label class="form-label" for="weight_kg">Weight (kg)</label>
                <input class="form-input" type="number" id="weight_kg" name="weight_kg" step="0.1"
                    placeholder="e.g. 78.5" required autofocus>
            </div>
            <div class="form-group">
                <label class="form-label" for="notes">Notes (optional)</label>
                <input class="form-input" type="text" id="notes" name="notes" placeholder="How are you feeling?">
            </div>
            <button type="submit" class="btn btn-primary">Log Weight</button>
        </div>
    </form>
</div>

<!-- Check-in History -->
<div class="card">
    <div class="card-header">
        <h2>📋 History</h2>
        <span class="badge">{{ checkins | length }} entries</span>
    </div>

    {% if checkins %}
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Weight</th>
                    <th>BMI</th>
                    <th>Notes</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="checkin-list">
                {% for c in checkins %}
                {% include "partials/checkin_row.html" %}
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div id="checkin-list"></div>
    <div class="empty-state">
        <div class="empty-state-icon">⚖️</div>
        <h3>No check-ins yet</h3>
        <p>Enter your weight above to start tracking.</p>
    </div>
    {% endif %}
</div>
{% endblock %}