added better editing

templates/edit.html

@@ -4,32 +4,42 @@
 
 {% block content %}
 <h2>Edit {{ site.name }}</h2>
-<a href="{{ url_for('serve_site_content', user_id=current_user.id, site_id=site.id) }}" class="btn" target="_blank">View
-	Site</a>
+<a href="{{ url_for('serve_site_content', slug=site.slug) }}" class="btn" target="_blank">View Site</a>
 
 <div style="margin-bottom: 30px;"></div>
 
 <label for="theme-selector">Select Theme:</label>
 <select id="theme-selector" style="width: 200px;">
-	<!-- Theme options will be populated here -->
+    <!-- Theme options will be populated here -->
 </select>
 
-
 <form method="POST">
-	<div class="form-group">
-		<label>Site Name:</label>
-		<input type="text" name="name" value="{{ site.name }}">
-	</div>
+    <div class="form-group">
+        <label>Site Name:</label>
+        <input type="text" name="name" value="{{ site.name }}">
+    </div>
 
-	{% for filename, content in files.items() %}
 	<div class="form-group">
-		<label>{{ filename }}:</label>
-		<textarea name="{{ filename }}" rows="20"
-			data-language="{% if filename.endswith('.css') %}css{% elif filename.endswith('.js') %}javascript{% else %}htmlmixed{% endif %}">{{ content|trim }}</textarea>
-	</div>
-	{% endfor %}
+        <label>Files:</label>
+        <ul id="file-list" class="file-grid" style="padding-left: 0; list-style: none;">
+            {% for filename, content in files.items() %}
+            <li class="file-card" style="cursor: pointer;" data-index="{{ loop.index0 }}" data-file="{{ filename }}">
+                <div class="file-icon {% if filename.endswith('.html') %}html{% elif filename.endswith('.css') %}css{% elif filename.endswith('.js') %}js{% endif %}"></div>
+                <span class="file-name">{{ filename }}</span>
+            </li>
+            {% endfor %}
+        </ul>
+    </div>
 
-	<button type="submit">Save Changes</button>
+    <!-- Hidden textareas to retain file content (one per file) -->
+    {% for filename, content in files.items() %}
+        <textarea hidden name="{{ filename }}" id="textarea-{{ loop.index0 }}" data-filename="{{ filename }}">{{ content|trim }}</textarea>
+    {% endfor %}
+
+    <!-- Ace Editor Container -->
+    <div id="editor-container" style="width: 100%; height: 400px; border: 1px solid #ddd; margin-top: 20px;"></div>
+
+    <button type="submit" class="btn" style="margin-top:20px;">Save Changes</button>
 </form>
 
 <!-- Ace Editor -->
@@ -41,19 +51,11 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
 <script src="{{ url_for('static', filename='editor.js') }}"></script>
 
-
 <style>
-	/* Style for the Select2 dropdown */
-	.select2-container {
-		margin-bottom: 10px;
-	}
-
-	/* Ensure the editor has a defined height */
-	#editor {
-		width: 100%;
-		max-height: 500px;
-		border: 1px solid #ddd;
-	}
+    /* Style for the Select2 dropdown */
+    .select2-container {
+        margin-bottom: 10px;
+    }
 </style>
 
 {% endblock %}