<form method="post" action="/directory/save" class="card"><input type="hidden" name="id"
        value="<?= (int)$contact['id'] ?>">
    <div class="card-header">
        <h3 class="card-title"><?= h(t('directory.identity_details')) ?></h3>
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-3"><label class="form-label"><?= h(t('directory.kind')) ?></label><select
                    class="form-select" name="kind" id="directoryKind">
                    <option value="person" <?= $contact['kind'] === 'person' ? 'selected' : '' ?>>
                        <?= h(t('directory.person')) ?></option>
                    <option value="organization" <?= $contact['kind'] === 'organization' ? 'selected' : '' ?>>
                        <?= h(t('directory.organization')) ?></option>
                </select></div>
            <div class="col-md-9"><label class="form-label"><?= h(t('common.name')) ?></label><input
                    class="form-control" name="name" value="<?= h($contact['name']) ?>" required></div>
            <div class="col-12"><label class="form-label"><?= h(t('directory.roles')) ?></label>
                <div class="d-flex flex-wrap gap-3"><?php foreach ($roles as $key => $label): ?><label
                        class="form-check"><input class="form-check-input" type="checkbox" name="roles[]"
                            value="<?= h($key) ?>" <?= in_array($key, $selectedRoles, true) ? 'checked' : '' ?>><span
                            class="form-check-label"><?= h($label) ?></span></label><?php endforeach; ?></div>
            </div>
            <div class="col-md-4"><label class="form-label"><?= h(t('common.phone')) ?></label><input
                    class="form-control" name="phone" value="<?= h($contact['phone']) ?>"></div>
            <div class="col-md-4"><label class="form-label"><?= h(t('common.email')) ?></label><input
                    class="form-control" type="email" name="email" value="<?= h($contact['email']) ?>"></div>
            <div class="col-md-4" id="organizationLinkField"><label
                    class="form-label"><?= h(t('directory.organization_link')) ?></label><select class="form-select"
                    name="organization_id">
                    <option value="">—</option><?php foreach ($organizations as $org): if ((int)$org['id'] === (int)$contact['id']) {
                        continue;
                    } ?><option value="<?= (int)$org['id'] ?>"
                        <?= (int)$contact['organization_id'] === (int)$org['id'] ? 'selected' : '' ?>>
                        <?= h($org['name']) ?></option><?php endforeach; ?>
                </select>
                <div class="form-hint"><?= h(t('directory.organization_hint')) ?></div>
            </div>
            <div class="col-md-6"><label class="form-label"><?= h(t('common.address')) ?></label><input
                    class="form-control" name="address" value="<?= h($contact['address']) ?>"></div>
            <div class="col-md-2"><label class="form-label"><?= h(t('directory.postal_code')) ?></label><input
                    class="form-control" name="postal_code" value="<?= h($contact['postal_code']) ?>"></div>
            <div class="col-md-2"><label class="form-label"><?= h(t('directory.city')) ?></label><input
                    class="form-control" name="city" value="<?= h($contact['city']) ?>"></div>
            <div class="col-md-2"><label class="form-label"><?= h(t('directory.country')) ?></label><input
                    class="form-control" name="country" value="<?= h($contact['country']) ?>"></div>
            <div class="col-12"><label class="form-label"><?= h(t('directory.internal_notes')) ?></label><textarea
                    class="form-control" name="notes" rows="3"><?= h($contact['notes']) ?></textarea></div>
        </div>
    </div>
    <div class="card-footer d-flex justify-content-between"><a class="btn"
            href="/directory"><?= h(t('common.cancel')) ?></a><button
            class="btn btn-primary"><?= h(t('common.save')) ?></button></div>
</form>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const kind = document.getElementById('directoryKind'),
            field = document.getElementById('organizationLinkField'),
            select = field?.querySelector('select');
        const sync = () => {
            const person = kind?.value === 'person';
            field?.classList.toggle('d-none', !person);
            if (select) {
                select.disabled = !person;
                if (!person) select.value = '';
            }
        };
        kind?.addEventListener('change', sync);
        sync();
    });

</script>
