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

        <label for="password">{{ t('Password') }}</label>
        <input type="password" id="password" name="password" required>

        <label for="confirm">{{ t('Confirm Password') }}</label>
        <input type="password" id="confirm" name="confirm" required>

        <fieldset class="household-section">
            <legend>{{ t('Household') }}</legend>

            <label class="radio-label">
                <input type="radio" name="household_action" value="join" id="radio-join" checked>
                {{ t('Join an existing household') }}
            </label>
            <div id="join-block" class="household-block">
                <select name="household_id" class="select-input">
                    <option value="">{{ t('— Select —') }}</option>
                    {% for h in households %}
                    <option value="{{ h.id }}">{{ h.name }}</option>
                    {% endfor %}
                </select>
                {% if not households %}
                <p class="hint">{{ t('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 %}>
                {{ t('Create a new household') }}
            </label>
            <div id="create-block" class="household-block">
                <input type="text" name="new_household_name"
                       placeholder="{{ t('Household name (e.g. The Smiths)') }}"
                       class="text-input">
                <p class="hint">{{ t("You'll be the admin of this household.") }}</p>
            </div>
        </fieldset>

        <button type="submit" class="btn btn-primary">{{ t('Register') }}</button>
    </form>
    <p class="form-footer">
        {{ t('Already have an account?') }} <a href="{{ url_for('auth.login') }}">{{ t('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 %}