<form method="post" action="/bonded/save" class="card">
    <input type="hidden" name="animal_ids[]" value="<?= (int)$sourceAnimalId ?>">
    <div class="card-header d-flex align-items-center justify-content-between">
        <div>
            <h3 class="card-title mb-1"><?= h(t('bonded.create')) ?></h3>
            <div class="text-muted small"><?= h(t('bonded.intro')) ?></div>
        </div>
        <a class="btn btn-ghost-secondary"
            href="/animal?id=<?= (int)$sourceAnimalId ?>"><?= h(t('common.cancel')) ?></a>
    </div>
    <div class="card-body">
        <div class="row g-3 mb-4">
            <div class="col-md-5">
                <label class="form-label"><?= h(t('bonded.group_name')) ?> <span
                        class="text-muted"><?= h(t('common.optional_parentheses')) ?></span></label>
                <input class="form-control" name="name" placeholder="<?= h(t('bonded.group_example')) ?>">
            </div>
            <div class="col-md-7">
                <label class="form-label"><?= h(t('animal.note')) ?> <span
                        class="text-muted"><?= h(t('common.optional_parentheses')) ?></span></label>
                <input class="form-control" name="notes" placeholder="<?= h(t('bonded.note_example')) ?>">
            </div>
        </div>
        <h4><?= h(t('bonded.members')) ?></h4>
        <div class="row g-2">
            <?php foreach ($animals as $candidate): ?>
            <?php $isSource = (int)$candidate['id'] === (int)$sourceAnimalId; ?>
            <div class="col-md-4">
                <label class="form-select d-flex align-items-center gap-2 h-100 <?= $isSource ? 'bg-blue-lt' : '' ?>"
                    style="cursor:pointer">
                    <input class="form-check-input mt-0" type="checkbox"
                        <?= $isSource ? 'checked disabled' : 'name="animal_ids[]"' ?>
                        value="<?= (int)$candidate['id'] ?>">
                    <span class="coat-swatch" style="<?= h(coat_swatch_style($candidate['color'] ?? '')) ?>"></span>
                    <span><strong><?= h($candidate['name']) ?></strong><br><small
                            class="text-muted"><?= h(species_label($candidate['species'] ?? 'chat')) ?> ·
                            <?= h($candidate['status']) ?></small></span>
                </label>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
    <div class="card-footer d-flex justify-content-between align-items-center">
        <span class="text-muted"><?= h(t('bonded.select_two')) ?></span>
        <button class="btn btn-primary" type="submit"><?= h(t('bonded.save')) ?></button>
    </div>
</form>
