feat: Add email settings management and templates functionality

- Implemented email settings configuration in the admin panel, allowing for SMTP settings and notification preferences.
- Created a new template for email settings with fields for SMTP host, port, username, password, sender address, and recipients.
- Added JavaScript functionality to handle loading, saving, and validating email settings.
- Introduced email templates management, enabling the listing, editing, and saving of email templates.
- Updated navigation to include links to email settings and templates.
- Added tests for email settings and templates to ensure proper functionality and validation.

static/css/admin.css

@@ -22,6 +22,10 @@ nav a:hover {
 .nav a:hover {
   text-decoration: underline;
 }
+.nav a.active {
+  font-weight: 600;
+  text-decoration: underline;
+}
 
 /* Pagination */
 .pagination {
@@ -172,10 +176,24 @@ nav a:hover {
   font-size: 14px;
   box-sizing: border-box;
 }
+.input-error {
+  border-color: #dc3545;
+}
 .form-group textarea {
   min-height: 200px;
   resize: vertical;
 }
+.checkbox-inline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: normal;
+}
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
 .form-row {
   display: flex;
   gap: 15px;
@@ -277,3 +295,94 @@ nav a:hover {
   display: flex;
   align-items: center;
 }
+
+/* Email templates layout */
+.email-templates-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.email-templates-list {
+  flex: 0 0 280px;
+  max-width: 320px;
+  background: #ffffff;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.template-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 10px 12px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: #f8f9fa;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.template-item:hover {
+  border-color: #007bff;
+  background: #eef5ff;
+}
+
+.template-item.active {
+  border-color: #007bff;
+  background: #e2ecff;
+}
+
+.template-name {
+  font-weight: 600;
+  margin-bottom: 4px;
+  color: #1a1a1a;
+}
+
+.template-description {
+  margin: 0 0 12px 0;
+  color: #555555;
+  font-size: 0.95rem;
+  line-height: 1.4;
+}
+
+.email-template-editor {
+  flex: 1 1 380px;
+  min-width: 300px;
+  background: #ffffff;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  padding: 16px 18px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.email-template-editor .form-group textarea {
+  min-height: 360px;
+  font-family: "Courier New", Courier, monospace;
+}
+
+.empty-state {
+  margin: 0;
+  color: #555555;
+  font-style: italic;
+}
+
+@media (max-width: 960px) {
+  .email-templates-container {
+    flex-direction: column;
+  }
+
+  .email-templates-list {
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+
+  .email-template-editor {
+    flex: 1 1 auto;
+  }
+}