list.html

{% extends "_base.html" %}
{% load static %}

{% block styles %}
    {{ block.super }}
    <!-- DataTables -->
    <link rel="stylesheet" href="{% static 'npm/datatables.net-bs/css/dataTables.bootstrap.css' %}">
{% endblock styles %}

{% block ui_active_tab %}'mail_templates'{% endblock ui_active_tab %}
{% block page_header %}Mail templates{% endblock page_header %}
{% block page_description %}{% endblock page_description %}

{% block breadcrumb %}
    {% include "mail_templates/breadcrumb.html" %}
{% endblock breadcrumb %}

{% block maincontent %}


    <div class="box box-success">
        <div class="box-header with-border">
            <h3 class="box-title">Templates</h3>
        </div>
        <div class="box-body">

            <div>
                <a class="btn btn-app" href="{% url 'web.views.mail_template_add' %}">
                    <i class="fa fa-plus"></i> Add new template
                </a>
            </div>
            <table id="table" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>No.</th>
                    <th>Context</th>
                    <th class="no-sort">Language</th>
                    <th>Name</th>
                    <th class="no-sort">Download</th>
                    <th class="no-sort">Edit</th>
                    <th class="no-sort">Delete</th>
                </tr>
                </thead>
                <tbody>
                {% for mail_template in mail_templates %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ mail_template.get_context_display }}</td>
                        <td>{% autoescape off %}{{ mail_template.language.image_img }}{% endautoescape %}</td>
                        <td>{{ mail_template.name }}</td>
                        <td><a href="{{ mail_template.template_file.url }}"><i class="fa fa-download"></i></a></td>
                        <td><a href="{% url 'web.views.mail_template_edit' mail_template.id %}"><i
                                class="fa fa-edit"></i></a></td>
                        <td><a href="{% url 'web.views.mail_template_delete' mail_template.id %}"><i
                                class="fa fa-trash text-danger"></i></a></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="box box-success">
        <div class="box-header with-border">
            <h3 class="box-title">Tags <i class="fa fa-question-circle"></i></h3>
        </div>
        <div class="box-body">
            <p>The following tags can be used within the Word documents and will be replaced by actual values during the
                mail generation.</p>
            <table id="table" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>Placeholder</th>
                    <th>Description</th>
                    <th>Comment</th>
                </tr>
                </thead>
                <tbody>
                {% for name, tags in explanations.items %}
                    <tr>
                        <td class="table-separator" colspan="3">{{ name | title }}</td>
                    </tr>
                    {% for tag in tags %}
                        <tr>
                            <td>{{ tag.0 }}</td>
                            <td>{{ tag.1 }}</td>
                            <td>{{ tag.2 }}</td>
                        </tr>
                    {% endfor %}
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock maincontent %}

{% block scripts %}
    {{ block.super }}

    <script src="{% static 'npm/datatables.net/js/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'npm/datatables.net-bs/js/dataTables.bootstrap.min.js' %}"></script>

    <script>
        $(function () {
            $('#table').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "columnDefs": [ {
                    "targets": 'no-sort',
                    "orderable": false,
                } ]
            });
        });
    </script>
{% endblock scripts %}