feat: Restore remaining form sections and adjust form width in admin page

pages/admin.vue

@@ -25,7 +25,7 @@
       </div>
     </header>
 
-    <UContainer class="py-8">
+    <UContainer class="py-8 max-w-3xl">
       <UCard>
         <template #header>
           <h2 class="text-xl font-semibold">Sermon Details</h2>
@@ -60,6 +60,81 @@
               />
             </UFormGroup>
           </div>
+
+          <!-- Bible References -->
+          <UFormGroup label="Bible References" name="bibleReferences">
+            <div
+              v-for="(reference, index) in form.bibleReferences"
+              :key="index"
+              class="flex items-center gap-2 mb-2"
+            >
+              <UInput
+                v-model="form.bibleReferences[index]"
+                :placeholder="`Bible reference ${index + 1}`"
+                :disabled="loading"
+                class="flex-1"
+              />
+              <UButton
+                @click="removeBibleReference(index)"
+                variant="ghost"
+                color="red"
+                icon="i-heroicons-minus"
+                :disabled="loading"
+                v-if="form.bibleReferences.length > 1"
+              />
+            </div>
+            <UButton
+              @click="addBibleReference"
+              variant="link"
+              color="primary"
+              icon="i-heroicons-plus"
+              :disabled="loading"
+              :padded="false"
+              class="-ml-1"
+            >
+              Add another reference
+            </UButton>
+          </UFormGroup>
+
+          <!-- Personal Application -->
+          <UFormGroup label="Personal Application" name="personalApplication">
+            <UTextarea
+              v-model="form.personalApplication"
+              :rows="4"
+              placeholder="Describe how this sermon applies to daily life..."
+              :disabled="loading"
+            />
+          </UFormGroup>
+
+          <!-- Pastor's Challenge -->
+          <UFormGroup label="Pastor's Challenge" name="pastorChallenge">
+            <UTextarea
+              v-model="form.pastorChallenge"
+              :rows="4"
+              placeholder="What challenge does the pastor give to the congregation?"
+              :disabled="loading"
+            />
+          </UFormGroup>
+
+          <!-- Submit -->
+          <div class="flex justify-end space-x-4">
+            <UButton
+              type="button"
+              variant="outline"
+              :disabled="loading"
+              @click="resetForm"
+            >
+              Reset
+            </UButton>
+            <UButton
+              type="submit"
+              variant="solid"
+              color="primary"
+              :loading="loading"
+            >
+              Create Sermon
+            </UButton>
+          </div>
         </form>
       </UCard>