fix: Jinja2/Alpine conflict — raw block around x-for template

Jinja2 tried to evaluate {{ a.email[0].toUpperCase() }} inside Alpine.js
x-for template, causing UndefinedError. Wrapped in {% raw %} block.
Also changed avatars to use x-text binding instead of {{ }} interpolation.

app/templates/page_editor.html

@@ -51,9 +51,10 @@
           <!-- Participants list -->
           <div class="sd-participants" x-show="accessList.length">
             <template x-for="a in accessList" :key="a.email">
+              {% raw %}
               <div class="sd-participant">
                 <div class="sd-participant-info">
-                  <div class="sd-avatar">{{ a.email[0].toUpperCase() }}</div>
+                  <div class="sd-avatar" x-text="a.email[0].toUpperCase()"></div>
                   <div>
                     <div class="sd-participant-name" x-text="a.email"></div>
                     <div class="sd-participant-email" x-text="a.email"></div>
@@ -79,6 +80,7 @@
                   <div class="sd-perm-option danger" @click="removeAccess(a.email); a.permOpen=false">Remove</div>
                 </div>
               </div>
+              {% endraw %}
             </template>
           </div>