unsupervised-scheduler/templates/frontend/family-page.php

<?php
declare(strict_types=1);

use Unsupervised\Schedular\Registration\QuestionField;

if (! defined('ABSPATH')) {
    exit;
}

/**
 * @var list<array{id: int, name: string, date_of_birth: string, relationship: string}> $children
 * @var list<\Unsupervised\Schedular\Registration\Question> $questions Account-scope questions, asked once per child.
 * @var string $error  Validation error from the last submission, if any.
 * @var string $notice Confirmation of a completed add/edit/remove, if any.
 * @var int    $editingId Child whose row is open for editing; 0 for none.
 */
?>
<div class="us-family">
    <h3><?php esc_html_e('Your family', 'unsupervised-schedular'); ?></h3>

    <?php if ($notice !== '') : ?>
        <p class="us-success"><?php echo esc_html($notice); ?></p>
    <?php endif; ?>

    <?php if ($error !== '') : ?>
        <p class="us-error" role="alert"><?php echo esc_html($error); ?></p>
    <?php endif; ?>

    <?php if (empty($children)) : ?>
        <p><?php esc_html_e('You have not added any children yet. Add one below to start booking lessons for them.', 'unsupervised-schedular'); ?></p>
    <?php else : ?>
        <ul class="us-family-list">
            <?php foreach ($children as $child) : ?>
                <li class="us-family-child">
                    <?php if ($editingId === $child['id']) : ?>
                        <form method="post" action="" class="us-family-edit">
                            <?php wp_nonce_field('us_family'); ?>
                            <input type="hidden" name="us_family_action" value="edit">
                            <input type="hidden" name="child_id" value="<?php echo esc_attr((string) $child['id']); ?>">
                            <p>
                                <label for="us-edit-name-<?php echo esc_attr((string) $child['id']); ?>"><?php esc_html_e('Name', 'unsupervised-schedular'); ?></label>
                                <input type="text" name="child_name" id="us-edit-name-<?php echo esc_attr((string) $child['id']); ?>" value="<?php echo esc_attr($child['name']); ?>" required>
                            </p>
                            <p>
                                <label for="us-edit-dob-<?php echo esc_attr((string) $child['id']); ?>"><?php esc_html_e('Date of birth', 'unsupervised-schedular'); ?></label>
                                <input type="date" name="child_dob" id="us-edit-dob-<?php echo esc_attr((string) $child['id']); ?>" value="<?php echo esc_attr($child['date_of_birth']); ?>">
                            </p>
                            <p>
                                <button type="submit"><?php esc_html_e('Save', 'unsupervised-schedular'); ?></button>
                                <a href="<?php echo esc_url((string) get_permalink()); ?>"><?php esc_html_e('Cancel', 'unsupervised-schedular'); ?></a>
                            </p>
                        </form>
                    <?php else : ?>
                        <span class="us-family-child-name"><?php echo esc_html($child['name']); ?></span>
                        <?php if ($child['date_of_birth'] !== '') : ?>
                            <span class="us-family-child-dob"><?php echo esc_html($child['date_of_birth']); ?></span>
                        <?php endif; ?>
                        <span class="us-family-child-actions">
                            <a href="<?php echo esc_url(add_query_arg('us_edit_child', $child['id'], (string) get_permalink())); ?>"><?php esc_html_e('Edit', 'unsupervised-schedular'); ?></a>
                            <form method="post" action="" class="us-family-remove">
                                <?php wp_nonce_field('us_family'); ?>
                                <input type="hidden" name="us_family_action" value="remove">
                                <input type="hidden" name="child_id" value="<?php echo esc_attr((string) $child['id']); ?>">
                                <button type="submit"><?php esc_html_e('Remove', 'unsupervised-schedular'); ?></button>
                            </form>
                        </span>
                    <?php endif; ?>
                </li>
            <?php endforeach; ?>
        </ul>
    <?php endif; ?>

    <form method="post" action="" class="us-family-add">
        <?php wp_nonce_field('us_family'); ?>
        <input type="hidden" name="us_family_action" value="add">

        <h4><?php esc_html_e('Add a child', 'unsupervised-schedular'); ?></h4>
        <p>
            <label for="us-child-name"><?php esc_html_e('Name', 'unsupervised-schedular'); ?></label>
            <input type="text" name="child_name" id="us-child-name" required>
        </p>
        <p>
            <label for="us-child-dob"><?php esc_html_e('Date of birth', 'unsupervised-schedular'); ?></label>
            <input type="date" name="child_dob" id="us-child-dob">
        </p>
        <p>
            <label for="us-child-relationship"><?php esc_html_e('Your relationship to them', 'unsupervised-schedular'); ?></label>
            <input type="text" name="child_relationship" id="us-child-relationship" placeholder="<?php esc_attr_e('Parent', 'unsupervised-schedular'); ?>">
        </p>

        <?php if (! empty($questions)) : ?>
            <fieldset class="us-reg-questions">
                <legend><?php esc_html_e('About this child', 'unsupervised-schedular'); ?></legend>
                <?php foreach ($questions as $question) : ?>
                    <?php
                    // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- QuestionField::render() escapes every interpolated value.
                    echo QuestionField::render($question, 'us_answers[' . (int) $question->id . ']', 'us-family-q-' . (int) $question->id);
                    ?>
                <?php endforeach; ?>
            </fieldset>
        <?php endif; ?>

        <p>
            <button type="submit"><?php esc_html_e('Add child', 'unsupervised-schedular'); ?></button>
        </p>
    </form>
</div>