{{--
    One `.co-applicant-block` of the Co-Owner Details section —
    docs/wireframes-v12/new-booking.html (~lines 233-276).

    ## Why this is a partial when the twins are supposed to duplicate

    Recipe §9's twin rule is about the *form*: create.blade.php and
    edit.blade.php each spell out every field so neither can drift from the
    other unnoticed. This block is not a field, it is a **repeater row**, and it
    appears TWICE inside each twin — once per existing/old row in the server-side
    loop, and once inside the `<template>` nrems-booking-form.js clones from. Two
    copies per file, four in the module, of markup that has to stay identical in
    all four or a co-owner added by the browser posts different field names from
    one restored by the server. That is the case a partial is for, and it is
    recorded here rather than left to be re-litigated.

    Both twins include it, in both positions.

    ## The `__INDEX__` token

    `$index` is the array index the fields are named under. The template passes
    the literal string `__INDEX__`, which the client module replaces with the
    real index — in `name`, in `id` and in every label's `for` — as it clones.
    A token rather than string surgery on a number, so the module never has to
    know how a field name is spelled.

    ## The hidden id

    Each block carries its row's `id` so a re-save updates the row in place
    instead of deleting and re-creating it (CR-8 §2.2). It is client input and
    is treated as such: BookingRequest refuses an id that is not a co-owner of
    THIS booking, and BookingService re-checks before it writes. A new block has
    no id and posts an empty string, which both sides read as "new row".

    Params:
        index        the array index, or the literal '__INDEX__'
        row          array<string, mixed> of current values (may be empty)
        position     the number shown in the header ("Co-Owner 3"), or null in
                     the template, where the client module writes it
        occupations  the Occupation enum's value => label map
--}}
@php
    $prefix = 'co_owners['.$index.']';
    $idPrefix = 'co_owners_'.$index.'_';
@endphp
<div class="co-applicant-block" data-role="co-owner-block">
    <div class="co-applicant-header">
        <div class="co-applicant-title" data-role="co-owner-title">Co-Owner {{ $position ?? 1 }}</div>
        <button type="button" class="btn-icon-sm text-danger" data-role="remove-co-owner"
                title="Remove" aria-label="Remove co-owner">
            <i class="fa-solid fa-times" aria-hidden="true"></i>
        </button>
    </div>

    <input type="hidden" name="{{ $prefix }}[id]" id="{{ $idPrefix }}id" value="{{ $row['id'] ?? '' }}" />

    <div class="form-row form-row-2">
        <x-form.input :name="$prefix.'[name]'" label="Common Name" :value="$row['name'] ?? null"
                      placeholder="e.g. Sonal Patel" required data-role="co-owner-name" class="co-owner-name" />

        <x-form.select :name="$prefix.'[occupation]'" label="Occupation" :options="$occupations"
                       placeholder="Select Occupation" :value="$row['occupation'] ?? null" />
    </div>

    <div class="form-row form-row-2">
        <x-form.input :name="$prefix.'[mobile_number]'" type="tel" label="Mobile Number"
                      :value="$row['mobile_number'] ?? null" placeholder="e.g. 98250 67890" />

        <x-form.input :name="$prefix.'[alternate_mobile]'" type="tel" label="Alternate Mobile"
                      :value="$row['alternate_mobile'] ?? null" placeholder="e.g. 79840 11111" />
    </div>

    <div class="form-row form-row-2">
        <x-form.input :name="$prefix.'[email]'" type="email" label="Email"
                      :value="$row['email'] ?? null" placeholder="e.g. sonal.patel@email.com" />

        <x-form.textarea :name="$prefix.'[address]'" label="Address" rows="2"
                         :value="$row['address'] ?? null" placeholder="Co-owner's address" />
    </div>
</div>