Descripción (Español)

</div>

<div class="space-y-2">
					<Label for="description_en">Descripción (Inglés)</Label>
					<Textarea
						id="description_en"
						bind:value={formData.description_en}
						placeholder="English description"
						disabled={loading}
						rows={3}
					/>
				</div>
			</div>

<div class="space-y-2">
				<Label for="material_key">Tipo de Material</Label>
				{#if loadingMaterialTypes}
					<div class="flex items-center gap-2 text-sm text-muted-foreground">
						<div class="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
						Cargando tipos de material...
					</div>
				{:else if materialTypes.length > 0}
					<select 
						bind:value={formData.material_key}
						disabled={loading}
						class="border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
					>
						<option value="">Sin tipo de material</option>
						{#each materialTypes as materialType}
							<option value={materialType.key}>
								{materialType.key} - {materialType.description}
							</option>
						{/each}
					</select>
				{:else}
					<Input
						id="material_key"
						bind:value={formData.material_key}
						placeholder="No hay tipos de material disponibles"
						disabled={true}
					/>
				{/if}
			</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
				<div class="space-y-2">
					<Label for="fraction" class="required">Fracción</Label>
					<Input
						id="fraction"
						bind:value={formData.fraction}
						placeholder="Ej: 123123"
						required
						disabled={loading}
					/>
				</div>

<div class="space-y-2">
					<Label for="us_fraction" class="required">Fracción US</Label>
					<Input
						id="us_fraction"
						bind:value={formData.us_fraction}
						placeholder="Ej: 123123"
						required
						disabled={loading}
					/>
				</div>
			</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
				<div class="space-y-2">
					<Label for="sub_key" class="required">Subclave</Label>
					<Input
						id="sub_key"
						bind:value={formData.sub_key}
						placeholder="Ej: 123"
						required
						disabled={loading}
					/>
				</div>

<div class="space-y-2">
					<Label for="iva_exempt_fraction" class="required">Fracción Exenta IVA</Label>
					<Input
						id="iva_exempt_fraction"
						bind:value={formData.iva_exempt_fraction}
						placeholder="Ej: 123"
						required
						disabled={loading}
					/>
				</div>
			</div>

<div class="space-y-2">
				<Label for="unit_of_measure" class="required">Unidad de Medida</Label>
				<select 
					bind:value={formData.unit_of_measure}
					disabled={loading}
					class="border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
				>
					{#each unitOptions as unit}
						<option value={unit.value}>{unit.label}</option>
					{/each}
				</select>
			</div>

<div class="space-y-2">
				<Label for="physical_review">Revisión Física</Label>
				<select 
					bind:value={formData.physical_review}
					disabled={loading}
					class="border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
				>
					<option value={0}>No</option>
					<option value={1}>Sí</option>
				</select>
			</div>

<Dialog.Footer>
				<Button type="button" variant="outline" onclick={() => (open = false)} disabled={loading}>
					Cancelar
				</Button>
				<Button type="submit" disabled={loading}>
					{#if loading}
						<svg
							class="mr-2 h-4 w-4 animate-spin"
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
						>
							<circle
								class="opacity-25"
								cx="12"
								cy="12"
								r="10"
								stroke="currentColor"
								stroke-width="4"
							></circle>
							<path
								class="opacity-75"
								fill="currentColor"
								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
							></path>
						</svg>
						Guardando...
					{:else}
						{isEdit ? 'Actualizar' : 'Crear'}
					{/if}
				</Button>
			</Dialog.Footer>
		</form>
	</Dialog.Content>
</Dialog.Root>