···

       
243
       
243
       
 
       
            </button>

     

       
244
       
244
       
 
       
          </div>

     

       
245
       
245
       
 
       
          <form ref={formRef} class="flex flex-col gap-y-2">

     

       
246
       
246
       
-
       
            <div class="flex w-fit flex-col gap-y-1 text-xs sm:text-sm">

     

       
246
       
246
       
+
       
            <div class="flex w-fit flex-col gap-y-1 text-sm">

     

       
247
       
247
       
 
       
              <Show when={props.create}>

     

       
248
       
248
       
 
       
                <div class="flex items-center gap-x-2">

     

       
249
       
249
       
 
       
                  <label for="collection" class="min-w-20 select-none">

     
···

       
282
       
282
       
 
       
                  <option value="false">False</option>

     

       
283
       
283
       
 
       
                </select>

     

       
284
       
284
       
 
       
              </div>

     

       
285
       
285
       
-
       
              <div class="dark:hover:bg-dark-200 dark:shadow-dark-800 dark:active:bg-dark-100 flex w-fit rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 text-xs shadow-xs hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">

     

       
286
       
286
       
-
       
                <input

     

       
287
       
287
       
-
       
                  type="file"

     

       
288
       
288
       
-
       
                  id="blob"

     

       
289
       
289
       
-
       
                  class="sr-only"

     

       
290
       
290
       
-
       
                  ref={blobInput}

     

       
291
       
291
       
-
       
                  onChange={(e) => {

     

       
292
       
292
       
-
       
                    if (e.target.files !== null) setOpenUpload(true);

     

       
293
       
293
       
-
       
                  }}

     

       
294
       
294
       
-
       
                />

     

       
295
       
295
       
-
       
                <label class="flex items-center gap-1 px-2 py-1.5 select-none" for="blob">

     

       
296
       
296
       
-
       
                  <span class="iconify lucide--upload"></span>

     

       
297
       
297
       
-
       
                  Upload

     

       
298
       
298
       
-
       
                </label>

     

       
299
       
299
       
-
       
              </div>

     

       
300
       
300
       
-
       
              <Modal open={openUpload()} onClose={() => setOpenUpload(false)} closeOnClick={false}>

     

       
301
       
301
       
-
       
                <FileUpload file={blobInput.files![0]} />

     

       
302
       
302
       
-
       
              </Modal>

     

       
303
       
285
       
 
       
            </div>

     

       
304
       
286
       
 
       
            <Editor

     

       
305
       
287
       
 
       
              content={JSON.stringify(props.create ? placeholder() : props.record, null, 2)}

     

       
306
       
288
       
 
       
            />

     

       
307
       
289
       
 
       
            <div class="flex flex-col gap-2">

     

       
308
       
290
       
 
       
              <Show when={notice()}>

     

       
309
       
309
       
-
       
                <div class="text-red-500 dark:text-red-400">{notice()}</div>

     

       
291
       
291
       
+
       
                <div class="text-sm text-red-500 dark:text-red-400">{notice()}</div>

     

       
310
       
292
       
 
       
              </Show>

     

       
311
       
311
       
-
       
              <div class="flex items-center justify-end gap-2">

     

       
312
       
312
       
-
       
                <Show when={!props.create}>

     

       
313
       
313
       
-
       
                  <div class="flex items-center gap-1">

     

       
314
       
314
       
-
       
                    <input id="recreate" name="recreate" type="checkbox" />

     

       
315
       
315
       
-
       
                    <label for="recreate" class="text-sm select-none">

     

       
316
       
316
       
-
       
                      Recreate record

     

       
317
       
317
       
-
       
                    </label>

     

       
318
       
318
       
-
       
                  </div>

     

       
319
       
319
       
-
       
                </Show>

     

       
320
       
320
       
-
       
                <Button

     

       
321
       
321
       
-
       
                  onClick={() =>

     

       
322
       
322
       
-
       
                    props.create ?

     

       
323
       
323
       
-
       
                      createRecord(new FormData(formRef))

     

       
324
       
324
       
-
       
                    : editRecord(new FormData(formRef))

     

       
325
       
325
       
-
       
                  }

     

       
293
       
293
       
+
       
              <div class="flex justify-between gap-2">

     

       
294
       
294
       
+
       
                <div class="dark:hover:bg-dark-200 dark:shadow-dark-800 dark:active:bg-dark-100 flex w-fit rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 text-xs shadow-xs hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">

     

       
295
       
295
       
+
       
                  <input

     

       
296
       
296
       
+
       
                    type="file"

     

       
297
       
297
       
+
       
                    id="blob"

     

       
298
       
298
       
+
       
                    class="sr-only"

     

       
299
       
299
       
+
       
                    ref={blobInput}

     

       
300
       
300
       
+
       
                    onChange={(e) => {

     

       
301
       
301
       
+
       
                      if (e.target.files !== null) setOpenUpload(true);

     

       
302
       
302
       
+
       
                    }}

     

       
303
       
303
       
+
       
                  />

     

       
304
       
304
       
+
       
                  <label class="flex items-center gap-1 px-2 py-1.5 select-none" for="blob">

     

       
305
       
305
       
+
       
                    <span class="iconify lucide--upload"></span>

     

       
306
       
306
       
+
       
                    Upload

     

       
307
       
307
       
+
       
                  </label>

     

       
308
       
308
       
+
       
                </div>

     

       
309
       
309
       
+
       
                <Modal

     

       
310
       
310
       
+
       
                  open={openUpload()}

     

       
311
       
311
       
+
       
                  onClose={() => setOpenUpload(false)}

     

       
312
       
312
       
+
       
                  closeOnClick={false}

     

       
326
       
313
       
 
       
                >

     

       
327
       
327
       
-
       
                  {props.create ? "Create" : "Edit"}

     

       
328
       
328
       
-
       
                </Button>

     

       
314
       
314
       
+
       
                  <FileUpload file={blobInput.files![0]} />

     

       
315
       
315
       
+
       
                </Modal>

     

       
316
       
316
       
+
       
                <div class="flex items-center justify-end gap-2">

     

       
317
       
317
       
+
       
                  <Show when={!props.create}>

     

       
318
       
318
       
+
       
                    <div class="flex items-center gap-1">

     

       
319
       
319
       
+
       
                      <input id="recreate" name="recreate" type="checkbox" />

     

       
320
       
320
       
+
       
                      <label for="recreate" class="text-sm select-none">

     

       
321
       
321
       
+
       
                        Recreate record

     

       
322
       
322
       
+
       
                      </label>

     

       
323
       
323
       
+
       
                    </div>

     

       
324
       
324
       
+
       
                  </Show>

     

       
325
       
325
       
+
       
                  <Button

     

       
326
       
326
       
+
       
                    onClick={() =>

     

       
327
       
327
       
+
       
                      props.create ?

     

       
328
       
328
       
+
       
                        createRecord(new FormData(formRef))

     

       
329
       
329
       
+
       
                      : editRecord(new FormData(formRef))

     

       
330
       
330
       
+
       
                    }

     

       
331
       
331
       
+
       
                  >

     

       
332
       
332
       
+
       
                    {props.create ? "Create" : "Edit"}

     

       
333
       
333
       
+
       
                  </Button>

     

       
334
       
334
       
+
       
                </div>

     

       
329
       
335
       
 
       
              </div>

     

       
330
       
336
       
 
       
            </div>

     

       
331
       
337
       
 
       
          </form>