From 67f234f8e312e7d28c3b746e8e3a15bc62f1505f Mon Sep 17 00:00:00 2001
From: Kieran Eglin <kieran.eglin@gmail.com>
Date: Wed, 20 Mar 2024 08:36:33 -0700
Subject: [PATCH] Added a basic/advanced mode to source form

---
 .../sources/source_html/source_form.html.heex | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/lib/pinchflat_web/controllers/sources/source_html/source_form.html.heex b/lib/pinchflat_web/controllers/sources/source_html/source_form.html.heex
index 564296b..7e9ec5a 100644
--- a/lib/pinchflat_web/controllers/sources/source_html/source_form.html.heex
+++ b/lib/pinchflat_web/controllers/sources/source_html/source_form.html.heex
@@ -1,11 +1,22 @@
-<.simple_form :let={f} for={@changeset} action={@action}>
+<.simple_form
+  :let={f}
+  for={@changeset}
+  action={@action}
+  x-data="{ advancedMode: !!JSON.parse(localStorage.getItem('advancedMode')) }"
+  x-init="$watch('advancedMode', value => localStorage.setItem('advancedMode', JSON.stringify(value)))"
+>
   <.error :if={@changeset.action}>
     Oops, something went wrong! Please check the errors below.
   </.error>
 
-  <h3 class="mt-8 text-2xl text-black dark:text-white">
-    General Options
-  </h3>
+  <section class="flex justify-between items-center mt-8">
+    <h3 class=" text-2xl text-black dark:text-white">
+      General Options
+    </h3>
+    <span class="cursor-pointer hover:underline" x-on:click="advancedMode = !advancedMode">
+      Editing Mode: <span x-text="advancedMode ? 'Advanced' : 'Basic'"></span>
+    </span>
+  </section>
 
   <.input
     field={f[:custom_name]}
@@ -69,6 +80,15 @@
     help="Only download media uploaded after this date. Leave blank to download all media. Must be in YYYY-MM-DD format"
   />
 
+  <section x-show="advancedMode">
+    <h3 class="mt-8 text-2xl text-black dark:text-white">
+      Advanced Options
+    </h3>
+    <p class="text-sm mt-2">
+      Tread carefully
+    </p>
+  </section>
+
   <.button class="my-10 sm:mb-7.5 w-full sm:w-auto">Save Source</.button>
 
   <div class="rounded-sm dark:bg-meta-4 p-4 md:p-6 mb-5">