<div x-data='Credits()' x-init="init(@js($oldStaffCredits))">
    <x-form-field-title name="Staff/Credits" />
    <template x-if="credits.length > 0">
        <div class="form-group grid-credits">
            <div><x-form-field-title name="Name" /></div>
            <div><x-form-field-title name="Description" /></div>
            <div><x-form-field-title name="Actions" /></div>
            <template x-for="(credit,i) in credits" :key="i">
                <div style="display:contents">
                    <div>
                        <input class="form-input" type="text" x-model="credit.name" autocomplete="off">
                    </div>
                    <div>
                        <input class="form-input" type="text" x-model="credit.description" autocomplete="off">
                    </div>
                    <div>
                        <button type="button" class="btn" @click="removeCredits(i)">
                            Remove
                        </button>
                    </div>
                </div>
            </template>
        </div>
    </template>
    <input type="hidden" name="staff_credits" x-model="JSON.stringify(credits)">
    <div style="display:flex;justify-content:flex-end;margin-top:10px;">
        <button type="button" class="btn primary" @click="addEmptyCredits()">
            Add a credit
        </button>
    </div>
</div>
