{% extends "base.html" %}
{% block title %}Register — Meal Tracker{% endblock %}
{% block content %}
<div class="form-card register-card">
    <h2>Create Account</h2>
    <form method="POST">
        <label for="username">Username</label>
        <input type="text" id="username" name="username" required autofocus>

        <label for="password">Password</label>
        <input type="password" id="password" name="password" required>

        <label for="confirm">Confirm Password</label>
        <input type="password" id="confirm" name="confirm" required>

        <fieldset class="household-section">
            <legend>Household</legend>

            <label class="radio-label">
                <input type="radio" name="household_action" value="join" id="radio-join" checked>
                Join an existing household
            </label>
            <div id="join-block" class="household-block">
                <select name="household_id" class="select-input">
                    <option value="">— Select —</option>
                    {% for h in households %}
                    <option value="{{ h.id }}">{{ h.name }}</option>
                    {% endfor %}
                </select>
                {% if not households %}
                <p class="hint">No households yet. Create one below!</p>
                {% endif %}
            </div>

            <label class="radio-label">
                <input type="radio" name="household_action" value="create" id="radio-create"
                       {% if not households %}checked{% endif %}>
                Create a new household
            </label>
            <div id="create-block" class="household-block">
                <input type="text" name="new_household_name"
                       placeholder="Household name (e.g. The Smiths)"
                       class="text-input">
                <p class="hint">You'll be the admin of this household.</p>
            </div>
        </fieldset>

        <button type="submit" class="btn btn-primary">Register</button>
    </form>
    <p class="form-footer">
        Already have an account? <a href="{{ url_for('auth.login') }}">Log in</a>
    </p>
</div>

<script>
(function() {
    var joinBlock = document.getElementById('join-block');
    var createBlock = document.getElementById('create-block');
    var radioJoin = document.getElementById('radio-join');
    var radioCreate = document.getElementById('radio-create');

    function sync() {
        joinBlock.hidden = !radioJoin.checked;
        createBlock.hidden = !radioCreate.checked;
    }
    radioJoin.onchange = sync;
    radioCreate.onchange = sync;
    sync();
})();
</script>
{% endblock %}