add mail to table on notif

templates/settings/tabs/email_templates.html

@@ -11,13 +11,27 @@
                         {% for template in templates %}
                         <option value="{{ template.id }}" 
                                 data-subject="{{ template.subject }}"
-                                data-body="{{ template.body }}">
+                                data-body="{{ template.body }}"
+                                data-type="{{ template.name }}">
                             {{ template.name }}
                         </option>
                         {% endfor %}
                     </select>
                 </div>
 
+                <!-- Available Variables -->
+                <div class="card mb-4" id="availableVariables" style="display: none;">
+                    <div class="card-header bg-light">
+                        <h6 class="mb-0">Available Variables</h6>
+                    </div>
+                    <div class="card-body">
+                        <p class="text-muted mb-2">Use these variables in your template by wrapping them in double curly braces, e.g., <code>{{ '{{ user.username }}' }}</code></p>
+                        <div id="variableList" class="mb-0">
+                            <!-- Variables will be populated here -->
+                        </div>
+                    </div>
+                </div>
+
                 <!-- Template Editor -->
                 <div class="card">
                     <div class="card-header bg-light">
@@ -52,6 +66,83 @@
 <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
 
 <script>
+// Template variables mapping
+const templateVariables = {
+    'Account Created': {
+        'user.username': 'The username of the created account',
+        'user.email': 'The email address of the created account'
+    },
+    'Password Reset': {
+        'user.username': 'The username of the account',
+        'reset_link': 'The password reset link'
+    },
+    'Account Deleted': {
+        'user.username': 'The username of the deleted account',
+        'deleted_at': 'The date and time of deletion'
+    },
+    'Account Updated': {
+        'user.username': 'The username of the updated account',
+        'updated_fields': 'The fields that were updated'
+    },
+    'Room Invite': {
+        'user.username': 'The username of the invited user',
+        'room.name': 'The name of the room',
+        'inviter.username': 'The username of the user who sent the invite'
+    },
+    'Room Invite Removed': {
+        'user.username': 'The username of the user',
+        'room.name': 'The name of the room',
+        'remover.username': 'The username of the user who removed the invite'
+    },
+    'Conversation Invite': {
+        'user.username': 'The username of the invited user',
+        'conversation.name': 'The name of the conversation',
+        'inviter.username': 'The username of the user who sent the invite'
+    },
+    'Conversation Invite Removed': {
+        'user.username': 'The username of the user',
+        'conversation.name': 'The name of the conversation',
+        'remover.username': 'The username of the user who removed the invite'
+    },
+    'Conversation Message': {
+        'user.username': 'The username of the recipient',
+        'sender.username': 'The username of the message sender',
+        'message.content': 'The content of the message',
+        'conversation.name': 'The name of the conversation',
+        'message_link': 'The link to view the message'
+    }
+};
+
+// Function to update available variables display
+function updateAvailableVariables(templateType) {
+    const variables = templateVariables[templateType] || {};
+    const variableList = document.getElementById('variableList');
+    const availableVariables = document.getElementById('availableVariables');
+    
+    if (Object.keys(variables).length === 0) {
+        availableVariables.style.display = 'none';
+        return;
+    }
+    
+    let html = '<div class="row">';
+    for (const [variable, description] of Object.entries(variables)) {
+        html += `
+            <div class="col-md-6 mb-2">
+                <div class="card h-100">
+                    <div class="card-body p-2">
+                        <code class="text-primary">{{ '{{ ' }}${variable}{{ ' }}' }}</code>
+                        <p class="text-muted small mb-0">${description}</p>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    html += '</div>';
+    
+    variableList.innerHTML = html;
+    availableVariables.style.display = 'block';
+}
+
 // Wait for document and jQuery to be ready
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize Summernote
@@ -86,11 +177,21 @@ document.addEventListener('DOMContentLoaded', function() {
         const selectedOption = this.options[this.selectedIndex];
         const subject = selectedOption.dataset.subject || '';
         const body = selectedOption.dataset.body || '';
+        const templateType = selectedOption.dataset.type || '';
         
         $('#templateSubject').val(subject);
         $('#templateBody').summernote('code', body);
+        updateAvailableVariables(templateType);
     });
 
+    // Check for initially selected template
+    const templateSelect = document.getElementById('templateSelect');
+    if (templateSelect.value) {
+        const selectedOption = templateSelect.options[templateSelect.selectedIndex];
+        const templateType = selectedOption.dataset.type || '';
+        updateAvailableVariables(templateType);
+    }
+
     // Handle template save
     $('#saveTemplate').on('click', function() {
         const templateId = $('#templateSelect').val();
@@ -187,5 +288,20 @@ document.addEventListener('DOMContentLoaded', function() {
 .note-placeholder {
     color: #6c757d;
 }
+/* Variable card styles */
+#variableList .card {
+    border: 1px solid #dee2e6;
+    transition: all 0.2s ease-in-out;
+}
+#variableList .card:hover {
+    border-color: #86b7fe;
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
+}
+#variableList code {
+    font-size: 0.9em;
+    padding: 0.2em 0.4em;
+    background-color: #f8f9fa;
+    border-radius: 0.25rem;
+}
 </style>
 {% endmacro %}