118 lines
4.7 KiB
HTML
118 lines
4.7 KiB
HTML
{% macro email_templates_tab(templates, csrf_token) %}
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<!-- Template Selection -->
|
|
<div class="mb-4">
|
|
<label for="templateSelect" class="form-label">Select Template</label>
|
|
<select class="form-select" id="templateSelect">
|
|
<option value="">Choose a template...</option>
|
|
{% for template in templates %}
|
|
<option value="{{ template.id }}"
|
|
data-subject="{{ template.subject }}"
|
|
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 mb-4" id="templateEditor" style="display: none;">
|
|
<div class="card-header bg-light">
|
|
<h6 class="mb-0">Template Editor</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="templateForm">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
|
<div class="mb-3">
|
|
<label for="templateSubject" class="form-label">Subject</label>
|
|
<input type="text" class="form-control" id="templateSubject" name="subject" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="templateBody" class="form-label">Body</label>
|
|
<textarea class="form-control" id="templateBody" name="body" rows="10" required></textarea>
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save me-1"></i> Save Template
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dependencies -->
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
|
|
|
|
<!-- Load JavaScript -->
|
|
<script src="{{ url_for('static', filename='js/settings/email_templates.js') }}?v={{ 'js/settings/email_templates.js'|asset_version }}"></script>
|
|
|
|
<style>
|
|
/* Summernote custom styles */
|
|
.note-editor {
|
|
margin-bottom: 0;
|
|
}
|
|
.note-editor.note-frame {
|
|
border-color: #dee2e6;
|
|
border-radius: 0.375rem;
|
|
}
|
|
.note-editor.note-frame:focus-within {
|
|
border-color: #86b7fe;
|
|
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
}
|
|
.note-toolbar {
|
|
background-color: #f8f9fa;
|
|
border-top-left-radius: 0.375rem;
|
|
border-top-right-radius: 0.375rem;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.note-editing-area {
|
|
background-color: #fff;
|
|
}
|
|
.note-statusbar {
|
|
border-top: 1px solid #dee2e6;
|
|
}
|
|
.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 %} |