<dialog class="modal modal-bottom sm:modal-middle" :class="{ 'modal-open': showModal }">
    <div class="modal-box border border-base-300 shadow-xl bg-base-100 max-w-md p-0 overflow-hidden">
        <div class="px-6 py-4 bg-base-200/50 border-b border-base-300 flex items-center justify-between">
            <h3 class="font-bold text-base flex items-center gap-2">
                <i class="fa-solid fa-link text-primary text-sm"></i>
                <span x-text="form.controlTestId ? 'Edit Association' : 'New Association'"></span>
            </h3>
            <button class="btn btn-sm btn-circle btn-ghost" @click="closeModal()">✕</button>
        </div>

        <div class="p-6 space-y-4">
            <div class="form-control">
                <label class="label pt-0">
                    <span class="label-text font-semibold text-xs opacity-70">Control Product</span>
                </label>
                <select class="select select-bordered select-sm w-full" x-model="form.controlId"
                    :class="{'select-error': errors.controlId}">
                    <option value="">Select control...</option>
                    <template x-for="c in controls" :key="c.controlId">
                        <option :value="c.controlId" x-text="`${c.controlName} (${c.lot})`"></option>
                    </template>
                </select>
            </div>

            <div class="form-control">
                <label class="label pt-0">
                    <span class="label-text font-semibold text-xs opacity-70">Test Parameter</span>
                </label>
                <select class="select select-bordered select-sm w-full" x-model="form.testId"
                    :class="{'select-error': errors.testId}">
                    <option value="">Select test...</option>
                    <template x-for="t in tests" :key="t.testId">
                        <option :value="t.testId" x-text="t.testName"></option>
                    </template>
                </select>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div class="form-control">
                    <label class="label pt-0">
                        <span class="label-text font-semibold text-xs opacity-70">Mean (Target)</span>
                    </label>
                    <input type="number" step="0.0001" class="input input-bordered input-sm w-full" x-model="form.mean"
                        :class="{'input-error': errors.mean}" />
                </div>
                <div class="form-control">
                    <label class="label pt-0">
                        <span class="label-text font-semibold text-xs opacity-70">Standard Dev.</span>
                    </label>
                    <input type="number" step="0.0001" class="input input-bordered input-sm w-full" x-model="form.sd"
                        :class="{'input-error': errors.sd}" />
                </div>
            </div>
        </div>

        <div class="px-6 py-4 bg-base-200/30 border-t border-base-300 flex justify-end gap-2">
            <button class="btn btn-sm btn-ghost" @click="closeModal()">Cancel</button>
            <button class="btn btn-sm btn-primary px-6" @click="save()" :disabled="loading">
                <span x-show="!loading">Save Changes</span>
                <span x-show="loading" class="loading loading-spinner loading-xs"></span>
            </button>
        </div>
    </div>
    <form method="dialog" class="modal-backdrop bg-black/40" @click="closeModal()"></form>
</dialog>